Enter to reliably submit html form - javascript

I have a form with text input + gradient-shaded button with onclick='this.form.submit()' (plus some hidden inputs).
In all browsers, clicking on the button works.
In Firefox, if I click Enter while in text input, it submits the form.
In IE, it does nothing.
How can I make it work with IE?

If I remember correctly IE likes having an actual submit button, whether that's an <input type="submit" /> or <button type="submit">submit me</button>. Maybe you can put that in there but "out of sight" so you don't see it..

Create an empty text box, with a style of "visibility:hidden;display:none", this is a known issue

This type of form will always work with "Enter":
<form ...>
...
<input type="submit" ...>
</form>
Make sure you have an input of type submit.

Related

Form Button Submit IE Issue

I have a form that is submitted by a button like this:
<input type="submit" form="billing-form" value="xyz" name="abc">
That submits a form like this:
<form method="POST" id="billing-form" action="something.php">
//bunch of fields here
</form>
The button submits the form fine in most browsers except IE.
Any ideas how to make this work in IE?! The button unfortunately has to be outside of the form itself which is why I'm using the billing-form name to reference.
Thanks,
NCoder
Well if using simple script is not a problem then you can simply use an input button and submit the from using js
<input type="button" form="billing-form" value="xyz" name="abc" onclick="submitForm();">
function submitForm()
{
document.getElementById('billing-form').submit();
}
Not going to work with the submit button outside the form without using javascript. See This question and answer.

Input field with onchange fails to trigger when user click button in another form

I have a page with multiple small forms on it. Each form has one input field that has an onchange function which will submit it's form to a url that returns a no data status.
Things work fine, submitting form after form, until the user clicks on a small form that has ONLY a submit button in it. This click works, but abandons the change in the previous field resulting in its onchange not firing the click at the bottom of the changed function fails (still trying to understand the firebug trace).
What's going on? is there a fix for my structure?
UPDATE:
First I tried simply delaying the action of the submit, but no luck.
I have hidden the and added an <input button> to the chain of "events" so that the focus has a place to come to rest before the real submit tries to happen -- the code below has been updated. So the question now becomes:
Is this as simple as it can be?
Script:
$(function() {
$('input,select').change(changed);
});
function changed(){
...
$(this).parents('form').find(':submit').click();
}
function doSubmit(elt, id)
{
$(elt).focus();
setTimeout(function(){
$(id).click();
}, 400);
}
One of may small forms:
<form class="clean" method="POST" action="QuoteProApp.php">
<input type="submit" value="field" name="btn_update" style="display: none;">
<input type="hidden" value="000242" name="quote_id">
<input type="text" maxlength="15" size="3" value="" name="q[cost][4][1][unit]">
</form>
The offending click goes into this form:
<form class="clean" method="POST" action="QuoteProApp.php">
<input type="hidden" value="000242" name="quote_id">
<input type='button' name='btn_close' value='Close' onclick='doSubmit(this,"#CLOSE");'>
<input id='CLOSE' type='submit' name='btn_close' value='Close' style='display:none;'>
</form>
Might be totally irrelevant, but your selector for the change event includes your submit input too. Can you change it to:
$('input[type="text"],select').change(changed);
to see if anything changes?
The solution turned out to be to create a button tag, set the focus explicitly to a it, and then set a timeout to click the real, but hidden, submit input tag. This allows the change in focus to run the submit associated with it and then continue with the explicit submit of the page.
The question has been updated to show this solution.

Submit Form with Enter Key [duplicate]

