javascript - Put dynamic table on chained select box using jQuery -
i have form purchase requisition , created 3 chained select box (category, subcategory, product description) reference create chained select boxes website http://www.yourinspirationweb.com/en/how-to-create-chained-select-with-php-and-jquery/ problem want request many products question how? , want put of requested in database. somehow found codes used javascript working row first row only. when select eg. category: office supplies of subcategory select box(rows) affected. here code:
<html> <head> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("select#type").attr("disabled","disabled"); $("select#category").change(function(){ $("select#type").attr("disabled","disabled"); $("select#type").html("<option>wait...</option>"); var id = $("select#category option:selected").attr('value'); $.post("select_type.php", {id:id}, function(data){ $("select#type").removeattr("disabled"); $("select#type").html(data); }); }); $("select#desc").attr("disabled","disabled"); $("select#type").change(function(){ $("select#desc").attr("disabled","disabled"); $("select#desc").html("<option>wait...</option>"); var id = $("select#type option:selected").attr('value'); $.post("select_desc.php", {id:id}, function(data){ $("select#desc").removeattr("disabled"); $("select#desc").html(data); }); }); $("form#select_form").submit(function(){ var cat = $("select#category option:selected").attr('value'); var type = $("select#type option:selected").attr('value'); var descr = $("select#desc option:selected").attr('value'); if(cat>0 && type>0 && descr>0) { var result = $("select#desc option:selected").html(); $("#result").html('your choice: '+result); } else { $("#result").html("you must choose 2 options!"); } return false; }); }); </script> <script type="text/javascript"> function addrow(tableid) { var table = document.getelementbyid(tableid); var rowcount = table.rows.length; var row = table.insertrow(rowcount); var colcount = table.rows[0].cells.length; for(var i=0; i<colcount; i++) { var newcell = row.insertcell(i); newcell.innerhtml = table.rows[1].cells[i].innerhtml; //alert(newcell.childnodes); switch(newcell.childnodes[0].type) { case "text": newcell.childnodes[0].value = ""; break; case "checkbox": newcell.childnodes[0].checked = false; break; case "select-one": newcell.childnodes[0].selectedindex = 0; break; } } } function deleterow(tableid) { try { var table = document.getelementbyid(tableid); var rowcount = table.rows.length; for(var i=0; i<rowcount; i++) { var row = table.rows[i]; var chkbox = row.cells[0].childnodes[0]; if(null != chkbox && true == chkbox.checked) { if(rowcount <= 2) { alert("cannot delete rows."); break; } table.deleterow(i); rowcount--; i--; } } }catch(e) { alert(e); } } </script> </head> <body> <?php include "select.class.php"; ?> <form id="select_form"> <input type="button" value="add" onclick="addrow('tableid')" /> <input type="button" value="delete" onclick="deleterow('tableid')" /> <table id="tableid"> <tr> <td></td> <td>category</td> <td>subcategory</td> <td>product description</td> </tr> <tr> <td><input type="checkbox" name="chkbox[]" /></td> <td> <select id="category" name="category[]"> <?php echo $opt->showcategory(); ?> </select> </td> <td> <select id="type" name="type[]"> <option value="0">choose...</option> </select> </td> <td> <select id="desc" name="desc[]"> <option value="0">choose...</option> </select> </td> </tr> </table> <input type="submit" value="confirm" /> </form> <div id="result" name="result[]"></div> </body> </html>
please need help!
Comments
Post a Comment