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

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
– Nick Parsons, Commented Jul 8, 2018 at 8: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
– kushagra gupta, Commented Jul 8, 2018 at 8:33

Daniel Smith · Accepted Answer · 2018-07-08 08:28:39Z

2

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);
                  }
           });
    });
 });

answered Jul 8, 2018 at 8:28

Daniel Smith

1,7744 gold badges31 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

kushagra gupta Over a year ago

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

Supun Praneeth · Accepted Answer · 2018-07-08 08:37:46Z

0

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);
      }
    });
  });
});

answered Jul 8, 2018 at 8:37

Supun Praneeth

3,1802 gold badges33 silver badges36 bronze badges

Comments

Bert · Accepted Answer · 2018-07-08 08:44:54Z

0

$(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;
      });
});

answered Jul 8, 2018 at 8:44

Bert

101

Collectives™ on Stack Overflow

html form submit using php and ajax

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related