I'm debugging a weird problem with two simlar search forms - when user types some search criteria in a text box and hits enter, one form returns results and another just reloads. And it happens only in IE - FF treats both forms as expected. I suspect that hitting enter is triggering onclick for one of the search buttons in one case and something else in another.
How do I find what form element caused submit event?
Thanks,
Andrey
Sounds like the single textbox form bug in IE.
To get around it, you can use Javascript to handle the enter key press, or just insert a blank hidden textbox. Lame, I know.
I suspect that hitting enter is triggering onclick for one of the search buttons in one case and something else in another.
Yes. Browsers may, largely at their whim, treat enter as clicking on a submit-button, just submitting a form, or nothing. Put general form submission stuff in form.onsubmit, rather than an onclick on the first submit button.
You could sprinkle your form elements with onclick events to set a hidden form variable with a different value per element, then sniff the results either with a DOM inspector or through something like Fiddler.
There may be a way to simply have a form onsubmit() event that you can extract the triggering element from the event object, but I'd have to dive into the docs to see if this is possible... if I get chance I'll do some looking.
I think I may help you much If you provide your two forms code. However, check to see for the following submit button code:
<input type="submit" value="Submit">
When you use this, then when you press Enter among the corresponding form, the form will be submitted. If you wish to check something before submitting you can use JavaScript Function like the following:
<input type="button" onclick="javascript_function_name();" value="Submit">
Thanks. If this can not help you, please express the situation more briefly.
Related
This may be an iterative question and answer process because I'm not sure which code to paste. I have a custom, advanced search form (which uses ng-submit) that passes a query object into a controller method and calls a service. When the user has entered some input into one or more fields, pressing the submit button (which uses ng-click) successfully calls the methods and submits the query. However, if the user presses enter to submit the form, those same methods are called, but the query object is missing the bound values of the input fields. I've stepped through with breakpoints and have verified that all of the above is what's happening, but am unsure where the problem lies. Is there a difference in Angular's data binding process between ng-click and pressing the enter key? Do I need to call prevent default somewhere? Let me know what code I need to add to this post to help with troubleshooting. Thanks!
For anyone who may encounter this problem in the future, it turns out that the problem was that the enter key was firing both the Clear and Submit buttons, as the default behavior for a button is submit. It just happened to be firing the Clear button first, otherwise we never would have noticed the problem. The solution was simply to add "type=button" to the clear button.
Problem:
I never specify a submit button, as I use ajax to submit my forms, but some forms have an auto-submit feature regardless.
Background:
Throughout my application I have instances when clicking the enter button will auto-submit a form and other instances where it will do nothing. For example; there are times where I will need to capture the "enter" button to get an auto-submit but other times where it seems to just happen on it's own and I have not found the pattern. Except that the dynamically created forms seem to have the auto-submit feature but static ones do not? Does anyone else have a similar issue.
Example:
All of my forms have the submit button removed and I specify no target or action elements as seen below. All of the forms have their data transmitted through AJAX.
<form id="ajaxForm">
<input>
</form>
<button>ButtonOutSideForm</button>
Not looking for a way to prevent auto-submit
I already know about "onsubmit = return false" and e.preventDefault. I'm not looking for a way to disable auto-submit. My question is why does it's presence seem arbitrary. Thanks.
As LouD pointed out. Some browsers will auto-submit if the form only contains one input element.Why does forms with single input field submit upon pressing enter key in input
Inside a form I have a button. What is the difference between when I submit the form via JavaScript like this
<button onclick="document.forms[0].submit();">
and when I submit it like this
<button type="submit"></button>?
The first one works for me with most browsers except webkit-based. The latter works fine as well. No difference in functionality is apparent to me. Is there one?
The first example:
<button onclick="document.forms[0].submit();">
...will do two things:
Its onclick will submit the first form in the document (i.e., the one specified by the 0 index in forms[0]).
It will submit the form it is in (if it is in a form) because a button with no type attribute specified will be a submit button by default.
This two-step double-submit behaviour can be seen in this quick-and-dirty demo: http://jsfiddle.net/fMwuX/ (and is likely to lead to weird behaviour that might be a bit confusing to debug). If the button isn't actually in a form then this won't be a problem.
The second example:
<button type="submit"></button>
Will simply submit the form it is in (if it is in one).
In my opinion the second option is definitely preferable for several reasons, including but not limited to:
It will work even if the user has JS disabled.
It doesn't hard-code a form index with forms[0].
It is shorter and clearer.
It won't clash with other form submit validation.
The javascript example will submit the first form in your HTML document while the second example will submit the form which wraps that button.
documents.forms[0].submit will trigger the submission of the first form in your HTML page. Indeed, documents.forms contains all the forms of your document. You can access them with their name attribute or their index.
Then, the input of type submit in a form will trigger the submission of his parent form.
As you've discovered, the first one makes the page not work in some circumstances, and is - for this, and other reasons - generally considered bad practice. Use the second.
I'm trying to figure out something having to do with the behavior descibed by this old question from last year. I've got a form with a single input text field, and a single "submit" button. Unlike the person who asked that question, I want the form to submit when the user hits "enter". Indeed, that's working for me; what's not working however is the quirk that causes a "submit" input in the form to be virtually clicked: Firefox and Chrome include the "submit" input's name in the parameters posted, while IE does not. In other words, I want this quirky submit behavior to post the text input field, and the submit input too.
The funny thing is that my form was doing just that up until some mystery change I introduced recently. (Firefox and Chrome do still work, but IE once worked and now doesn't.) I can probably figure out what I changed to break it, but as #bobince seemed to understand something about this quirk I figured I'd ask to see if there are known (possibly even documented) ways to control it.
Here's my test page: http://gutfullofbeer.net/post.html
It's about as simple a test as I could make up:
<!DOCTYPE html>
<html>
<body>
<form name='foo' action='cgi/echoparams.cgi' method='post'>
<input type='text' name='name' value=''>
<input type='submit' name='submit_button' value='Submit'>
</form>
</body>
</html>
The cgi script just parrots back the posted content.
Yeah, sorry, it's not directly fixable. I don't know what your previous ‘working’ case was, but I suspect there might have been an extra input present. (It's only when there's a single text input that the exceptional behaviour occurs.)
With the historical mines around the question of whether a default-submit button is ‘successful’, it's better never to rely on it. Add the hidden input to signify a submission and omit the name on the submit button. Put any submission scripting on form onsubmit rather than the default button.
If you have additional submit buttons for different actions (eg. Edit vs Delete), then make the first button perform the ‘default’ action and set no name, then add name/values that override the default behaviour on the other buttons. These are sure to be ‘successful’ (and will receive a click event) if clicked.
I just stumbled upon this strange behaviour. I had one case in which the value of the name attribute and the value from a button were submitted, and a different case, where the name and value attributes of the button Tag where missing in my POST Data.
(I used the <button ...>-tag, but it seems that this doesn't matter.)
After fiddling around quite a while, i finally got the solution, so i registered to let you guys know.
IE7 & IE8 start submitting the name & value of a present button-tag, the just in case of a second <input type="text">-tag. If there is only one <input type="text"> present in the page and you hit enter within this input-field the name & value of the button are missing.
Radiobuttons, checkboxes, hidden inputs... don't matter, you need a second <input type="text"> to fix this.
I'm using the document.form.submit() function for a rather large input form (hundreds of fields, it's an inventory application). I'm calling this after the user has been idle for a certain amount of time and I would like to save any data they've typed. When I try this the page reloads (the action is #) but any new text typed in the fields is not passed in the REQUEST, so I don't get to put it in the DB. Is there some fundamental reason why this happens or is my code just not playing nice together (I'm using the EXTJS grid view to show the form and a library for tracking idle time)?
Thanks,
Robert
I guess I put the answer here. What I found was that doing this:
setTimeout('frm.submit();', 2000);
caused the page to reload but didn't submit the form. When I did this:
frm.submit();
The form was submitted and the data was passed. I don't know why the first way didn't work, but I don't need to know that:)
Might the server be voiding out the input values. Say if your page on the server looks like this:
<form action="/page.cgi">
...
<input name="Fieldx" value=""/>
</form>
I think it'll void out the field. Or this the server action might be setting it indirectly. In JSF, something like this.
<input name="Fieldx" value="#{bean.nullProperty}"/>
What do you have on the server and what's your browser?
I would try to catch the HTML post request to see if the input fields are included. If they are then your server has problem.
But regarding what you said, I think it's because there's conflict in the way your browser handles JavaScript DOM. This may be the case if you leave out the submit button on your form and it works.
The submit method of HTMLFormElement objects should just submit the form, as if the user had clicked the submit button. So, if the action attribute of the form is set to #, it would just seem to refresh the page, because it’s sending the form data to the same page.
Strange that it still does it when you set the action attribute to another page though.
Is the method attribute of the form set to get or post?