I have code similar to the below
<form action="/u" method="post">
<div class="reply">
<input type="hidden" name="type" value="2"/>
<input type="hidden" name="id" value="1"/>
<input type="hidden" name="parentId" value="0"/>
<textarea name="text" style="width: 500px; height: 200px;"></textarea><div class="rhs"><button>Post Comment</button></div></div>
</form>
It seems that i dont need a name for the editor to work however i need to use name so i can post the data. Issue is i do NOT get the text data that the user enters but the generated html from markdown editor. How do i set it so i get the normal raw html that the user types?
Change the output option from HTML to markdown.
It looks something like:
Attacklab.wmd_defaults = {
version: 1, output: "markdown", lineLength: 40, delayLoad: false
};
Although this question has already been answered here is an additional tip that may be of relevance: There is an easy way to post both the html and the markdown, by posting via javascript and using the preview component to get the html, and the textarea to get the markdown source. Here is a blog post by me with more details.
Related
I need CSS code to restrict submit button if fields are empty.Daily we are receiving 3-5 blank inquiries through our WordPress landing page submit button.
Where to put these CSS codes if any.
Thanks
You really should do this with a script, because doing something like this by CSS is very sensitive to any future changes to your form structure.
It can be done with only CSS, using the :placeholder-shown selector.
For this you'll need to add a placeholder to all text inputs.
/* As long as one of the selectors is matched, the button won't show. */
form input:placeholder-shown ~ button,
form textarea:placeholder-shown ~ button {
display: none;
}
<form>
first name: <input type="text" name="firstname" placeholder="Enter first name"><br>
Last name: <input type="text" name="lastname" placeholder="Enter last name"><br>
Text area<br>
<textarea name="textarea" placeholder="Enter some text..."></textarea>
<br>
<button type="submit">Submit</button>
</form>
This will work, but for any change in the form you'll need to make sure it doesn't break.
I personally won't use this :)
I would like to custom input files upload from CF7 in WP.
There are many ways to custom the button, but I need to display the file name once it has been uploaded.
I found one way to do it with this code :
<input type="file" class="custom-file-input">
<label class="custom-file-label" for="custom-file-input">Your file</label>
And this script :
<script>
$(".custom-file-input").on("change", function() {
var fileName = $(this).val().split("\\").pop();
$(this).siblings(".custom-file-label").addClass("selected").html(fileName);
});
</script>
It works, but with CF7, we use shortcode te create inputs.
And it gives something like :
<span class="wpcf7-form-control-wrap">
<input type="file" name="your-file" size="40" class="wpcf7-form-control wpcf7-file custom-file-input" id="your-file" accept=".jpg,.jpeg,.png,.gif,.pdf,.doc,.docx" aria-invalid="false">
</span>
<label class="custom-file-label" for="your-file">Your file</label></div>
And it doesn't work anymore.
JS seems ok with the CF7 code.
Maybe it doesn't work because of CF7's way of generating code ?
I don't know.. Do you have an idea ?
Thank in advance for your help :)
[file file-265 id:fileuploadfield class:fileuploadfield limit:120000 filetypes:.jpg .png 1/]
[text uploadtextfield id:uploadtextfield class:uploadtextfield]
<input type="button" id="uploadfile" value="select">
As CF7 wraps the field inside <span> first you need to look for the parent container (assuming .custom-file), and then look for the .custom-file-label.
$(".custom-file-input").on("change", function() {
var filename = $(this).val().split("\\").pop();
$(this).parents(".custom-file").find(".custom-file-label").addClass("selected").html(filename);
});
This is kind of a late answer, but I was having this same issue today and this question helped me find the solution.
I am using Tuple to pass two models inside the view like code given below.
#model Tuple<AdvanceSearchModel, List<SearchUserModel>>
<form role="search" method="post" action="/Public/AdvanceSearch">
<div class="form-group">
<label>Name</label>
<input name="FullNames" type="text" class="form-control" value=""/>
</div>
<div class="form-group">
<label>Product</label>
<input name="Products" type="text" class="form-control" value="" />
</div>
<div class="form-group">
<label>Location:</label>
<input name="Location" type="text" class="form-control" value="" />
</div>
<div class="form-group">
<label>State</label>
<input name="States" type="text" class="form-control" value="" />
</div>
<div class="form-group">
<label>Country</label>
<input name="Countries" type="text" class="form-control" value=""/>
</div>
</form>
All the name attributes inside inputs are of AdvanceSearchModel. How do I use tag helper such as asp-for when passing multiple model to the views containing one or multiple forms? Also how do I retain values of the form after submitting the form in above scenario?
As you can see in the source code of InputTagHelper
You can see it creates the name attribute based on the (lambda) expression in html-tag:asp-for.
what you need
You need a form name tag like this SearchUserModel[0].Location
Where:
SearchUserModel is the property name on the model which is in the controller method you post to
[0] is the index in the list
Location is the property on the iten in the list the SearchUserModel instance
My suggestion
Not to do
Extend the InputTagHelper and add a prefix option (which adds a prefex to the name).
Use a view model Not a tuple!
Create a partial view that only takes SearchUserModel + a prefix (like an int for which row in the list it is for example: usermodel[1])
In your view loop over the list and call the partial.
result
#model SearchUserModel
<input asp-for="Location" my-prefix="ListItem[#Model.Id]" class="form-control" />
Better longterm option
Make a HTML template on how SearchUserModel part of the form should look.
Do ajax call to get the data or put the data as json in your view. (or take step 3 from what not to do)
Generate the form with well structured javascript.
On submit Instead of submitting the form, parse the from to json and send this as json ajax call.
Why do i say this? It is easier to debug if you get weird databindings in your controller.
That said, option 1 is perfectly fine but it might lead to problems later, as it is very static template, you wont be able to add or remove rows easily.
References for proper html name tags for lists:
http://www.hanselman.com/blog/ASPNETWireFormatForModelBindingToArraysListsCollectionsDictionaries.aspx
How does MVC 4 List Model Binding work?
Problem solved after I found an other template. Seems the previous one is incompatible.
I'm using the Plugin Foxycomplete (advanced autocomplete search with images) - more specifically: I want to use it. I installed and enabled it. The developer explains one step like this:
Enter the ID of the Form Input Field WITHOUT THE '#' on which you wish to apply the Autocomplete functionaliy. Defaults to the Regular "s".
I've even looked at the file foxycomplete.js, but I don't get it:
(function($) {
$(document).ready(function() {
var inputField = site_data.inputField;
var inputWidth = 0;
var absPath = "";
if(site_data.inputField == ""){
inputField = "s";
}
After this I took a look at the search form with firebug and this is the HTML-code:
<form action="http://localhost/sites/wordpress/" class="searchform" method="get">
<input type="text" value="" name="s" class="field">
<input type="submit" value="" name="submit" class="submit">
</form>
Now I'm assuming that I have to change class = "field" to id = "s", but I also do not know in which document I find the HTML part, I am a little stuck. If I do the change in firebug, it doesn't work.
all you need to do is to add following to your "input type" - name="s", id="s". This worked for me on a Canvas theme, by woothemes, and should be cool with any other
as an example for your code:
<input type="text" name="s" id="s" value="" class="field">
edit: search form code location really different to each theme template. but in most cases it's in header or sidebar.
i have requirement to create form on the fly like html below
<form action='http://www.example.com' method='POST' name=''>
<input type='HIDDEN' name='' value=''>
<input type='HIDDEN' name='Username' value=''>
<input type='HIDDEN' name='password' value=''>
<input type='SUBMIT' value='Go'>
</form>
to the form once this form created it should automatically get post on page load in asp.net.
This is can not actually post on PageLoad. You can post it automatically only using javascript after you have render the html page.
This article have a source code on how to create this form dynamically on asp.net and automatically make the post. Is done exactly what you ask for.
http://www.codeproject.com/Articles/37539/Redirect-and-POST-in-ASP-NET
From the previous answer by #Aristos, I have checked the link and I have learnt too. You can check it out
You can also use javascript to post the form when the page load
...your forms tags here
<script type="text/javascript">
document.forms['form_name'].submit();
</script>
</body>
</html>
Just make sure the script is the last element in the DOM or use jQuery
$(document).ready(function()
{
document.forms['form_name'].submit();
}
);