jQuery Click event not working with Submit button in a form
Question
I have two submit button in a form I want to disable button2 on click (submit) & when user click button1, button2 will enable. Sorry for silly question I am newbie.
$(document).ready(function(){ $(document).on("click", ".test2", function() { if ($('#test2').is(':visible')) { $('#test2').hide(); } else { $('#test2').show(); }; }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <form id="test" method="post"> <input id="test" type="submit" value="button1" class="test1"> <input id="test2" type="submit" value="button2"/> </form>
4 answers
solution1
1 2017-01-18 11:40:14
change
$(document).on("click", ".test2", function() {
to
$(document).on("click", "#test2", function() {
Once Button hidden, it will not visible, since you are using click event on same button which you want to hide, your else is useless in this case.
When you submit form, and came back to this form/page again, button will be visible to you.
I'm not clear what you are trying to do:
If you don't want to submit the form, and want to perform some more operation the you nedd to use:
e.preventDefault(); as suggested by @Nitheesh and make it display:none or disabled
solution2
0 ACCPTED 2017-01-18 11:41:33
Clicke event is bidden on class change it to id
$(document).on("click", "#test2", function()
Here is a sample code.
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function () { $(document).on("click", "#test2", function (e) { if ($('#test2').is(':visible')) { $('#test2').hide(); e.preventDefault(); } else { $('#test2').show(); e.preventDefault(); }; }); }); </script> </head> <body> <form id="test" method="post"> <input id="test" type="submit" value="button1" class="test1"> <input id="test2" type="submit" value="button2" /> </form> </body> </html>
solution3
0 2017-01-18 11:48:58
How about this? Add disabled to #test2 and remove it when #test is clicked.
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function () { $("#test").on("click", function () { $("#test2").prop("disabled",false); }); }); </script> </head> <body> <form id="test" method="post"> <input id="test" type="button" value="button1" class="test1"> <input id="test2" type="button" value="button2" disabled /> </form> </body> </html>
solution4
0 2017-01-18 12:10:24
I would change the js & html a bit.
Why? Cause if you want to disable the button2 on submit and enable it when the button1 is clicked, it's best to not put two submits in the form . We put one submit button , to trigger the form submit, and an <a> tag to enable the button2 (the <a> tag won't trigger the submit event again).
<form id="test" method="post">
<a id="test1" href="#" class="btn btn-primary">button1</a>
<button id="test2" type="submit" class="btn btn-primary">button2</button>
</form>
And in the jQuery we do something like this inside your $(document).ready() function:
$('#test').on('submit', formSubmit);
$('#test1').on('click', unableButton);
function formSubmit () {
$('#test2').prop('disabled', true);
// Here you put the rules to submit your form
}
function unableButton (e) {
e.preventDefault();
$('#test2').prop('disabled', false);
}
If you want i made this fiddle so you can see the code in action: https://jsfiddle.net/dobbinx3/Lu2ns80b/1/
Cya.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.