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

Question

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";
      }
    }?>

demo.html

<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

If you have you code like this the Ajax call will return a full HTML page with your JavaScripting and everything, ending with the word 'Success' or 'Cannot Insert'. If you just want the reply from PHP you'll need a separate file for that... Also, jQuery isn't loading in this, so you'd be getting an error in your browser's console... — patrick
– patrick, Commented Sep 18, 2014 at 7:49
A case of TMC: Too much code in one page. You have to create another PHP script to handle the MYSQL coding and echoes — Mysteryos
– Mysteryos, Commented Sep 18, 2014 at 7:50

Community · Accepted Answer · 2020-06-20 09:12:55Z

3

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>

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Sep 18, 2014 at 8:14

Mithun Satheesh

27.9k14 gold badges80 silver badges103 bronze badges

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

13 Comments

babli sharma Over a year ago

div color is not getting change

Mithun Satheesh Over a year ago

did u try $("#last_name").css("background-color","green");?

Mithun Satheesh Over a year ago

$("#last_name").css({"background-color":"green"}); also would work.

babli sharma Over a year ago

how can i change color of div if it is in another file

Mithun Satheesh Over a year ago

you mean div is in another html page?

|

cachekeyval · Accepted Answer · 2014-09-18 08:04:00Z

0

You send two parameters in "dataString" variable, and then in php check undefined variable "Update"

So, just replace string

if (isset($_POST['Update'])) {

to

if (isset($_POST['name']) && isset($_POST['name'])) {

And add this line to tag

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

answered Sep 18, 2014 at 8:04

cachekeyval

796 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

changes you need to make:

13 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

changes you need to make:

13 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related