How to get data in checkboxes from dropdown list in Ajax/Jquery

Question

I am not posting here complete code yet I want an idea how to retrieve data in checboxes based on a dropdown list. I have a dropdownlist of users, and pages data in checkboxes.

Suppose table user have two columns (user_id, user) and pages have three columns (page_id, user_id, title).

I wish these cheboxes automatic check/uncheck acording to selected user without refreshing page. Suppose I am fetching users as

echo '<select name="user_id">';
echo '<option value="">Select User</option>';

$sql = "SELECT * from users";
$res = mysql_query($sql);
while($row = mysql_fetch_assoc($res)) {
    $uid = $row['user_id'];
    $user = $row['user'];
    echo '<option value="'.$uid.'">'.$user.'</option>'; 
}

echo '</select>';

And data in checkboxes on the basis of selected user (make sure user_id is compared in IF condition but not in query)

$user_id = $_POST['user_id']; //selected user from list

$query = "SELECT * from pages";
$result = mysql_query($query);
while($rowPage = mysql_fetch_assoc($result)) {

    $upid = $rowPage['user_id'];
    $pid = $rowPage['page_id'];
    $title = $rowPage['title'];

    if($upid == $user_id) {
        echo '<input type="checkbox" name="userPages[]" value="'.$pid.'" checked="checked"> '.$title;   
    } else {
        echo '<input type="checkbox" name="userPages[]" value="'.$pid.'"> '.$title;
    }
}

How is it possible in Ajax/Jquery I mean without refreshing page. Hope you understand what I mean. Thanks

Just replace the select elements with the one you retrieve from your ajax call and be done with it? — dbf
– dbf, Commented Oct 5, 2012 at 20:29
Thanks for reply, but main thing is I need that ajax code, I haven't knowledge of ajax :( — Bheem
– Bheem, Commented Oct 5, 2012 at 20:41
err .. then start reading about ajax practices? Fastest and simplest way would be to use a javascript library like jQuery's and use one of many ajax methods — dbf
– dbf, Commented Oct 5, 2012 at 22:42

Rajat Modi · Accepted Answer · 2012-10-06 04:24:23Z

here is the asnwer what you can do is like this

 echo '<select name="user_id" id="userCombo">';
 echo '<option value="">Select User</option>';

 $sql = "SELECT * from users";
 $res = mysql_query($sql);
 while($row = mysql_fetch_assoc($res)) {
    $uid = $row['user_id'];
    $user = $row['user'];
    echo '<option value="'.$uid.'">'.$user.'</option>'; 
 }

echo '</select>';
echo '<div id="userCheckBoxes"></div>'

Now put the ajax call on the change event of the select box. I am here going to use jquery ajax.

<script type="text/javascript">
 $(document).ready(function()
 {
   $("#userCombo").change(function()
   {
     var id=$(this).val();
     var dataString = 'user_id='+ id;
     $.ajax
     ({
         type: "POST",
         url: "ajax_checkboxes.php",
         data: dataString,
         cache: false,
         success: function(html)
         {
            $("#userCheckBoxes").html(html);
         }
     });
   });
 });
 </script>

Now make ajax_checkboxes.php into same directory. then put your below code into the ajax_checkboxes.php. I assume you can make database connectivity and all by your self.

  $user_id = $_POST['user_id']; //selected user from list

  $query = "SELECT * from pages";
  $result = mysql_query($query);
  while($rowPage = mysql_fetch_assoc($result)) {

       $upid = $rowPage['user_id'];
       $pid = $rowPage['page_id'];
       $title = $rowPage['title'];

    if($upid == $user_id) {
        echo '<input type="checkbox" name="userPages[]" value="'.$pid.'"        checked="checked"> '.$title;   
     } else {
        echo '<input type="checkbox" name="userPages[]" value="'.$pid.'"> '.$title;
    }
 }

I did not taste it on my local server but I am sure It will work.

PS dont for get to include jQuery on the head section of your site.

Collectives™ on Stack Overflow

How to get data in checkboxes from dropdown list in Ajax/Jquery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related