Update Multiple Divs from query using POST in AJAX and PHP

Question

attempting to update multiple Divs using AJAX PHP and HTML. Below is an attached example. I can get one DIV updated, however I would like to return multiple results from a PHP SELECT Statement and have each returned column in each DIV based on column name selection like:

 $("#IDBox").html(msg.ID);

 $("#FirstNameBox").html(msg.FirstName);

Is this possible? the design would be user inputs ID and posts which executes PHP Query that returns values for each DIV i.e. ID, First Name, Last Name etc. Thanks Guys!

<?php  
$databaseName = "SQL_SERVER" ;
$serverName = "192.168.89.89";   
$uid = "Rep02";     
$pwd = "Password123";     


$connectionInfo = array( "UID"=>$uid,                              
                         "PWD"=>$pwd ,                              
                         "Database"=>$databaseName);   


/* Connect using SQL Server Authentication. */    
$conn = sqlsrv_connect( $serverName , $connectionInfo); 


$action = $_POST['action'];

$tsql = "SELECT [ID], [FirstName]
  FROM TABLE1 
  WHERE [Player_ID] = '$action'";

/* Execute the query. */    

$stmt = sqlsrv_query( $conn, $tsql);  


    //Working Query
/* Iterate through the result set printing a row of data upon each iteration.    BR=."\n" */

  while($row = sqlsrv_fetch_ARRAY($stmt, SQLSRV_FETCH_ASSOC)){
      { 
    echo $row['ID'];
    echo $row['FirstName'];


    }}  

/* Free statement and connection resources. */    
sqlsrv_free_stmt( $stmt);    
sqlsrv_close( $conn);    

?>

:

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Winner</title>
        <style type="text/css">
            #IDBox, #FirstNameBox {
                width: 100px;
                height: 18px;
                border: 1px solid #999;
            }

        </style>

<script src="../MS/Jquery/jquery-1.11.0.min.js"></script>



<script>        


            function myCall4() {
            var Player_Card = $('#Player_Card').val();

    $.ajax({ url: 'DBv6.php',
 data: {action:Player_Card},
 dataType: 'html',
 type: 'post',
 success: function(msg) {

           $("#IDBox").html(msg);   
            $("#FirstNameBox").html(msg);   

}
})

};


</script>




    </head>


    <body>

    ID:
    <div  id="IDBox"> </div>

    First Name:
    <div  id="FirstNameBox"> </div>

    <br>

    <form>
            <tr>
        <td style="width: 100px;">Player Card:</td>
        <td style="width: 150px;"><input type= "text" ID= "Player_Card" placeholder= "Please Swipe Card..." ></td>

            </tr>


            <td><input type = "button" value="Submit" onclick = "myCall4();">  

    </form>





    </body>
</html>

ameenulla0007 · Accepted Answer · 2016-03-01 17:37:20Z

1

yup of course it is possible, return your ajax in JSON instead of simple string by using echo json_encode($row);

and retrieve the ajax success return in object, and then you will be easily be able to retrieve it individually.

$.ajax({
  dataType: "json",
  data: {action:Player_Card},
  type: 'post',
  url: "DBv6.php",
  success: function(msg) {
    alert(msg.FirstName); //use your statement instead
    alert(msg.ID); //use your statement instead
  }
});

answered Mar 1, 2016 at 17:37

ameenulla0007

2,6831 gold badge15 silver badges15 bronze badges

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

1 Comment

Michael Sandusky Over a year ago

OMG Thank you so MUCH!! Changed it too $("#FirstNameBox").html(msg.FirstName);

Collectives™ on Stack Overflow

Update Multiple Divs from query using POST in AJAX and PHP

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related