Alert for button submission

JavaScript
9

No that’s fine. Let’s start with a simple example. You will need to run this on a server.

Say you have a basic page with a button:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Ajax example</title>
  </head>
  <body>
    <button>Click Me!</button>

    <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
  </body>
</html>

Let’s attach an event listener to the button, so that when it’s clicked, it sends an Ajax request to a script called submit.php.

$("button").on("click", function(){
  $.ajax({
    url: '/path/to/submit.php',
    type: 'POST',
  })
  .success(function(response) {
    alert("The server says: " + response);
  })
});

Here, we’re specifying that it should be a POST request. We’re also specifying a success callback. This is a function which will be executed if the request completes successfully.

In submit.php place the following:

<?php
  echo "Hello!";
?>

If you run the script, you should see an alert saying “The server says: Hello!”.

Now let’s apply that to your email script. The part with the button is still the same, but you’ll want to add some validation to check that the user has entered something approaching a valid email address and, if valid, you’ll want to send that email address to the PHP script. The PHP script can then attempt add the user to the database and return a success or failure message.

This gives us:

<p>
  <input type="email" id="email_address" placeholder="Email address"  />
  <button id="subscribe">Subscribe</button>
</p>

and:

$("#subscribe").on("click", function(e){
  e.preventDefault();
  var address = $("#email_address").val();
  if (!/\S+@\S+\.\S+/.test(address)){
    alert("Email address not valid!");
  } else {
    subscribeToNewsletter(address);
    $("#email_address").val("")
  }
});

Now, when the button is clicked, the button’s default action is prevented. We then grab whatever the user has entered into the email field, check that it looks like an email address (i.e. that it has something, followed by an at sign, followed by something, followed by a dot, followed by something). If this test passes, we then call the function subscribeToNewsletter(), passing it whatever the user entered. Finally, we reset the value of the email field.

Your markup here will be slightly different, but hopefully this demonstrates the principal.

Next, let’s look at the function that sends the address to the server:

function subscribeToNewsletter(address){
  $.ajax({
    url: 'subscribe.php',
    type: 'POST',
    data: {email: address}
  })
  .success(function(message) {
    alert(message);
  })
  .fail(function() {
    alert("There was a problem. Please try again later.");
  });
}

Finally, submit.php:

New things to note:

  • The way we pass data to the server data: {email: address}
  • The introduction of .fail()
  • message will hold the server’s response, which we will display to the users

Onto the PHP. I’m assuming you have the function to do the inserting all set up.

<?php
  $message = "";
  $email = $_POST['email'];

  if (filter_var($email, FILTER_VALIDATE_EMAIL)) {
    insertIntoDatabase($email);
    $message = "You were subscribed to the list";
  } else {
    $message = "Invalid email address";
  }

  echo $message;
?>

It might also be an idea to check if the insert was successful. I’ll leave that to you.

And that’s it. Let us know how you get on implementing it.

1 Like