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>
Related
I'm using Parsley to validate forms. I'm using 2.8 wbich is a more current version. When any button on my form is clicked (even it's not submit), Parsley will trigger a submit. For example I have this button which clears an uploaded photo.
<button id='attached-clear' onclick="App.clearPhoto('#attached')")
Clear
</button>
This will trigger a "submit" when Parsley is enabled. So when the user tries to clear the form it is submitted instead. I tried various options on the form of:
<form ... data-parsley-excluded='input[type=button]' ..>
And:
<button data-parsley-excluded="" ...>
But it always submits. If I disable parsley then I don't have a problem.
You need to add button type= 'button', submit is default value for type MDN ref
<form>
<button type='button' onclick="console.log('hello')">Clear</button>
</form>
I have a form, which has a button within it that runs a JS function when pressed. When filling out the form, if I press 'enter' it runs that function, instead of submitting the form. How can I prevent this?
e.g.
<form>
<input name="input1">
<section>
<input name="input2">
<button onclick="return deleteThisSection()">Delete</button>
</section>
<input type="submit">
</form>
So in the above example, if the cursor is in the "input1" or "input2" box, and I press enter, the "deleteThisSection" function is run, instead of the form being submitted.
Declare this button as a type of button. By default a button in a from is declared as
type="submit"
.
<button type="button" onclick="return deleteThisSection()">Delete</button>
You can add your function to submit form event:
$('form').submit(function (e) {
e.preventDefault();
deleteThisSection(); //Add your code or call function here
return false;
});
I'm trying to figure out (on the client side) how to use javascript to submit a specific submit button for a form with multiple submit buttons.
Currently,
document.forms[0].submit()
does not seem to be working because it submits the first submit button instead of the second one, which is what I want to be submitted.
Is there a way to submit only the second submit button?
Here is an example of the buttons:
<input type="submit" class="submitButton_1" id="cancelButton" value="Cancel"
title="Cancel" name="cancel"/>
<input type="submit" class="submitButton_2 " id="Button" value="Test"
title="Test" name="TestButton"/>
document.getElementById('whatever-id-here').click();
will "click" on the button with ID whatever-id-here
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>
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.