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 http://www.yourinspirationweb.com/en/how-to-create-chained-select-with-php-and-jquery/ 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:
<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 two 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 all the 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 I need help!
Related
I Add/Remove dynamic rows in HTML table. With this code I can dynamically add and remove rows. I want to add a row with an input value in the 1st row as if I input 'debasish' it will append next row with value 'debasish'. But with append row with blank value.
How can I append the row with the input value?
<html>
<head>
<title>Add/Remove dynamic rows in HTML table</title>
<script>
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;
}
}
clearForm();
}
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<=1) {
alert("Cannot delete all the rows.");
break;
}
table.deleteRow(i);
rowCount--;
i--;
}
}
}catch(e) {
alert(e);
}
}
</script>
</head>
<body>
<form action="#" method="post">
<input type="button" value="Add Row" onclick="addRow('dataTable')" />
<input type="button" value="Delete Row"
onclick="deleteRow('dataTable')" />
<table id="dataTable" width="550px" border="1">
<tbody>
<thead>
<tr>
<th>Select </th>
<th>Name</th>
</tr>
</thead>
<tr>
<td><input type="checkbox" name="chk" /></td>
<td><input type="text" name="name"></td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
If you only want to get the value from the input in the first row, use the following:
case "text":
newcell.childNodes[0].value = table.rows[1].cells[1].querySelector("input").value;
break;
Demo
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 = table.rows[1].cells[1].querySelector("input").value;
break;
case "checkbox":
newcell.childNodes[0].checked = false;
break;
case "select-one":
newcell.childNodes[0].selectedIndex = 0;
break;
}
}
//clearForm();
}
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 <= 1) {
alert("Cannot delete all the rows.");
break;
}
table.deleteRow(i);
rowCount--;
i--;
}
}
} catch (e) {
alert(e);
}
}
<form action="#" method="post">
<input type="button" value="Add Row" onclick="addRow('dataTable')" />
<input type="button" value="Delete Row" onclick="deleteRow('dataTable')" />
<table id="dataTable" width="550px" border="1">
<tbody>
<thead>
<tr>
<th>Select </th>
<th>Name</th>
</tr>
</thead>
<tr>
<td><input type="checkbox" name="chk" /></td>
<td><input type="text" name="name"></td>
</tr>
</tbody>
</table>
</form>
I have created Dynamic Table for adding and deleting rows using HTML and JavaScript.
How to submit or export the dynamic data into excel sheet by using javaScript please give me help.
Here is my code..
<HTML>
<HEAD>
<TITLE> Add/Remove dynamic rows in HTML table </TITLE>
<SCRIPT language="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[0].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 <= 1) {
alert("Cannot delete all the rows.");
break;
}
table.deleteRow(i);
rowCount--;
i--;
}
}
}catch(e) {
alert(e);
}
}
</SCRIPT>
</HEAD>
<BODY>
<INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />
<INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" />
<INPUT type="button" value="Submit" />
<TABLE id="dataTable" width="350px" border="1">
<TR>
<TD><INPUT type="checkbox" name="chk"/></TD>
<TD>Employee Name</TD>
<TD><input type="text"name="ename"/></TD>
<TD>Employee Id</TD>
<TD><input type="text"name="eid"/></TD>
<TD>Employee Date of Joining</TD>
<TD><input type="date" name="edoj"/></TD>
<TD>Employee Designation</TD>
<TD>
<SELECT name="edesignation">
<OPTION value="aset">Assistant Software Engineer Trainee</OPTION>
<OPTION value="ase">Assistant Software Engineer</OPTION>
<OPTION value="asse">Assistant Systems Engineer</OPTION>
<OPTION value="asa">Assistant Systems Analyst</OPTION>
<OPTION value="ita">IT Analyst</OPTION>
<OPTION value="eng">Engineer</OPTION>
<OPTION value="se">Software Engineer</OPTION>
<OPTION value="sse">Systems Engineer</OPTION>
</SELECT>
</TD>
<TD>Employee Salary</TD>
<TD><input type="text"name="esalary"/></TD>
</TR>
</TABLE>
</BODY>
</HTML>
I need help in deleting the row one by one from the bottom of the table on clicking the delete row button.
Issue:
I have used the javascript function to delete a row from my table, instead of deleting the row one by one from the bottom it is getting deleted as a whole except the first 2 rows. I need to delete the rows from the bottom one by one except the first 2 rows when the delete button is clicked .
This is my code
<html>
<head>
<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 "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=1; i<rowCount; i++) {
var row = table.rows[i];
if(rowCount <= 2) {
alert("Cannot delete all the rows.");
break;
}
table.deleteRow(i);
rowCount--;
i--;
}
}
catch(e) {
alert(e);
}
}
</script>
</head>
<body>
<form>
<input type="button" value="Add Row" onclick="addRow('dataTable')" />
<input type="button" value="Delete Row" onclick="deleteRow('dataTable')" />
<br/>
<br/>
<table id="dataTable" align="center" width="350px" border="1">
<tr>
<th> Product Name</th>
<th>Quantity</th>
<th> Brand</th>
</tr>
<tr>
<td> <input type="text" name="pname"/></td>
<td><input type="text" name="qty"/></td>
<td><select name="brand"/>
<option value="select">SELECT</option>
</select>
</td>
</table>
</form>
</body>
</html>
this help you :
function deleteRow(tableID) {
try {
var table = document.getElementById(tableID);
var rowDelete = table.rows.length - 1;
if (rowDelete > 1)
table.deleteRow(rowDelete);
else
alert("Cannot delete all the rows.")
}
catch(e) {
alert(e);
}
}
final code :
<html>
<head>
<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 "select-one":
newcell.childNodes[0].selectedIndex = 0;
break;
}
}
}
function deleteRow(tableID) {
try {
var table = document.getElementById(tableID);
var rowDelete = table.rows.length - 1;
if (rowDelete > 1)
table.deleteRow(rowDelete);
else
alert("Cannot delete all the rows.")
}
catch(e) {
alert(e);
}
}
</script>
</head>
<body>
<form>
<input type="button" value="Add Row" onclick="addRow('dataTable')" />
<input type="button" value="Delete Row" onclick="deleteRow('dataTable')" />
<br/>
<br/>
<table id="dataTable" align="center" width="350px" border="1">
<tr>
<th> Product Name</th>
<th>Quantity</th>
<th> Brand</th>
</tr>
<tr>
<td> <input type="text" name="pname" value="" /></td>
<td><input type="text" name="qty" value=""/></td>
<td><select name="brand"/>
<select>
<option value="select">SELECT</option>
</select>
</td>
</table>
</form>
</body>
</html>
Before going to the loop deleting the rows, you should check first the number of rows. or you can remove the loop since you are just deleting one row only which is the last row (rowCount-1);
Try this:
function deleteRow(tableID) {
try {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
if (rowCount > 2){
//for(var i =1; i < 2; i++) {
// var row = table.rows[i];
table.deleteRow(rowCount-1);
//}
}
else{
alert("Cannot delete all the rows.");
}
}
catch(e) {
alert(e);
}
}
Here is the working code, you didnt break the execution after deleting a row, thats why it was deleting all the rows
function deleteRow(tableID) {
try {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for(var i=1; i<rowCount; i++) {
var row = table.rows[i];
if(rowCount <= 2) {
alert("Cannot delete all the rows.");
break;
}
else{
table.deleteRow(i);
rowCount--;
i--;
break;
}
}
}
catch(e) {
alert(e);
}
}
See if this Helps :
$('#tbl1').on('click', 'input[type="button"]', function () {
$(this).closest('tr').remove();
})
$('p input[type="button"]').click(function () {
$('#tbl1').append('<tr><td><input type="text" class="txtBox" /></td><td><input type="button" value="X" /></td></tr>')
});
Here is something to work with an HTML Snippet
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="tbl1" style="border: 1px solid blue">
<tr>
<td>
<input type="text" class="txtBox" />
</td>
<td>
<input type="button" value="X" />
</td>
</tr>
</table>
<p>
<input type="button" value="Add">
</p>
Good Day! :)
I created a chained select using php and jQuery like on this page http://www.yourinspirationweb.com/en/how-to-create-chained-select-with-php-and-jquery/ and I created a javascript to add and delete select tags I get it somewhere on the internet
but what happening is when I choose a category on the first line everything on the subcategory will be enabled and also on the product description. Just like this http://i.stack.imgur.com/H9nfb.jpg
this is my 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 two 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 all the 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>
Hope anyone could help me. :)
<select type='text' class='chosen-select'>
<option value='initial'>Select One...</option>
</select>
<select 'type='text' class='chosen-select' >
<option value='1' class='initial'>-----</option>
</select>
Use something like this. If 'Select One' is selected by user, it will display '----' in the next button. Set classes accordingly to make it work for you.
How can I add an id dynamically to each field inside of the table when I click on add? For example, the first row that always shows up would be checkbox0, input0, select0, and the ids of the next row when the add button is clicked would be checkbox1, input1, select1, etc.
Below is my code:
<HTML>
<HEAD>
<TITLE> Add/Remove dynamic rows in HTML table </TITLE>
<SCRIPT language="javascript">
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
alert("rowCount " +rowCount);
alert("row " +row);
var colCount = table.rows[0].cells.length;
for(var i=0; i<colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[0].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;
}
}
}
</SCRIPT>
</HEAD>
<BODY>
<INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />
<TABLE id="dataTable" width="350px" border="1">
<TR>
<TD><INPUT type="checkbox" name="chk"/></TD>
<TD><INPUT type="text" name="txt"/></TD>
<TD>
<SELECT name="country">
<OPTION value="in">India</OPTION>
<OPTION value="de">Germany</OPTION>
<OPTION value="fr">France</OPTION>
<OPTION value="us">United States</OPTION>
<OPTION value="ch">Switzerland</OPTION>
</SELECT>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
This could do the trick
switch(newcell.childNodes[0].type) {
case "text":
newcell.childNodes[0].value = "";
newcell.childNodes[0].id = "input" + rowCount;
break;
case "checkbox":
newcell.childNodes[0].checked = false;
newcell.childNodes[0].id = "checkbox" + rowCount;
break;
case "select-one":
newcell.childNodes[0].selectedIndex = 0;
newcell.childNodes[0].id = "select" + rowCount;
break;
}
jsFiddle demo
EDIT
As pointed out by #bfavaretto, you'll need to remove leading white spaces on select cell
<TD><SELECT name="country">
<OPTION value="in">India</OPTION>
<OPTION value="de">Germany</OPTION>
<OPTION value="fr">France</OPTION>
<OPTION value="us">United States</OPTION>
<OPTION value="ch">Switzerland</OPTION>
</SELECT>
</TD>
Even knowing that you didn't say that you can use jQuery, I'm posting an solution with it. Take a look.
HTML:
<table>
<tbody id="tableBody">
</tbody>
</table>
JavaScript:
var $tableBody = $( "#tableBody" );
for ( var i = 0; i < 10; i++ ) {
var $row = $( "<tr></tr>" );
var $textInput = $( "<input type='text' id='text_" + i + "'/>" );
var $checkbox = $( "<input type='checkbox' id='check_" + i + "'/><span> Checkbox " + i + "</span>" );
$row.append( $( "<td></td>" ).append( $textInput ) );
$row.append( $( "<td></td>" ).append( $checkbox ) );
$tableBody.append( $row );
}
jsFiddle: http://jsfiddle.net/davidbuzatto/C8CRW/
Try this:
function setIds() {
var id = 0;
for (var i = 0; i < document.getElementsByTagName("input").length; i++) {
if (document.getElementsByTagName("input")[i].type == "text") {
document.getElementsByTagName("input")[i].id = "text_" + id;
id++;
}
}
}
And add it at the end of your first function.