I have set up a bootstrap modal with a form inside it, I just noticed that when I press the Enter key, the modal gets dismissed.
Is there a way not to dismiss it when pressing Enter?
I tried activating the modal with keyboard:false, but that only prevents dismissal with the ESC key.
I just had this problem too.
My problem was that i had a close button in my modal
<button class="close" data-dismiss="modal">×</button>
Pressing enter in the input field caused this button to be fired. I changed it to an anchor instead and it works as expected now (enter submits the form and does not close the modal).
<a class="close" data-dismiss="modal">×</a>
Without seeing your source, I can't confirm that your cause is the same though.
Just add the type="button" attribute to the button element, some browsers interpret the type as submit by default.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Attributes
This applies for all the buttons you have in the modal.
<button type="button" class="close" data-dismiss="modal">×</button>
I had this problem even after removing ALL buttons from my Bootstrap Modal, so none of the solutions here helped me.
I found that a form with a single text field would cause the browser to do a form submit (and result in dismiss), if you hit Enter while keyboard focus is on the text field. This seems to be more of a browser/form issue than anything with Bootstrap.
My solution was to set the form's onsubmit attribute to onsubmit="return false"
This may be a problem if you are actually using the submit event, but I'm using JS frameworks that generate AJAX requests rather than doing a browser submit, so I prefer disabling submit entirely. (It also means I don't have to manually tweak every form element that might trigger a submit).
More info here: Bootstrap modal dialogs with a single text input field always dismiss on Enter key
I had same problem, and i solved it with
<form onsubmit="return false;">
but there is one more solution, you can add dummy invisible input, so your form would look like this:
<form role="form" method="post" action="submitform.php">
<input type="text" id="name" name="name" >
<input type="text" style="display: none;">
</form>
You can put the login button before the cancel button and this would solve the issue you are having as well.
<div class="modal-footer">
<button type="submit" class="btn primary">Login</button>
<button type="submit" class="btn" data-dismiss="modal">Cancel</button>
</div>
I had a similar experience just now and the way I solved it was instead of using a tag, I changed the tag to an tag with type="button". This seemed to solve the problem of pressing the "enter" key and dismissing the bootstrap modal.
I had this problem too and I solved it this way. I added onsubmit to form. I also wanted to be able to use enter key as a saving key so I added save_stuff() javascript to onsubmit. return false; is used to prevent the form submit.
<form onsubmit="save_stuff(); return false;">
...
</form>
<script>
function save_stuff(){
//Saving stuff
}
</script>

Using input type="submit" to change content

Okay, I'm pretty sure I'm missing something very obvious here, but I just couldn't find a proper solution so far. What I'm trying to do is simple: Have a user write something into a form, have him submit the form, and write that input into a textarea on the same page.
This is my code:
<html><head></head>
<body>
<form name='registration'>
<label for="input">Input:</label>
<input type="text" id="input"/>
<input type="submit" id="submit" value="Submit" onclick="execute()"/>
</form>
<div id="results">
<span>Result</span>
<span><textarea cols="30" rows="5" id="resulttext" readonly="readonly"></textarea> </span>
</div>
<script>
function execute()
{
var result = document.getElementById("input").value
document.getElementById("resulttext").value=result;
}
</script>
</body>
</html>
Now what happens if I enter something into the form is that the textarea briefly shows my input before reverting back to showing nothing. My guess is that the textarea field is only changed for the duration of the execute() function.
When I change input type="submit" to a <button> everything works as intended, but I'm pretty sure I'm not supposed to do that.
You need to cancel the default event for the submit button, otherwise it just submits the form (which in this case essentially reloads the page since there are no form elements with names). Add return false;after execute() (put a ; in between the two pieces)
Because your button is of type submit, it will submit your form after executing the execute() method. You can change the button type to type="button" and you will not have this submit behavior.
http://jsfiddle.net/PCCbh/
Note - using <button> is okay in this case. It is essentially the same as <input type="button".

How to prevent form submit from triggering `button:first.onclick()`?

Every time I submit a form by pressing enter, the click() function on the first <button> in the associated form is getting triggered. The problem (other than the fact that I just find this behavior odd) is that it is literally a click event, indistinguishable from actually clicking on the button. If it triggered the even on my submit button, I'd be fine with it.
The issue is that in this case the first button has nothing to do with the actual form, it's actually in a hidden popup.
So the exact question: Why is this happening? How do I prevent it? How do I distinguish this "fake click" event from a real one?
(this is a very simplified example; actual code is using jQuery (in case jQuery happens to acknowledge this and there is a fix for it), but the actual issue has nothing to do with jQuery)
<form>
<input>
<button onclick="alert('button A click');">Button A</button>
<button onclick="alert('button B click');">Button B</button>
<input type="submit" value="Submit Button">
</form>
http://jsfiddle.net/NexHC/2/
Please, no suggestions to "move the button"
-snip-
Edit
<form>
<input>
<button type="button" onclick="alert('button A click');">Button A</button>
<button type="button" onclick="alert('button A click');">Button B</button>
<input type="submit" onclick="alert('button Submit click');" value="Submit Button">
</form>
Actually I take it back... the reason is a lot more concrete and simple than that. Submit is the default type for <button> as specified by the w3c. Therefore, by leaving the button type attributes blank on your form, you were making three submit buttons and it was picking the first when you hit enter (love the <kbd> styling on this site :P). See here for w3c info and here for the updated fiddle
My advice would be, if the <button> has nothing to do with the form and is also controlling a hidden popup, then take it out of the context of the <form> and place it elsewhere. This would also solve your click issue.

Categories

Resources