Alert Message on Success not working on AJAX

Question

Hi i am beginner in AJAX and facing a problem in following code which does not pop up the alert message.
I was tried to insert data from form to database using AJAX.
This code successfully store the data into database.
But it not pop up the alert message which is major issue.

 **//index.php** // following is ajax code in which problem occur. i think. $(document).ready(function(){ $('#submit').click(function(){ $.ajax({ url:"store.php", method:"POST", data:$('#add_name').serialize(), success:function(data) { alert(data); $('#add_name')[0].reset(); } }); }); }); **//store.php** // following is the data base releted query $conn = mysqli_connect("localhost", "root", "", "prag"); $chapter_name = $_POST["chapter_name"]; $class = $_POST["class"]; $subjects = $_POST["subjects"]; $sql = "INSERT INTO chapter(class_id,subject_id,name) VALUES('$class','$subjects','$chapter_name')"; mysqli_query($conn, $sql); echo "Data Inserted"; </pre>

 //HTML CODE //Following are the input fields through which data will store. <input type="text" name="chapter_name" placeholder="Enter the Chapter name" class="form-control name_list" /> <select name="class" id="class" class="form-control"> <option>Select Class</option> </select> <select name="subjects" id="subjects" class="form-control"> </select> <button type="submit" name="add_chapter" id="submit">Add </button> <pre>

Answer 1

Use below code:

 <!DOCTYPE html>
 <html>
 <head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script type="text/javascript">
              $(document).ready(function(){  
      $('#submit').click(function(e){  
                      e.preventDefault();         
           $.ajax({  
                url:"data.php",  
                method:"post",  
                data:$('#add_name').serialize(),  
                success:function(data)  
                {  
                     alert(data);  
                     $('#add_name')[0].reset();  
                }  
           });  
      });  
 });

    </script>
  </head>
<body>
    <form method="post" id="add_name">
            <input type="text" name="chapter_name" placeholder="Enter the Chapter name" class="form-control name_list" />

<select name="class" id="class" class="form-control">
    <option>Select Class</option>
</select>

<select name="subjects" id="subjects" class="form-control">     
</select>

<button type="submit" name="add_chapter" id="submit">Add </button>
    </form>
</body>
</html>

Check PHP Code:

<?php 
$conn = mysqli_connect("localhost", "root", "", "prag");  


   $chapter_name = $_POST["chapter_name"];  
   $class = $_POST["class_name"];  
   $subjects = $_POST["subject_name"];  

  $sql = "INSERT INTO chapter(class_id,subject_id,name) VALUES('$class','$subjects','$chapter_name')";
  if(mysqli_query($conn, $sql)) {
    echo "Data Inserted";  
  } 
else {
  echo "Data Not Inserted";  
}
  ?>

Alert Message on Success not working on AJAX

Question

1 answers

solution1
0 2016-10-07 10:38:45

Alert Message on Success not working on AJAX

Question

1 answers

solution1 0 2016-10-07 10:38:45

solution1
0 2016-10-07 10:38:45