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

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.

Related

Making a button that’s send you to another page

Hi i am trying to make a button that’s works like a link. I hope it makes sense, can you help?
<button type="submit" value="Login" id="next" class="login-form-submit next" href="lessonB.html">Next</button>
I am thinking you have a form you are submitting with this button. It's not the right solution in your case to add a element inside the button. Here an example of how I would do it:
<form action="https://redirect_link_here.com/foo.html" method="GET">
<input name="name">
<input name="lastname">
<button type="submit">Button name</button>
</form>
When you press the button the user input gets sent to the link you specified in action in the URL. So if the user inputs is "Andreas" and "Köhler" for instance you would be redirected to this URL on submit: https://redirect_link_here.com/foo.html?name=Andreas&lastname=Koehler. Then you can read the data out of the URL in the code of foo.html and your submit button is not messed up.

ajaxForm plugin submits on any <button> clicked

Take a look at this
http://jsbin.com/goyokir/edit?html,output
$(document).ready(function() {
$('#myForm').ajaxForm(function() {
alert("Form was submitted");
});
$('button').click(function(e){
e.preventDefault(); //if removed, it acts as submit button
$('body').append('regular clicked!<br>');
});
});
My problem is that my form has some <button>'s in it and when clicked they act as submit buttons for some strange reason. I can use preventDefault to fix that but the other problem is that when your focus on an input and press enter it triggers the first <button> it finds, not the <input type='submit'>
I tried to look at the plugin's source and fix it but it's beyond me. captureSubmittingElement seems to be just fine to me.
Any ideas?
You should use
<button type="button"></button>.
Demo'd here: http://jsbin.com/xabuzukehe/1/edit?html,output
Every button inside a form acts as a submit button by default
Use type="button" to prevent a button from acting as a form submission button.
<button type="button">Regular <Button> 1</button><br>
<button type="button">Regular <Button> 2</button><br>
<input type="submit" value="Input Submit button" />
Change your button to type button,the default is type submit
<button type="button">Regular <Button> 1</button>

<button> inside a form

at the end of my web <form> there are two buttons - one is <input type="submit"> and another is just <button>. the problem is that if I click <button>, it submits all the form. I wanted to assign some javascript function to that button instead of submitting, but since it auto-submits I can't do anything. How can I fix this?
Explain button type as button because by default it is submit
<button type=button>Submit</button>
Make the type as button and you can add onclick event to call javascript function.
<button type="button" onclick='alert(1);'></button>
The onclick must return false to denote it will not Submit, true will denote , it will Submit the form.
<button name="button1" onclick="button1_clicked();return false;">Click Me</button>

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>

Enter to reliably submit html form

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.

Categories

Resources