Question

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

＆＃13;

<!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>

＆＃13;

Answer 1

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

在Chrome中停用表单上的“提交”按钮

1 个答案: