0
フォームの[送信]ボタンをクリックした後で無効にするにはどうすればよいですか？目標は、ユーザーがブラウザの戻るボタンを押して同じ詳細を2回再送信したり、POSTメソッドが予想よりも遅い場合に2回連続してクリックしたりすることを防ぐことです。私はSafariでうまくいくようなアイデアを見つけましたが、Chromeでは、ボタンのキャプションが変更されず、ボタンが有効なままになっているため、私のonSubmitフォーム関数が起動しないように見えます。私はこれを達成するための簡単なJS/phpメソッドが必要です。フォーム要素のhidden属性を変更、またはform.style.pointerActions = "none"を設定する - あなたはこれを扱うことができChromeのフォームに送信ボタンを無効にする
<!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);">
\t <h3>Entrant Info</h3>
\t <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>
\t <br>
<div><input type="email" name="email" size="80" placeholder="Email"></div>
<br>
\t <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>-->
\t <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()) { ?>
\t \t <option value="<?php echo $row['ID']; ?>"><?php echo $row['Category']; ?></option>
<?php
}
}
else {
echo "No results";
}
\t 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
//
\t // User has to check Terms and Conditions
if(!form.acceptAgrmt.checked) {
\t \t alert("Please indicate that you accept the Terms and Conditions");
\t \t form.acceptAgrmt.focus();
\t \t return false;
}
\t else {
\t \t // do other field validations here?
\t \t form.mysubmit.disabled = true;
\t \t form.mysubmit.value = "Please wait...";
\t \t return true;
\t }
}
function resetForm(form) // Reset button clicked
{
form.mysubmit.disabled = false;
form.mysubmit.value = "Submit Entry";
\t
\t // Clear out all user entries
\t form.acceptAgrmt.checked=false;
\t document.getElementById('securedRadioNo').checked = true;
\t form.category.value="";
\t form.remarks.value="";
\t form.modelName.value="";
\t //form.email.value="";
\t //form.phone.value="";
\t //form.lName.value="";
\t //form.fName.value="";
\t
}
</script>
</body>
</html>
IE11でも動作しません – RossW