stop page from redirecting to php file after form submit

Question

I have a php file that retrieves information entered in an html form and saves it into a mysql db. The problem I am facing is that I cannot figure out how to stop the page from redirecting to insertinfo.php. I want the user to stay on the same index.html page where a modal will appear on form submission. Below is my index.html and insertinfo.php

The index.html file:

<div class="form ">
      <form class="container" action="insertinfo.php"> 
        <input type="text" id="firstname" class="form_input" placeholder="First Name" name="firstname" required>
        <input type="text" id="lastname" class="form_input" placeholder="Last Name" name="lastname" required>
        <input type="text" id="email" class="form_input" placeholder="Email Address" name="email" required>
        <input type="submit" id="myBtn" class="submit" value="Download eBook">
      </form>
</div>

<div id="myModal" class="modal">
    <!-- Modal content -->
    <div class="modal-content">
      <div class="modal-header">
        <div class="icon-box">
          <i class="material-icons">check</i>
        </div>
      </div>
      <div class="modal-body">
        <h4>An email with a download link towards the eBook has been sent to you.</h4>
        <p>Please check your inbox and your spam/bulk messages.</p>
        <a href="">Continue</a>
      </div>
    </div>
  </div>

<script type="text/javascript">
   var modal = document.getElementById("myModal");

   // Get the button that opens the modal
   var btn = document.getElementById("myBtn");


   // When the user clicks the button, open the modal 
   btn.onclick = function(event) {
      var fnameInput = document.getElementById("firstname").value;
      var lnameInput = document.getElementById("lastname").value;
      var emailInput = document.getElementById("email").value;

      if(fnameInput.length == 0 || lnameInput.length == 0 || emailInput.length == 0){
          event.preventDefault();
          alert("You must complete all existing fields");
      } else {
          modal.style.display = "block";
      }
   }
</script>

The insertinfo.php:

if (isset($_POST["submit"])){
    // Escape user inputs for security
    $first_name = $conn->real_escape_string($_REQUEST['firstname']);
    $last_name = $conn->real_escape_string($_REQUEST['lastname']);
    $email = $conn->real_escape_string($_REQUEST['email']);
    $date_added = 'NOW()';


    $sql = "INSERT INTO userinfo (firstname, lastname, email, date_added) "
        . "VALUES ('$first_name', '$last_name', '$email', $date_added )";

    if ($conn->query($sql) === TRUE) {
        echo 'not working';
    } else {
        echo "Error: " . $sql . "<br>" . $conn->error;
    }
}

Answer 1

The action form attribute describes where the <form> is going to be submitted to. If you remove it, the form will submit to the current page.

So deleting this part: action="insertinfo.php" will stop the <form> from redirecting you to insertinfo.php

If you still want to submit your data to insertinfo.php without reloading, use an ajax library or check out: How to use XMLHttpRequest .

Answer 2

If you want your user to be index.html and submit the form to other php file then you will need to use ajax post request to the insertinfo.php. Ajax can post form data and retrieve PHP processed response This is a example how you can submit the form with ajax

$(document).ready(function() {

    // process the form
    $('form').submit(function(event) {

        // get the form data
        // there are many ways to get this data using jQuery (you can use the class or id also)
        var formData = {
            'name'              : $('input[name=name]').val(),
            'email'             : $('input[name=email]').val(),
            'superheroAlias'    : $('input[name=superheroAlias]').val()
        };

        // process the form
        $.ajax({
            type        : 'POST', // define the type of HTTP verb we want to use (POST for our form)
            url         : 'process.php', // the url where we want to POST
            data        : formData, // our data object
            dataType    : 'json', // what type of data do we expect back from the server
                        encode          : true
        })
            // using the done promise callback
            .done(function(data) {

                // log data to the console so we can see
                console.log(data); 

                // here we will handle errors and validation messages
            });

        // stop the form from submitting the normal way and refreshing the page
        event.preventDefault();
    });

});