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>
Related
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>
I have a problem on html button tag
This my html code
<form name="data_kirim" action="confirm_order.php" method="POST">
..... order input field ....
<button class="back_button" onclick="window.location.href='keranjang.php'">Back</button>
<input class="next_button" type="submit" name="submit_data_kirim" value="Next"/>
</form>
How to prevent button to submit this form, because button is using the href to back page,
Can someone help me?
change
type='submit'
to
type='button'
<button class="back_button" onclick="window.location.href='keranjang.php'">Back</button>
<form name="data_kirim" action="confirm_order.php" method="POST">
<input class="next_button" type="submit" name="submit_data_kirim" value="Next"/>
</form>
A quick solution would be to move the back button outside the form since It's not using the form inputs anyway.
you can call a function in javascript when click your button, redirect to your link and return false or use preventDefault() function with jquery
<form onsubmit="return false;">
If you want to just make it link to another page and not submit the form then simply make it a normal button like so :
Next
This will not submit the form though.
I am using <button> instead of <input> because I need to contain an image in the buttons. This makes the form submit behavior different. How do I check which button the user clicked? There is no post data returned.
Example:
<button onclick="this.form.submit()" value="Done" name="Done"><img src='...'></button>
<button onclick="this.form.submit()" value="Save" name="DSave"><img src='...'></button>
Get rid of the onclick attributes. Let the button's natural submit feature submit the form instead of using JS. This will make the clicked button a successful control and it's name/value will appear in the submitted data.
Use a hidden input to carry the value, if POST isn't working
you can also use <submit> and that field name will be sent with the value Done or Save...
Use <input type="submit"> and just style them with css. In this way you can assign values to input.
I am building a PhoneGap application using JavaScript, HTML and jQuery Mobile.
All the HTML is in the same file, separated into <div data-role="page"> as pages.
Several pages have a form including one or more text/selection input and a submit button.
The submit is not a traditional form submit button but a button which using onClick runs a JavaScript function which can do many things.
I want the form to have this features:
When pressing the button and after running the function, clear the form.
In some cases the function should change the page.
The enter button on one of the inputs should submit the form (Activate the function).
Should I use the form HTML tag? If so what should I use for action? How to clear the form?
etc.
If you are trying to bind onClick to an input type="submit" then you're gonna have a bad time.
Unfortunately even if you return false or e.preventDefault when clicking that button, the form still sends the submit trigger so once your onClick code is finished then it will submit.
Example:
<form action="woot.php" method="POST">
<input type="submit" value="submit" onClick="alert('You clicked me! How could you?! It's cool the form will still go to woot.php. return FALSE wont help you either.'); return FALSE;">
</form>
What you probably want to do:
<form action="woot.php" method="POST">
<input type="submit" value="Submit" onSubmit="alert('You aint goin nowhere!'); return FALSE;">
</form>
What you should do:
<form action="woot.php" method="POST">
<input type="button" value="Button" onClick="alert('Away with you!'); window.location = 'http://www.google.com/';">
<input type="button" value="Button" onClick="someCoolFunction();">
</form>
I wouldn't use type="button", especially if you want to have the best chance of the form submitting when the user presses enter.
Use your regular form <input type="submit"> and then your JavaScript:
$('form').submit(function(e) {
// all your form handling here;
if (your_form_was_validated_and_handled) {
$('input[type!="submit"]').val('');
}
e.preventDefault();
});
Generic fiddle: http://jsfiddle.net/
You can still use the form tag, as it's useful for markup.
Just make sure that your buttons have attribute
type="button"
otherwise the button will submit the form by default.
To reset the form:
function resetForm() {
$('#form').each(function(){
this.reset();
});
}
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.