save data from php to ajax and change color of div when new data insert?

Hi i am trying to save value and alert them using ajax which i am insert using php in my sql table but my alert is not working

Here is my code demo.php

 <html>
    <head>
        <script>
        function my(){
             var name = document.getElementById("name").value;
         var last_name = document.getElementById("last_name").value;
      document.getElementsById('div1').style.backgroundColor = green;
      var dataString = 'name='+name+'&last_name='+last_name;
      $.ajax({
        type:'POST',
        data:dataString,
        url:'demo.php',
        success:function(data) {
          alert(data);
        }
      });

        }   </script>
            </head>
            <body>
    <form action="" method="post">
        <input type="text" name="name" id="name" value="" />
     <input type="text" name="last_name" id="last_name" value="" />
     <input type="submit" name="Update" id="update" value="Update" onclick="my();" />
    </form>
<div id="div1" style="width:300px;height: 50px;background-color: yellow;" >
 </div>
    </body>
    </html>
    <?php

    include('conn.php');
     if (isset($_POST['Update'])) {
     $name = $_POST['name'];
      $last_name = $_POST['last_name'];
      echo $name;
      $insert = "insert into ajaxsave values('$name','$last_name')";// Do Your Insert Query
      if(mysql_query($insert)) {
       echo "Success";
      } else {
       echo "Cannot Insert";
      }
    }?>

JavaScript
​x
 
 <html>    <head>        <script>        function my(){             var name = document.getElementById("name").value;         var last_name = document.getElementById("last_name").value;      document.getElementsById('div1').style.backgroundColor = green;      var dataString = 'name='+name+'&last_name='+last_name;      $.ajax({        type:'POST',        data:dataString,        url:'demo.php',        success:function(data) {          alert(data);        }      });​        }   </script>            </head>            <body>    <form action="" method="post">        <input type="text" name="name" id="name" value="" />     <input type="text" name="last_name" id="last_name" value="" />     <input type="submit" name="Update" id="update" value="Update" onclick="my();" />    </form><div id="div1" style="width:300px;height: 50px;background-color: yellow;" > </div>    </body>    </html>    <?php​    include('conn.php');     if (isset($_POST['Update'])) {     $name = $_POST['name'];      $last_name = $_POST['last_name'];      echo $name;      $insert = "insert into ajaxsave values('$name','$last_name')";// Do Your Insert Query      if(mysql_query($insert)) {       echo "Success";      } else {       echo "Cannot Insert";      }    }?>​

demo.html

<html>
<head>
</head>
<body>
<div id="div2" style="width:300px;height: 50px;background-color: yellow;" >
  </div>
</body>
</html>

JavaScript
 
<html><head></head><body><div id="div2" style="width:300px;height: 50px;background-color: yellow;" >  </div></body></html>​

here i want when i submit form them div color should change which is in demo.html where i am wrong in this code

and how can i achieve my goal

Any help will be appreciated

Answer

changes you need to make:

add jquery as a dependency as you are using $.ajax utility function which is provided by Jquery.
As you are using Jquery, you could use its selectors for getting values of elements and binding functions to dom elements. I have commented it in the source code.
You are using a form with a submit button and executing the ajax call on click of it. But you need to prevent the page from submitting the form by preventing the default behavior of the submit button. Refer event.preventDefault();
Move the php ajax response part to the top and call exit() once your response is complete. Else your ajax response will include the whole page html source also.

 <?php

include('conn.php');
if (isset($_POST['Update'])) {
    $name = $_POST['name'];
    $last_name = $_POST['last_name'];
    $insert = "insert into ajaxsave values('$name','$last_name')";// Do Your Insert Query
    if(mysql_query($insert)) {
        echo "Success";     
    } else {
        echo "Cannot Insert";
    }
    //Call exit as your ajax response ends here. You dont need the html source along with it.
    exit();
}
    
?>
 
 <html>
    <head>
    </head>
    <body>
        <form action="" method="post">
            <input type="text" name="name" id="name" value="" />
            <input type="text" name="last_name" id="last_name" value="" />
            <input type="submit" name="Update" id="update" value="Update" />
        </form>
        <div id="div1" style="width:300px;height: 50px;background-color: yellow;" >
        </div>
        <!-- include jquery dependeny before your js code block -->
        <script src="https://code.jquery.com/jquery-latest.js"></script>
        <script>       
        
        $("#update").on("click",function(event) {
            
            //Prevent Default submit button behavour. Prevent the form from submission. 
            event.preventDefault();
            // using Jquery selectors for better readability of code. 
            var name = $("#name").val();
            var last_name = $("#last_name").val();
            $("#last_name").css("background-color","green");
            
            $.ajax({
                type:'POST',
                data:{name:name,last_name:last_name,Update:true},
                url:'demo.php',
                success:function(data) {
                  alert(data);
                }
            });
            
        });

        </script>
    </body>
</html>

JavaScript
 
 <?php​include('conn.php');if (isset($_POST['Update'])) {    $name = $_POST['name'];    $last_name = $_POST['last_name'];    $insert = "insert into ajaxsave values('$name','$last_name')";// Do Your Insert Query    if(mysql_query($insert)) {        echo "Success";         } else {        echo "Cannot Insert";    }    //Call exit as your ajax response ends here. You dont need the html source along with it.    exit();}    ?>  <html>    <head>    </head>    <body>        <form action="" method="post">            <input type="text" name="name" id="name" value="" />            <input type="text" name="last_name" id="last_name" value="" />            <input type="submit" name="Update" id="update" value="Update" />        </form>        <div id="div1" style="width:300px;height: 50px;background-color: yellow;" >        </div>        <!-- include jquery dependeny before your js code block -->        <script src="https://code.jquery.com/jquery-latest.js"></script>        <script>                       $("#update").on("click",function(event) {                        //Prevent Default submit button behavour. Prevent the form from submission.             event.preventDefault();            // using Jquery selectors for better readability of code.             var name = $("#name").val();            var last_name = $("#last_name").val();            $("#last_name").css("background-color","green");                        $.ajax({                type:'POST',                data:{name:name,last_name:last_name,Update:true},                url:'demo.php',                success:function(data) {                  alert(data);                }            });                    });​        </script>    </body></html>​

Advertisement

Answer

changes you need to make: