I'm having trouble with events in Internet Explorer 7.
When I have a form with two or more input[type=text] and I press enter, the events occurs in this order:
submit button (onClick)
form (onSubmit)
Sample code:
<form onSubmit="{alert('form::onSubmit'); return false;}">
<input type="text">
<input type="text">
<input type="submit" onClick="{alert('button::onClick');}">
</form>
If I have only one input[type=text] and I press enter the submit button onClick event doesn't fire. Sample code:
<form onSubmit="{alert('form::onSubmit'); return false;}">
<input type="text">
<input type="submit" onClick="{alert('button::onClick');}">
</form>
The button's onclick should (I think) only fire if the button is actually clicked (or when the focus is on it and the user clicks enter), unless you've added logic to change that.
Is the addition of the extra textbox possibly changing the tab order of your elements (perhaps making the button the default control in that case)?
From the dawn of browsers, a single input field in a form would submit on enter with or without a submit button. This was to make it simpler for people to search a site from a single search field.
If you need to execute some javascript in a form, it is safer practice to use the onsubmit of the form (and return false to stop submission) rather than executing script in the onClick of the submit button. If you need to execute javascript from a button, use type="button" instead of type="submit" - hope this clarified what I meant
If you want code to run when the user presses enter, just use the onSubmit handler.
If you want code to run when the user presses the button, and not when the user presses enter, use a button other than type="submit".
Interestingly, if you click on the screen (remove the focus from the textbox) on second example with only one textbox, the event onClick fires... So it's not an expected behaviour since it only occurs when you have just one textbox and you have the focus on the textbox.
I'm afraid you've found a bug on the browser and you'll have to find a workaround, or avoid using the onClick event in that case.
I use the onSubmit event for validations because it's a "safer" event that is more likely to work on different browsers and situations.
Out of curiosity, are you using a DOCTYPE, and if so, which one? I'm not saying incompatabilities with the DOCTYPE are the issue, but quirks mode is something to rule out before trying anything else.
You might want to include a dummy hidden input element to recreate the situation where you had two input elements... that way, you'll get both of the events fired
<FORM onSubmit="{alert('form::onSubmit'); return false;}">
<INPUT TYPE="text">
<input type="hidden" name="dummy">
<INPUT TYPE="submit" onClick="{alert('buttom::onClick');}">
</FORM>
IE has a lot of confusing fixes that needs to be done for improving compatibility of our code
Related
I am writing HTML dialog forms, with data-entry fields, where a "Cancel" button can be clicked to exit the modal dialog. Which one of the "submit", "reset", and "button" <input> types is most appropriate for a cancel button and why?
Research
The MDN page on <dialog> elements provides an example where <button> (without type attributes) is used for both cancel and confirm buttons: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog#Advanced_example
The MDN page on the HTMLDialogElement.showModal() function provides a similar example where <button type="reset"> is used for the cancel button: https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/showModal
I've also read around online, including some answers on this site, where <input type="button"> was used in recommendation examples.
To summarize my understanding:
Omitted type or type="button" buttons do not imply that the button will submit a valid form nor' that the form will explicitly reset your data entries. However they require you to write more JavaScript to close the dialog unlike type="submit". The markup also doesn't indicate that this is one of the ways of closing the dialog form.
Buttons with type="reset" imply that the data entries will be cleared and event.preventDefault() is required to contradict the markup. However, resetting is not ideal (https://ux.stackexchange.com/a/42773), you still need to write JavaScript to close the dialog, and the button's function contradicts the markup due to the form being closed with JavaScript or if you decide to prevent the data reset.
Buttons with type="submit" may imply being alternative means of closing/completing the dialog and the dialog is automatically closed when submit-type buttons are clicked. You only need JavaScript to listen for close events and to check the <dialog>'s returnValue attribute to see if cancelling happened. However, the markup / submit-type may imply that the form will be submitted with valid entries instead of cancelling.
Considering this, if my understanding is valid (?), and any other reasons that I might be oblivious to (concerning what markup is most readable and presents the most elegant use of JavaScript), which approach should be taken for Cancel buttons in dialog forms?
Sample:
<dialog id="forCloseEventListener">
<form method="dialog">
<input type="text" name="data-entry" placeholder="Enter your post code">
<input type="??" value="Cancel">
<input type="submit" value="OK">
</form>
</dialog>
P.S.: I've noticed there's an experimental HTMLDialogElement 'cancel' event, but it's subject to change and its MDN page seems inaccurate or incomplete.
Type type="button" is the best choice. You can write a function and use in the onclick event to exit the modal as you want.
If you use submit or reset you will need to prevent their default behavior, using event.preventDefault().
I have an input tag within a form, when I press enter in the input box. The url will be appended with a question mark.
code:
<form>
<input id="xyz" type="text" value="">
</form>
This is very annoying, so I add some code to prevent the user from doing this behaviour. I change the body tag to:
<body onkeydown="(event.keyCode==13) ? 0 : 1">
Well, this works in another webpage, but not in this case.
What have I missed?
And is this a good solution to prevent user from pressing enter on the keyboard?
Please give some explanation in your answer, thanks.
p.s. I can't use jQuery.
UPDATE: I don't want the user to enter press on their keyboard to submit a form even I define the form action and method.
The default action when you press enter while in an input is to submit the form. Since you don't have any action defined for the form, it doesn't do anything. You also don't have a method defined so I believe it defaults to GET which uses parameters in the URL (like example.com?param1=abc¶m2=123).
If you change <form> to <form method="post">that should stop the question mark from appearing. Though it's still not valid HTML because you don't have an action or a name for your form.
May I ask why you don't want them submitting the form when they press enter?
I created a form to be processed with javascript only (no submit) and found that Google Chrome was erasing all the inputs when I popped up an alert. After some experimenting, I found that Chrome behaves differently depending on whether the javascript alert is called from button element or an input element. In particular, the HTML button causes the text in the input box to be deleted when you click OK. This does not happen in IE. I have not tried it in other browsers. It does not happen with the input element, and it does not happen with the button element if it is outside the form.
Has anyone else noticed this, or know of a reason why it should be so?
<form>
<p>Enter some text in the input box, then click one of the buttons.</p>
<input type="text"><br>
<input type="button" onclick="alert('What happens to form values?')" value="Input button"> <br>
<button onclick="alert('What happens to form values?')">HTML button</button>
</form>
The <button> is submitting the form when clicked.
Submitting the form reloads the page.
To prevent this, add return false to the end of the handler.
based on w3schools http://www.w3schools.com/tags/att_button_type.asp
Always specify the type attribute for the element. Different browsers may use different default types for the element.
in your case you want the type to be button (otherwise some browsers will default to submit)
<button type="button" onclick="alert('What happens to form values?')">HTML button</button>
I have a strange problem where an onclick event on an input image is being fired when i hit enter in input text box
<form id="MyForm" action="/someaction">
<input type="image" src="someimage.jpg" onclick="doStuff();$('#MyForm').submit();" />
<input type="text" name="textInput"/>
</form>
When the cursor is in the text box and i hit enter, rather than the form being submitted it calls the onclick event on the image input.
Any ideas whats going on ?
I believe pressing the 'enter' button counts as a click in many cases, including links. If you want your action to be performed only when the mouse is used, then consider using onmousedown or onmouseup instead of onclick, I'd suggest the latter in your case.
So I had a similar problem and it was only happening in IE. Chrome and firefox were working just fine. When hitting enter from the input box, it would trigger the first input type="image" which we did not want because it would send multiple requests to IE and after hitting enter a few times it would crash.
The quick and easy work around, though not the best solution, we used was to put a dummy input type="image" with an onclick return value of false before the other ones so that the one being triggered wouldn't actually fire off a request. Not the correct root solution but a good temporary one.
The onclick event is fired on input images when you hit enter. I'd wrapping an <img> in an <a>, as since you're separately calling submit(), the input element is made redundant.
I need to have an input box in a div without a form and when the user enters something and hits return, it should run a Javascript function.
There will be no submit button.
How can I do this?
To get an input box without a form, I would suggest just not using a form.
You will have to attach a onkeypress event and check if enter was pressed (and rune the code if it was). Tell us if you are using plain JavaScript or some library if you need examples.
It can be simply done with the help of a form as follow... i think adding form would provide great stability
<form onSubmit='alerttest(this); return false'>
<input type="text">
</form>
<script language="javascript">
function alerttest() {
alert("Executing jolly.exe !!!!");
}
</script>
Don't use the form tag. You can easily use JQuery to tie the code to the input control's key press events.
If you are unfamiliar with JQuery, just tie the code directly to the input field key press event.
To run a function when the user presses enter when focused on the input field, the easiest way would be to have the form tag and run the function using the form's onSubmit event (because pressing return when focused on an input field submits the form).
If you nevertheless don't want to include the form tag, you can use the onKeyPress event to catch the return key pressing and call the function from there.