Question

以下是我的代码示例。概要是这样的：

用户在电子邮件字段中输入电子邮件地址。
用户点击＆＃34;提交＆＃34;按钮。
警报框读取，＆＃34;电子邮件地址已添加到数据库！＆＃34;显示器。
用户点击＆＃34;确定＆＃34;在那个警报框中。
＆＃34;提交＆＃34;按钮更改为＆＃34;已提交！＆＃34;。
用户点击＆＃34;已提交！＆＃34;按钮。
提示框，＆＃34;您已经提交了电子邮件地址！＆＃34;显示器。

最后一步，显示一个不同的警告框，是我遇到麻烦的地方。

＆＃13;

<!DOCTYPE html>
<html>
<head>
   <title>This is the code used to create a field and submit button.</title>
</head> 
<body>

<!--The below code is creating a field and submit button-->
    <label id= "email_field_text" for="email_field"> Input your email to subscribe to funny comics and memes by yours truly</label>
    <input id="email_field" type="email" placeholder="--->  Enter Your Email Here  <---">
    <input type="Submit" Id="emailsubmitbutton" style="background-color: green" value="Submit" onClick= "myfunction()" required="required">



<!--The below code is changing the Submit" button to "Submitted!" once clicked and also showing an alert box.-->
       <script>
            function myfunction() {
	          document.getElementById("emailsubmitbutton").value= "Submitted!";
	     alert("Email address has been added to database!");
}

//Code in this space will display an alert box once a user clicks the "Submittted!" button. The alert box will display the following string: "You have already submitted your email address!".-->
      </script>
    
</body>
</html>

＆＃13;

Answer 1

虽然这不是检查提交的好方法，但我建议使用if来测试按钮的值，如下所示：

<!DOCTYPE html>
<html>

<head>
  <title>This is the code used to create a field and submit button.</title>
</head>

<body>

  <!--The below code is creating a field and submit button-->
  <label id="email_field_text" for="email_field"> Input your email to subscribe to funny comics and memes by yours truly</label>
  <input id="email_field" type="email" placeholder="--->  Enter Your Email Here  <---">
  <input type="Submit" Id="emailsubmitbutton" style="background-color: green" value="Submit" onClick="myfunction()" required="required">



  <!--The below code is changing the Submit" button to "Submitted!" once clicked and also showing an alert box.-->
  <script>
    function myfunction() {
      var submitButton = document.getElementById("emailsubmitbutton");
      if (submitButton.value !== "Submitted!") {
        submitButton.value = "Submitted!";
        alert("Email address has been added to database!");
      } else {
        alert("You have already submitted your email address!");
      }
    }
  </script>

</body>

</html>

Answer 2

Mr Geek is right您应该在用户提交电子邮件后使用if语句运行不同的alert语句。

但是，不是检查DOM节点（页面的HTML元素的表示）来查看程序的状态，而是将状态存储在变量中更为清晰。在您的情况下，您可以存储最初为hasSubmitted的布尔变量false，但在用户提交其电子邮件时设置为true。

<!DOCTYPE html>
<html>

<head>
  <title>This is the code used to create a field and submit button.</title>
</head>

<body>

  <!--The below code is creating a field and submit button-->
  <label id="email_field_text" for="email_field"> Input your email to subscribe to funny comics and memes by yours truly</label>
  <input id="email_field" type="email" placeholder="--->  Enter Your Email Here  <---">
  <input type="Submit" Id="emailsubmitbutton" style="background-color: green" value="Submit" onClick="myfunction()" required="required">


  <!--The below code is changing the Submit" button to "Submitted!" once clicked and also showing an alert box.-->
  <script>
    var hasSubmittedYet = false;
    function myfunction() {
      var submitButton = document.getElementById("emailsubmitbutton");
      if (!hasSubmittedYet) {
        submitButton.value = "Submitted!";
        hasSubmittedYet = true;
        alert("Email address has been added to database!");
      } else {
        alert("You have already submitted your email address!");
      }
    }
  </script>

</body>

</html>

顺便说一句，您可以在提交电子邮件后禁用电子邮件地址input来改善您的界面，以明确在提交电子邮件后无法更改电子邮件：

var emailField = document.getElementById("email_field");
emailField.disabled = true;

这将进入true的第一个分支（if (!hasSubmittedYet) {分支）。

仅在输入按钮的值发生更改后，使用JavaScript和jQuery更改警报框中的字符串

2 个答案: