在 Chrome 中禁用表单上的提交按钮

Question

如何在单击表单后禁用表单上的提交按钮？目标是防止用户点击浏览器的后退按钮并重新提交两次相同的详细信息，以及在 POST 方法比预期慢时快速连续单击两次。我在这里发现了一些在 Safari 中似乎可以正常工作的想法，但在 Chrome 中，我的 onSubmit 表单功能似乎没有触发，因为按钮的标题没有改变并且按钮保持启用状态。我需要一个简单的 JS/php 方法来实现这一点。

<!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 -- 修改表单元素的hidden 属性，或设置form.style.pointerActions = "none"。