javascript - PHP, MySql & JQuery - Filling select box after press add button -
i have several problems, thought should see code :)
- i have problem fill new select box when user click add button(or link) get-data.php. when user click add button(or link) new form include new select box displayed. when these html element displayed, script can't filling new select box element.
- when user type text or fill element 1 add new form, previous text gone.
please guide me solve problem
thanks in advance
here html code:
<!doctype html public "-//w3c//dtd html 4.01 transitional//en" "http://www.w3.org/tr/html4/loose.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <script src="js/jquery-1.7.1.min.js" type="text/javascript"></script> <title>insert title here</title> </head> <body> <script type="text/javascript"> $(function(){ var items=""; $.getjson("get-data.php",function(data){ $.each(data,function(index,item) { items+="<option value='"+item.id+"'>"+item.name+"</option>"; }); $("#mycollege").html(items); }); }); </script> <form id="contact-form" enctype="multipart/form-data" method="post" name="form1" target="_parent"> <fieldset> <legend>educational background</legend> <label><span class="text-form">college:</span><input type="radio" name="rad_college[]" value="1" /> <select name="college[]" id="mycollege"> <option value="">default</option> </select> <input type="radio" name="rad_college[]" value="2" />other<input type="text" name="college[]" style="float: none; margin-left: 10px;" /> </label><br /> <label><span class="text-form">ladder:</span><input type="text" name="id_ladder[]" /></label><br /> <label><span class="text-form">majors:</span><input type="text" name="id_majors[]" /></label><br /> <label><span class="text-form">period:</span><input type="text" name="period[]" /></label><br /> <label><span class="text-form">gpa:</span><input type="text" name="gpa[]" /></label><br /> <script type="text/javascript"> $(document).ready(function(){ var counter = 1; $("#add").click(function () { if(counter==800){ alert("too many boxes"); return false; } $("#textboxes").html($("#textboxes").html() + "<div id='c"+counter+"' ><label for='t2'><span class='text-form'>college"+counter+":</span><input type='radio' name='rad_college"+counter+"[]' id='t"+counter+"' value='1' /><select name='college[]' id='mycollege'><option value=''>default</option></select><input type='radio' name='rad_college"+counter+"[]' value='2' />other<input type='text' name='college[]' style='float: none; margin-left: 10px;' /></label></div>\n"); $("#textboxes").html($("#textboxes").html() + "<div id='d"+counter+"' ><label for='t2'><span class='text-form'>ladder"+counter+":</span><input type='text' name='id_ladder[]' id='t"+counter+"' /></label></div>\n"); $("#textboxes").html($("#textboxes").html() + "<div id='e"+counter+"' ><label for='t2'><span class='text-form'>majors"+counter+":</span><input type='text' name='id_majors[]' id='t"+counter+"' /></label></div>\n"); $("#textboxes").html($("#textboxes").html() + "<div id='f"+counter+"' ><label for='t2'><span class='text-form'>period"+counter+":</span><input type='text' name='period[]' id='t"+counter+"' /></label></div>\n"); $("#textboxes").html($("#textboxes").html() + "<div id='g"+counter+"' ><label for='t2'><span class='text-form'>gpa"+counter+":</span><input type='text' name='gpa[]' id='t"+counter+"' /></label><br /><br /></div>\n"); ++counter; }); $("#remove").click(function () { if(counter==1){ alert("can u see boxes"); return false; } --counter; $("#c"+counter).remove(); $("#d"+counter).remove(); $("#e"+counter).remove(); $("#f"+counter).remove(); $("#g"+counter).remove(); }); }); </script> <div id="textboxes"> <!-- <br /> --> <br /> </div> <br /> <a href="javascript:void(0)" id="add" class="button">add</a> <a href="javascript:void(0)" id="remove" class="button">remove</a> <br /><br /><br /> <input type="submit" name="submit" value="submit"> <input type="reset" name="reset" value="reset"> </fieldset> </form> </body> </html>
here php code: (get-data.php)
<?php include 'configurations/db-connections.php'; $q = "select id, name college"; $sql = mysql_query($q); $data = array(); while($row = mysql_fetch_array($sql, true)){ $data[] = $row; }; echo json_encode($data); ?>
according answer on comment, need debug javascript first..., if don't know how, check out tutorial: http://odetocode.com/blogs/scott/archive/2012/03/13/debugging-javascript-with-chrome.aspx
after you've read , try on code, let me know appears wrong, i'll edit answer , i'll try solve issue.
Comments
Post a Comment