javascript - PHP, MySql & JQuery - Filling select box after press add button -


i have several problems, thought should see code :)

  1. 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.
  2. 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

Popular posts from this blog

django - How can I change user group without delete record -

java - Need to add SOAP security token -

java - EclipseLink JPA Object is not a known entity type -