Disabling Submit button on form in Chrome

Question

How can I disable the Submit button on a form after its clicked? The goal is prevent users from hitting the browser's back button and resubmitting the same details twice, as well as clicking it twice in quick succession if the POST method is slower than expected. I found some ideas here which seem to work fine in Safari, but in Chrome it looks like my onSubmit form function doesn't fire as the button's caption doesn't change and the button stays enabled. I need a simple JS/php method for achieving this.

 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> </head> <title>Entry Form</title> <body> <h2 align="center">Entry Form - <?php echo date("Y");?></h2> <form id="entryForm" method="post" action="formSubmit.php" onsubmit="return checkForm(this);"> <h3>Entrant Info</h3> <div><input name="fName" type="text" size="80" placeholder="Given name(s)" required> <strong>*</strong></div> <br> <div><input name="lName" type="text" size="80" placeholder="Last name" required> <strong>*</strong></div> <br> <div><input type="tel" name="phone" size="25" pattern="\\d{3}[\\-]\\d{3}[\\-]\\d{4}" placeholder="Phone number (123-456-7890)"></div> <br> <div><input type="email" name="email" size="80" placeholder="Email"></div> <br> <h3>Model Info</h3> <div><input type="text" name="modelName" size="80" placeholder="Title or name of entry" required> <strong>*</strong></div> <br> <div><textarea name="remarks" rows="10" cols="80" placeholder="Remarks"></textarea></div> <br> <select name="category" size="1" required> <!--<option value="0">--Please Select --</option>--> <option disabled selected value> -- Select a category -- </option> <?php // Use mySQL Procedurel // mySQL server connection info $servername = "localhost"; $username = "xxxx"; $password = "yyyy"; $dbname = "zzzz"; // Create connection $conn = mysqli_connect($servername, $username, $password, $dbname); // Check connection if (!$conn) { die("Connection failed: " . mysqli_connect_error()); } $sql = "SELECT ID, Category FROM category WHERE Year = YEAR(CURDATE()) ORDER BY Category"; $result = mysqli_query($conn, $sql); if (mysqli_num_rows($result) > 0) { // output data of each row while($row = $result->fetch_assoc()) { ?> <option value="<?php echo $row['ID']; ?>"><?php echo $row['Category']; ?></option> <?php } } else { echo "No results"; } mysqli_close($conn); ?> </select> <strong>*</strong> <br> <br> <div>SECURED to base? <input id="securedRadioYes" type="radio" name="securedToBase" value="Yes">Yes <input id="securedRadioNo" type="radio" name="securedToBase" value="No" checked>No</div> <div> <h4>Terms and Conditions</h4> I understand that the terms.</div> <br> <br> <div>I accept the Terms and Conditions: <input id="acceptAgrmt" name="acceptAgrmt" type="checkbox" value="" required> <strong>*</strong></div> <br> <br> <div> <input type="submit" name="mysubmit" value="Submit Entry"> <input type="button" value="Reset Form" onclick="resetForm(this.form);"> </div> </form> <script type="text/javascript"> function checkForm(form) // Submit button clicked { // // check form input values // // User has to check Terms and Conditions if(!form.acceptAgrmt.checked) { alert("Please indicate that you accept the Terms and Conditions"); form.acceptAgrmt.focus(); return false; } else { // do other field validations here? form.mysubmit.disabled = true; form.mysubmit.value = "Please wait..."; return true; } } function resetForm(form) // Reset button clicked { form.mysubmit.disabled = false; form.mysubmit.value = "Submit Entry"; // Clear out all user entries form.acceptAgrmt.checked=false; document.getElementById('securedRadioNo').checked = true; form.category.value=""; form.remarks.value=""; form.modelName.value=""; //form.email.value=""; //form.phone.value=""; //form.lName.value=""; //form.fName.value=""; } </script> </body> </html>

Answer 1

解决此问题的一种方法是单击后隐藏或禁用表单上的pointer-actions -修改form元素的hidden属性，或设置form.style.pointerActions = "none" 。

Disabling Submit button on form in Chrome

Question

1 answers

solution1
0 2017-01-23 21:28:05

Disabling Submit button on form in Chrome

Question

1 answers

solution1 0 2017-01-23 21:28:05

solution1
0 2017-01-23 21:28:05