CODEWITHSUNDEEP
javascriptjquery
Blu
Blu

Reputation: 19

Change the string in an alert box only after an input button’s value has changed, using JavaScript and jQuery

Here is a sample of my code. The synopsis is this:

  1. User enters email address into email field.
  2. User clicks "Submit" button.
  3. An alert box reading, "Email address has been added to database!" displays.
  4. User clicks "OK" in that alert box.
  5. The "Submit" button changes to "Submitted!".
  6. User clicks "Submitted!" button.
  7. An alert box reading, "You have already submitted your email address!" displays.

The last step, showing a different alert box, is where I am having trouble.

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

Upvotes: 0

Views: 606

Answers (2)

Rory O&#39;Kane
Rory O&#39;Kane

Reputation: 30428

Mr Geek is right that you should use an if statement to run a different alert statement after the user has already submitted an email.

However, rather than checking DOM nodes (the representation of your page’s HTML elements) to see the state of your program, it is cleaner to store state in variables. In your case, you can store a boolean variable hasSubmitted that is false at first but gets set to true when the user submits their email.

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

By the way, you could improve your interface by disabling the email address input after submitting the email, to make it clear that you can’t change the email after it was submitted:

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

That would go in the first branch (true branch) of if (!hasSubmittedYet) {.

Upvotes: 2

Djaouad
Djaouad

Reputation: 22794

Although this isn't a great way to check for submission, I would suggest using an if to test for the value of the button, like this:

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

Upvotes: 2

Related Questions