Double-click the Submit button to submit the form.

Question

Double-click the Submit button to submit the form.

Hi guys, I had a problem sending user input from the following code. Information is published only after clicking the "Submit" button twice. Please take a look at my code and tell me if there is anything that I need to change.

Thank you in advance

<script> function validate(form) { fail = validateName(form.name.value) fail += validateEmail(form.email.value) fail += validateCity(form.city.value) if (fail == "") { $(function () { $('#submitbtn').click(function (event) { event.preventDefault(); var form = $(this).closest('form'), action = form.attr('action'); $.post(action, form.serialize(), function (data) { $('#errors').html("You have been successfully subscribed to our newsletter."); }) }); }); } else { document.getElementById('errors').innerHTML = fail; } return false } function validateName(field) { if (field == "") return "No name was entered.<br/>" else if (field.length < 3) return "Please enter a valid name.<br/>" else if (!/[a-zA-Z ]/.test(field)) return "Name can only have alphabetical characters.<br/>" return "" } function validateEmail(field) { if (field == "") return "No email was entered.<br/>" else if (!((field.indexOf(".") > 0) && (field.indexOf("@") > 0)) || /[^ a-zA-Z0-9.@ _-]/.test(field)) return "The email address is invalid.<br/>" return "" } function validateCity(field) { if (field == "") return "No city was entered.<br/>" else if (field.length < 3) return "Please enter a valid city.<br/>" else if (!/[a-zA-Z ]*$/.test(field)) return "City can only have alphabetical characters.<br/>" return "" } </script> </head> <body id="body-results-page"> <div class="modalDialog" id="openModal"> <div> <a class="close" href="#close" title="Close">X</a> <h2>Newsletter Sign-Up</h2> <form action="" name="subscribe1" id="subscribe1" method="POST" autocomplete="off" onSubmit="return validate(this)"> <div id="errors"></div> <input name="name" required pattern="[a-zA-Z ]*$" title="Please enter only alphabetic characters" type="text" id="name" placeholder="Your name"/> <input name="email" required id="email" type="email" title="Please enter your email address" placeholder="Your email address"/> <input name="city" required pattern="[a-zA-Z ]*$" title="Please enter only alphabetic characters" id="city" placeholder="Your city"/> <div id="buttons"> <input type="reset" name="reset" id="resetbtn" class="resetbtn" value="Reset"/> <button type="submit" name="submit" id="submitbtn" class="submitbtn" value="Submit this!">Subscribe Now!</button> <br style="clear:both;"> </div> <input type="hidden" name="MM_insert" value="subscribe1"> </form>

+6

javascript jquery validation button

Javier lopez Nov 11 '13 at 6:45

source share

2 answers

You do not need to bind a submit handler. Since you are doing validation in your validate(form) function.

So instead

 if (fail == "") { $(function () { $('#submitbtn').click(function (event) { event.preventDefault(); var form = $(this).closest('form'), action = form.attr('action'); $.post(action, form.serialize(), function (data) { $('#errors').html("You have been successfully subscribed to our newsletter."); }) }); }); }

Just use

 if (fail == "") { var form = $(this).closest('form'), action = form.attr('action'); $.post(action, form.serialize(), function (data) { $('#errors').html("You have been successfully subscribed to our newsletter."); }) }

0

Satpal Nov 11 '13 at 6:53

source share

Tushar gupta · Accepted Answer · 2013-11-11T06:47:50+0000

Since you call the validate(form) function on the submit and add the submit handler to the button after it, but do not call it.

Decision. The handler for sending a call after joining, click the send button on the button.

 $('#submitbtn').click();

Like this

 if (fail == "") { $(function () { $('#submitbtn').click(function (event) { event.preventDefault(); var form = $(this).closest('form'), action = form.attr('action'); $.post(action, form.serialize(), function (data) { $('#errors').html("You have been successfully subscribed to our newsletter."); }) }).click(); }); }

or

It’s better not to attach a submit handler, just run the AJAX request directly if the condition is true.

like this

 if (fail == "") { action = $(form).attr('action'); $.post(action, $(form).serialize(), function (data) { $('#errors').html("You have been successfully subscribed to our newsletter."); }) }

Double-click the Submit button to submit the form.

More articles: