html form submit using php and ajax

Question

trying to store simple email data from website to mysql database, i've written the code however it is not working and i can't figure it out

 <form class="subfield">
            <input type="text" id="emailInput" name="email" type='email' placeholder="Enter Your Email here" required>
            <input type="submit" id="inputSubmit" value="Subscribe">
            <span id="st">Email Subscribed!</span>

        </form>

<script type="text/javascript">

    $(document).ready(function(){  
  $('#inputSubmit').click(function(){ 
      var email = $('#emailInput').val();
            $.ajax({  
                 url:"form_process.php",  
                 method:"POST",  
                 data:{email:email},  
                 success:function(data){  
                      $("form").trigger("reset");  
                      $('#st').fadeIn().html(data);  
                      setTimeout(function(){  
                           $('#st').fadeOut("Slow");  
                      }, 2000);  
                 } 
            });  

  });  
  });  
  </script>


<?php  


//insert.php  
 $connect = mysqli_connect("localhost", "root", "", "testing");  
 if(isset($_POST["email"]))  
 {  
      $email = mysqli_real_escape_string($connect, $_POST["email"]);   
      $sql = "INSERT INTO `emails_list`(`email`) VALUES ('".$email."')"; 
      if(mysqli_query($connect, $sql))  
      {  
           echo "email Subscribed";  
      }  
 }   
 ?>

when submit button is clicked it redirects to the home page as it should and the url also shows the ?email= part but no data is stored on the database also seems no echo is sent from php

EDIT : i noticed the files are saved as index.php instead of index.html is it necessary to save as index.php

Possible duplicate of [jQuery AJAX submit form](https://stackoverflow.com/questions/1960240/jquery-ajax-submit-form) — Charis, Jul 08 '18 at 08:13
try physically running your query on the database but replace the `$email` with an example email and see if you get what you expect... — Nick Parsons, Jul 08 '18 at 08:18
thank you iv'e tried replacing $email but it still isn't working so it should e an error elsewhere i guess ? — kushagra gupta, Jul 08 '18 at 08:33

score 2 · Answer 1 · answered Jul 08 '18 at 08:28

possibly way to to prevent deafult browser action. Then call ajax request on submit.

$(document).ready(function(){ 
     $('#inputSubmit').click(function(e){ 
          e.preventdefault();
          var email = $('#emailInput').val();       
          $.ajax({
                  url:"form_process.php",    
                  method:"POST",
                  data:{email:email},      
                  success:function(data){
                       $("form").trigger("reset");
                       $('#st').fadeIn().html(data);    
                       setTimeout(function(){
                            $('#st').fadeOut("Slow");
                        }, 2000);
                  }
           });
    });
 });

the submit request is being through as the redirect is there however it's not working after that though iv'e tried adding this but it didn't make a difference — kushagra gupta, Jul 08 '18 at 08:38

score 0 · Answer 2 · answered Jul 08 '18 at 08:37

There are two thing you can do about:

Use a button instead of submit

this:

 <input type="submit" id="inputSubmit" value="Subscribe">

to:

<input type="button" id="inputSubmit" value="Subscribe">

use preventDefault Method

$(document).ready(function() {
  $("#inputSubmit").click(function(e) {
    e.preventDefault();
    var email = $("#emailInput").val();
    $.ajax({
      url: "form_process.php",
      method: "POST",
      data: { email: email },
      success: function(data) {
        $("form").trigger("reset");
        $("#st")
          .fadeIn()
          .html(data);
        setTimeout(function() {
          $("#st").fadeOut("Slow");
        }, 2000);
      }
    });
  });
});

score 0 · Answer 3 · answered Jul 08 '18 at 08:44

$(document).ready(function(){ 
     $('#inputSubmit').click(function(e){ 
          e.preventdefault();
          var email = $('#emailInput').val();       
          $.ajax({
                  url:"form_process.php",    
                  method:"POST",
                  data:{email:email},      
                  success:function(data){
                       $("form").trigger("reset");
                       $('#st').fadeIn().html(data);    
                       setTimeout(function(){
                            $('#st').fadeOut("Slow");
                       }, 2000);
                  }
           });
           return false;
      });
});

html form submit using php and ajax

3 Answers3