if you have
<button class="button yellow" type="submit"
name="button">Log in</button>
and you submit it, what gets posted to the server for the button which has a name but no value attribute?
The reason I ask is that I'm parsing HTML forms, and need to post the named values that send data to the server. I got the others covered, but wasn't sure about button.
According to the HTML Spec, a button's value is either determined by its value attribute or is an empty string. A button's value is only submitted with the form if the button has a name and is used to initiate form submission. If the button in your example is clicked, the resultant submission will be:
"button=" (quotes added)
Some browsers (mainly older IE versions) have incorrect implementations of this button behaviour that either set the value to the button's contents or submit all button values regardless of initiation source.
button does not get posted to server when the form is posted. Only input type's like text, password, select elements etc., which accepts user inputs will be posted to the server
Button never supplies value to form. It just provides a submit event that tells the browser to submit that form with all the input tags to the action attribute inside your form tag using the method attribute value. Button only provides the event and not the values.
There will be nothing posted to the server for buttons. When you click a button, it invokes the action of submit, that is all.
I tried it out by printing the request.POST in django.
This image shows a "Log in" button with no value but name="button", as asked
The console shows
< QueryDict: {u'csrfmiddlewaretoken': [u'9aAx..'], u'sensor': [u'sd1'], u'button':[u'']}>
So, in this case, the form is sent as a dictionary and for the buttons the key, value pair is "button" : " ". So, if you try to get value of this button with request.POST.get, you will get NULL.
So, the answer to your question is the form consolidates all the input values, which can be accessed with their 'name' including buttons. If no value is provided, it returns NULL.
Related
I want to prevent user to write local characters (croatian - ĆČĐŠŽ) inside a input
<input type='text' pattern='[A-Z0-9]'>
but id doesn't work - local characters are written by typing.
And what is then the purpose of pattern attribute ?
Any help?
The pattern attribute work for form. It will check when the form is being submitted.
For validation when user typing, you need to make function for onChange event.
Update form #Anarion
onKeyUp/onKeyPress/onKeyDown because in some browsers onChange happens only on focus-out.
I have a table that lists items. I have a form tag that surrounds this table. In this table I have ADD buttons that adds new rows to the database. I have EDIT buttons that edits a row as well. The form posts to the same action on the controller.
Now I need to add a filter row on the first which means I need to add a Filter button to submit the form with the filter parameters. Since this is still inside the main form, I now have the following problem: When I click the Filter button, the inputs that are used for the ADD button are being validated before anything gets posted. How can I prevent the validation from occurring when the user clicks the Filter button?
Make sure the Filter button is of type "button" not "submit" and do filter using ajax
As i see it, the easy way would be to fire the submit via js with:
.submit();
The other way would be to disable validation on that form with this:
$('#form').validate({
onsubmit : false
});
or
$('#form').unbind('submit')
I have one suggestion. Name Add button inputs differently and add row using javascript/ajax. When posting, Add button inputs will not be validated because they have different names
Take a look at this login page, specifically, the form in the section labeled Returning Members. As you can verify by looking at the HTML or by digging with a tool such as Firebug, the actual form contains four tags: one each for the email address and password, an invisible input called "memberAlready" that contains the value "yes", and a submit button in the form an image. So far, perfectly generic.
However, if you inspect the form data at the point at which the form is submitted (using Tamper Data or its equivalent on another browser, you'll see that two additional form fields have been sneaked into the response: ACTION(loginCheckout).x and ACTION(loginCheckout).y.
They both have two-digit integer values, which suggests that they're only there to verify that the submitter is an actual web browser and not a robot. Presumably, they are related somehow to the submit button, which is defined as follows:
<input type="image" name="ACTION(loginCheckout)" value="Login" src="/images/login/login.gif">
What's confusing to me is that these extra form fields appear even when JavaScript is disabled in the browser. So they presumably aren't just something inserted by an event handler somewhere.
Furthermore, if you submit the form programmatically (e.g., by running document.forms[1].submit() in the JavaScript console), the extra fields are not generated and the login attempt fails. That suggests to me that the insertion of the fields depends on something outside the basic HTML form submission mechanism. But what that "thing" could be if it's not JavaScript, I don't know.
Does anyone recognize this pattern or have a theory as to how the validation fields are inserted?
Take a look at the code you posted here:
<input type="image" name="ACTION(loginCheckout)" value="Login" src="/images/login/login.gif">
Notice that this is an image input type which is used to submit the login form. The additional values that appear to be injected on submission are simply the x and y coordinates where the you clicked on the image to submit the form. They are not additional values which are injected by JavaScript on form submission, they are added by the browser itself.
Try clicking on different areas of the images and see the values change.
When you use JavaScript to submit the form, you do not click on the image, which is why the x and y values are not included on form submission.
Replacing the image for an <input type="submit" /> element will remove the x and y coordinates.
Hope that helps.
The X and Y values you are seeing are because the submit button is an an input type=image. They correspond to the X and Y locations within the image where the cursor was when the image was clicked. They're added by the browser itself, as the HTML specification requires it. Section 17.4.1 states that for an image input type
When a pointing device is used to click on the image, the form is submitted and the click coordinates passed to the server. The x value is measured in pixels from the left of the image, and the y value in pixels from the top of the image. The submitted data includes name.x=x-value and name.y=y-value where "name" is the value of the name attribute, and x-value and y-value are the x and y coordinate values, respectively.
You'll note it only mentions the use of a pointing device. If you submit by using the keyboard the values won't be created.
My ASP.NET MVC 3 website has code on the server side that checks for the name of the submit button clicked to submit the form. The code works when I use the mouse to click the button, but when I use the Enter key, the form gets posted, but the request doesn't contain the name of the submit button.
Is there some attribute I can set on the submit button to get this to work for both clicking and using the Enter key?
Here is my HTML:
<div>Search:</div>
<form action="/Item/Search" method="post">
<input class="fulltextsearch" id="FTSearchText" name="FTSearchText" type="text" value="" />
<input type="submit" value="Go" name="FTSearchButton" />
</form>
</div>
On the server side, I have a custom model binder that uses the following code to determine if the user clicked the submit button.
// See if the value provider has the required prefix
var hasPrefix = bindingContext.ValueProvider.ContainsPrefix(bindingContext.ModelName);
var searchPrefix = (hasPrefix) ? bindingContext.ModelName + "." : string.Empty;
var searchButton = GetValue(bindingContext, searchPrefix, "FTSearchButton");
// If this value doesn't have value, the user didn't click the button so exit
if (string.IsNullOrEmpty(searchButton)) {
return null;
}
private static string GetValue(ModelBindingContext context, string prefix, string key) {
var result = context.ValueProvider.GetValue(prefix + key);
return result == null ? null : result.AttemptedValue;
}
Here is the problem I'm having with this. I have a page that displays a list of items. I have a 'search' textbox and a submit button in an HTML form. When the user enters text in the textbox and clicks the search button or uses the enter key, the page posts the form data via HTML GET, and returns the first eight records found. The page then displays page links for additional pages. The problems is that when the user clicks a page link, the form data is all blank, and my filter information is lost (the form isn't posted with the form value when using these links). So, I end up displaying a blank list of items (blank searches returns zero results) instead of paging the data.
By adding the check for the button name in my form data, I could determine whether or not to simply page the data, or do a new look up.
I wouldn't rely on this. There are plenty of documented bugs with this scenario. Just add a hidden field with name='submit'. That way it wouldn't be too hard to recode the backend.
<input type='hidden' name='submit' value='FTSearchButton'/>
So, I researched this last night and almost got somewhere. Then this morning, I really did get somewhere and here's where I ended up.
Apparently the W3C standards for form submission are pretty lax when describing the functionality as it relates to the Enter button and submitting forms. It seems they determined that
When there is only one single-line text input field in a form, the user agent should accept Enter in that field as a request to submit the form.
So that leaves a lot of wiggle room for the browser makers. Today, virtually all browsers support using the Enter key to submit a form, whether the form contains one or more single line text input boxes.
The problem I'm having is more or less unique to Internet Explorer, and only when the form contains one, single-line text input control. For whatever reason, Microsoft decided that when Internet Explorer submits a form like this, it doesn't include the submit button's name/value pair in the post body. However, it does include the button's name/value pair if the user clicks the submit button --or-- uses the Enter key, and the form contains more than one single-line text input control.
So, the only solution I can think of or find suggested is to add a second single-line text input to my form, and then set the the style to
visibility: hidden; display: none;
My form now has two single-line text input controls, so the form will post with the name/value pair in the form body, regardless of whether or not the user used the Enter key or clicked the submit button.
So, we have a workaround that was discovered by ASP.NET developers. It seems the key/value pair is required by ASP.NET web-forms to fire the click event, so this work around isn't something new, albeit not my favorite way to do things.
Basically i want a disable text field to show the value stored in a database but i don't want it to be editable by the user.
i've tried using disabled="disabled" but then it no longer POST to my form handler...
Any suggestions?
thanks
docu:
In this example, the INPUT element is
disabled. Therefore, it cannot receive
user input nor will its value be
submitted with the form.
why do you need the value? then try the readonly-attribute instead of disabled or go for another hiddenfield.
edit:
it's not fully clear to me, if you use asp.net, bu if so, you could just do
<form submitdisabledcontrols="true" runat="server">
you may give it a try :)
If you insist on using a disabled field, you can enable it during form submission by handling the form onsubmit event, where you will enable the field and submit the form.
A second option would be to use a readonly field which you may cleverly make look as disabled via CSS.
A third option would be to use a disabled and a hidden field. Rename your disabled field to something irrelevant and use the original field's name for the hidden one.
Take your pick.