Databases
StackOverflow2013
Postsdbo
POPut dynamic table on chained select box using jQuery
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POPut dynamic table on chained select box using jQuery
    text
    copied!<p>I have a form for Purchase Requisition and I created 3 chained select box (category, subcategory, product description) my reference to create those chained select boxes is this website <a href="http://www.yourinspirationweb.com/en/how-to-create-chained-select-with-php-and-jquery/" rel="nofollow">http://www.yourinspirationweb.com/en/how-to-create-chained-select-with-php-and-jquery/</a> the problem is that I want to request many products the question is how? and I want to put all of that I requested in database. Somehow I found codes they used javascript but the only working row is the first row only. When I select eg. Category: Office Supplies all of the subcategory select box(rows) are affected. Here is my code:</p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; $(document).ready(function(){ $("select#type").attr("disabled","disabled"); $("select#category").change(function(){ $("select#type").attr("disabled","disabled"); $("select#type").html("&lt;option&gt;wait...&lt;/option&gt;"); 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("&lt;option&gt;wait...&lt;/option&gt;"); 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&gt;0 &amp;&amp; type&gt;0 &amp;&amp; descr&gt;0) { var result = $("select#desc option:selected").html(); $("#result").html('your choice: '+result); } else { $("#result").html("you must choose two options!"); } return false; }); }); &lt;/script&gt; &lt;script type="text/javascript"&gt; 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&lt;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&lt;rowCount; i++) { var row = table.rows[i]; var chkbox = row.cells[0].childNodes[0]; if(null != chkbox &amp;&amp; true == chkbox.checked) { if(rowCount &lt;= 2) { alert("Cannot delete all the rows."); break; } table.deleteRow(i); rowCount--; i--; } } }catch(e) { alert(e); } } &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;?php include "select.class.php"; ?&gt; &lt;form id="select_form"&gt; &lt;input type="button" value="Add" onclick="addRow('tableID')" /&gt; &lt;input type="button" value="Delete" onclick="deleteRow('tableID')" /&gt; &lt;table id="tableID"&gt; &lt;tr&gt; &lt;td&gt;&lt;/td&gt; &lt;td&gt;Category&lt;/td&gt; &lt;td&gt;SubCategory&lt;/td&gt; &lt;td&gt;Product Description&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;&lt;input type="checkbox" name="chkbox[]" /&gt;&lt;/td&gt; &lt;td&gt; &lt;select id="category" name="category[]"&gt; &lt;?php echo $opt-&gt;ShowCategory(); ?&gt; &lt;/select&gt; &lt;/td&gt; &lt;td&gt; &lt;select id="type" name="type[]"&gt; &lt;option value="0"&gt;choose...&lt;/option&gt; &lt;/select&gt; &lt;/td&gt; &lt;td&gt; &lt;select id="desc" name="desc[]"&gt; &lt;option value="0"&gt;choose...&lt;/option&gt; &lt;/select&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;input type="submit" value="confirm" /&gt; &lt;/form&gt; &lt;div id="result" name="result[]"&gt;&lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>Please I need help! </p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload