php - How can I have MySQL and JS add numerous users into a html div and be able to delete them? -
the program below lets user click on name in drop down list , once user clicks name ajax uses php script grab user info mysql db , displays under drop down...
however info 1 person can displayed @ once...how can let user add many people want clicking names in drop down? dont want users have been chosen show in list want user able delete people have chosen , deleted user should appear in drop down list...there picture of how works, trying when user clicks name adds person's name , info div, when choose person adds person div well. people in div should not show in drop down list unless deleted..
html part
<html> <head> <script type="text/javascript"> function showuser(str) { if (str=="") { document.getelementbyid("txthint").innerhtml=""; return; } if (window.xmlhttprequest) {// code ie7+, firefox, chrome, opera, safari xmlhttp=new xmlhttprequest(); } else {// code ie6, ie5 xmlhttp=new activexobject("microsoft.xmlhttp"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readystate==4 && xmlhttp.status==200) { document.getelementbyid("txthint").innerhtml=xmlhttp.responsetext; } } xmlhttp.open("get","getuser.php?q="+str,true); xmlhttp.send(); } </script> </head> <body> <form> <select name="users" onchange="showuser(this.value)"> <option value="">select person:</option> <option value="1">peter griffin</option> <option value="2">lois griffin</option> <option value="3">glenn quagmire</option> <option value="4">joseph swanson</option> </select> </form> <br /> <div id="txthint"><b>person info listed here.</b></div> </body> </html> php file:
<?php $q=$_get["q"]; $con = mysql_connect('localhost', 'peter', 'abc123'); if (!$con) { die('could not connect: ' . mysql_error()); } mysql_select_db("ajax_demo", $con); $sql="select * user id = '".$q."'"; $result = mysql_query($sql); echo "<table border='1'> <tr> <th>firstname</th> <th>lastname</th> <th>age</th> <th>hometown</th> <th>job</th> </tr>"; while($row = mysql_fetch_array($result)) { echo "<tr>"; echo "<td>" . $row['firstname'] . "</td>"; echo "<td>" . $row['lastname'] . "</td>"; echo "<td>" . $row['age'] . "</td>"; echo "<td>" . $row['hometown'] . "</td>"; echo "<td>" . $row['job'] . "</td>"; echo "</tr>"; } echo "</table>"; mysql_close($con); ?>
jquery may you. once got it, able this:
var removed_option; $("select option").click(function(){ removed_option = $(this); // saves option in var, use later put select $(this).remove(); // removes option select var data = {}; data.selected_person = $(this).val(); $.post("ajax.php", data, function(returned_data){ // make ajax call $("#txthint").html(returned_data); // put data ajax #txthint }); }); you can add column button, remove table , put removed option:
$("#remove_table").click(function(){ $(this).parents("table").remove(); // searches dom button's parents tables , removes them $("select").append(removed_option); // adds select removed, saved, option });
Comments
Post a Comment