Displaying mysql query result using jquery

Question

I'm trying to display data from mysql on the same page that i've got my form with checkboxes. The question is how to write js script that gonna display it. The code is:

<form id="myForm" action="pdoakcja.php" method="post"> 
<!--Instruktor: <input type="text" name="name" /> -->
Permissions:<input type="checkbox" name="M1" value="M1" />M1
<input type="checkbox" name="M2" value="M2" />M2
<input type="submit" value="Szukaj" /> 
</form>


<div id='name-data'>Instruktorzy o podanych uprawnieniach:</div>
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>

<script> 
............??????
</script>

Are you asking how to query a MySQL database via javascript? If that's the case and it's clientside: Don't. Unless you want your database open to the world. — andy, Aug 21 '12 at 10:45
Are you trying to submit the form first then query your database for information based on the form's data and then display it? — black_belt, Aug 21 '12 at 10:46
black_belt: Yes. pdoakcja.php is selecting instructors(their names) with permissions like: M1, M2, M3 etc. By checking and submiting this form i would like to display the instructors that have selected permissions on the same page using javascript. — Chrobry, Aug 21 '12 at 10:52
@KL1M7R0И Ok, I think I have understood your problem, will try to come with solution. — black_belt, Aug 21 '12 at 11:06

score 0 · Answer 1 · edited May 23 '17 at 12:20

You could solve your problem by using jquery form plugin, which will help you to submit the form without having to reload the page and show you the return from your target page in the same page. Just follow the instructions:

Download this jquery form plugin first and save it.

Then

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<!-- This jquery.form.js is for Submitting form data using jquery and Ajax  -->
<script type="text/javascript" src="js/jquery.form.js"></script> 
 <script type="text/javascript"> 

   $(document).ready(function() { 
    var options = { 

        success:       showResponse             

        };              
 // bind form using 'ajaxForm'              
   $('#myForm').ajaxForm(options); 
 });                    

// post-submit callback                      
 function showResponse(responseText, statusText, xhr, $form)  {                         
 if(responseText==1){

    $("#error").html('No Result Found');            


 } else{
    $("#result").html(responseText);                        

    }                   

}                                

</script>           
<form id="myForm" enctype="multipart/form-data" action="pdoakcja.php" 
 method="post"  name="myForm">

  <!--Instruktor: <input type="text" name="name" /> -->
   Permissions:<input type="checkbox" name="M1" value="M1" />M1
   <input type="checkbox" name="M2" value="M2" />M2
   <input type="submit" value="Szukaj" /> 

</form>

 <span id="error"></span>
 <span id="result"></span>

YOUR pdoakcja.php file: (I have got the following code from your another post here, haven't checked it though)

 <?php
 $query = mysql_query("SELECT * FROM permissions WHERE m LIKE '".$_POST['M1']."' OR m  LIKE '".$_POST['M2']."' OR mn LIKE '".$_POST['MN1']."' ");  
   if($query) {
    while($permissions = mysql_fetch_assoc($query)){
    $query2 = mysql_query("SELECT name_surname FROM instruktorzy WHERE  instruktor_id='".$permissions['instruktor_id']."'");  
     while($Mdwa = mysql_fetch_assoc($query2)){
        echo "<p style=\"font-size: 14px; font-family: Helvetica; background-color:  #FFFFFF\"> ".$Mdwa['name_surname']."<br />" ; "</p>" ;
     }
   }
 } else {echo "1";}
  ?>

I hope this will work for you. For detail information you could study the jquery form plugin's website.

no problem :) .. if its really working would you mind marking my answer as your accepted answer? — black_belt, Aug 21 '12 at 11:47

score 0 · Answer 2 · answered Aug 21 '12 at 11:44

Heres a pseudo example showing how you can do it with jQuery, this will also update as you click the check box so you could remove the submit altogether; You say you already have a database doing the job so I wont include that. Just copy and paste.

<?php 
//Some pseudo data kinda as your receive it from a query
$datafromSql = array(
array('id'=>1,'permission'=>'M1','theData'=>'User has M1 permission'),
array('id'=>2,'permission'=>'M2','theData'=>'User has M2 permission'),
array('id'=>3,'permission'=>'M1','theData'=>'User has M1 permission'),
array('id'=>4,'permission'=>'M1','theData'=>'User has M1 permission'),
);

//Access the data
if($_SERVER['REQUEST_METHOD']=='POST'){
    $is_ajax = false;
    if(isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) === 'xmlhttprequest'){
        $is_ajax = true;
    }
    //pseudo code, really you would put your query here
    // SELECT theData FROM your_table WHERE permission=POST_VALUE ... ...

    //And then format your output
    $result=array();

    foreach($datafromSql as $row){
        if($is_ajax == true){
            foreach($_POST as $key=>$value){
                if($_POST[$key] == 'true' && $row['permission']==$key){
                    $result[]=$row['theData'].'<br />';
                }
            }
        }else{
            foreach($_POST as $key=>$value){
                if($_POST[$key] == $row['permission']){
                    $result[]=$row['theData'].'<br />';
                }
            }
        }
    }
    $result = implode('<hr />',$result);

    //AJAX Response, echo and then die.
    if($is_ajax === true){
        header('Content-Type: text/html');
        //example output sent back to the jQuery callback
        echo $result;
        //echo '<pre>'.print_r($_POST,true).'</pre>';
        die;
    }

}
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js" charset="utf-8"></script>
<script type="text/javascript">
function update(){
    $.post('./<?php echo basename(__FILE__)?>',
    {
        M1:  $("#M1").is(':checked'),
        M2:  $("#M2").is(':checked')
    },
    function(data) {
        $('#result').replaceWith('<div id="result"><h1>The Result:</h1>'+ data +'</div>');
    });
}
</script>

</head>

<body>

<form method="POST" action="<?php echo basename(__FILE__)?>">
Permissions: 
<input type="checkbox" id="M1" name="M1" value="M1" onChange="update()"/>M1
<input type="checkbox" id="M2" name="M2" value="M2" onChange="update()"/>M2
<input type="submit" value="Szukaj" /> 
</form>

<p id='result'><?php echo isset($result)?$result:null;?></p>

</body>

</html>

score -1 · Answer 3 · answered Aug 21 '12 at 10:50

-1

You should use the PHP MySQL functions to retrieve the data you want from your database and then display them via PHP, not javascript.

Especially have a look at this: mysql_fetch_assoc - there is a fully working example.

answered Aug 21 '12 at 10:50

Stefan

2,028
2
36
53

I did it in php file, now i want to display it on the same page! – Chrobry Aug 21 '12 at 10:57
why did you vote down? you can display this data simply by using echo (www.php.net/echo) – Stefan Aug 21 '12 at 14:03

Displaying mysql query result using jquery

3 Answers3