Array radio button on dynamic added row - javascript

I have a form that allowed user add row dynamically. Inside the form have array radio button.
Question:
When I try click on second row's radio button or other raw, the radio button value will show in first column only and other have an offset error.
At the beginning, in my concept is the value will stored according to array column turned out is not.
So, I try using JavaScript to set each raw radio button's value but it show this error:
Uncaught TypeError: Cannot read property '2' of null
function addRow(tableID) {
var table = document.getElementById(tableID);
var radioB = document.getElementById(BX_related);
var rowCount = table.rows.length;
// limit the user from creating fields more than your limits
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; //row[which table u need to duplicate]
table.rows[rowCount].cells[0].innerHTML = rowCount;
}
radioB[rowCount].value = rowCount;
}
<table id="dataTable" class="form" border="0">
<tbody>
<tr><th>Bil.</th><th>Nama</th><th>Umur</th><th>Dij./Ting.</th><th>Pekerjaan</th><th>Catatan</th><th>Berkenaan</th></tr>
<tr ><td>1</td>
<td><input type="text" name="BX_name[]" size="30"></td>
<td><input type="text" name="BX_age[]"size="2" ></td>
<td><input type="text" name="BX_study[]"size="8"></td>
<td><input type="text" name="BX_work[]" size="10"></td>
<td><input type="text" name="BX_note[]"size="15"></td>
<td> <input type="radio" name="BX_related[]" id="BX_related" value="" required></td></tr>
</tbody>
</table>
The PHP part:
<?php
$i =0;
if(isset($_POST)=='submit'){
$BX_name=$_POST['BX_name'];
$BX_age=$_POST['BX_age'];
$BX_related = $_POST['BX_related'];
echo $BX_related;
foreach($BX_name as $a => $b)
{
$i ++;
echo "<br> $i";
echo "name: ";
echo $BX_name[$a];
}
}
?>
Anyone have a better solution?

Change
<input type="radio" name="BX_related[]" id="BX_related" value="" required>
to
<input type="radio" name="BX_related[]" class="BX_related" value="" required></td>
Also in addRow function , instead of
var radioB = document.getElementById(BX_related);
use
var radioB = document.getElementsByClassName('BX_related);
Thats it!!

Related

Dynamically creating objects with class property

I am creating a form where the user can dynamically add rows. Everything works fine except one thing: I cannot add class to certain input element created by the user:
This is how I add rows:
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[1].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;
}
}
}
(Courtesy of this site)
Form:
<TABLE id="dataTable" width="350px" border="1" class="plantable">
<TR>
<TH></TH>
<TH>From</TH>
<TH>To</TH>
<TH>When</TH>
</TR>
<TR>
<TD><INPUT type="checkbox" name="chk[]"/></TD>
<TD><INPUT type="text" name="from[]"/></TD>
<TD><INPUT type="text" name="to[]"/></TD>
<TD><INPUT type="text" name="when[]" class="datepicker"/></TD>
</TR>
</TABLE>
<br/>
<INPUT type="button" value="Add Row" onclick="addRow('dataTable')" class="add_remove_row" />
Here I gave an class="datepicker" to the when named input box. But the next rows do not have this property.
If that matters, by click on that input object, I open a datepicker with the help of this site. When I click the when named input box in the rows I dynamically create, the datepicker does not show hence it does not inherit the class property. It works fine for the first row which is not dynamically created.
How do I add the class to the element?

How to edit and delete the row in Javascript?

When I click table row, that row value will display the below text box, then I click + button to copy the first row values and insert new row and place value correctly.
When I click edit button # that value again place to first row. How to find that row index. How to get the particular ID?
<script>
function insRow()
{
var x=document.getElementById('scrolltable');
var new_row = x.rows[1].cloneNode(true);
var len = x.rows.length;
var code=document.getElementById('code').value;
var product=document.getElementById('product_name').value;
var qty=document.getElementById('quantity').value;
var rate=document.getElementById('amount').value;
var amount=document.getElementById('total').value;
var inp1 = new_row.cells[0].getElementsByTagName('input')[0];
inp1.id += len;
inp1.value = code;
var inp2 = new_row.cells[1].getElementsByTagName('input')[0];
inp2.id += len;
inp2.value = product;
var inp3 = new_row.cells[2].getElementsByTagName('input')[0];
inp3.id += len;
inp3.value = qty;
var inp4 = new_row.cells[3].getElementsByTagName('input')[0];
inp4.id += len;
inp4.value = rate;
var inp5 = new_row.cells[4].getElementsByTagName('input')[0];
inp5.id += len;
inp5.value = amount;
var button = new_row.cells[5].getElementsByTagName('input')[0];
button.value = "#";
button.onclick = function(it) {editRow(it)};
//cell4.appendChild(inp4);
x.appendChild( new_row );
document.getElementById('code').value='';
document.getElementById('product_name').value='';
document.getElementById('quantity').value='';
document.getElementById('amount').value='';
document.getElementById('total').value='';
document.getElementById('code').focus();
}
function deleteRow(row)
{
r=row.parentNode.parentNode;
r.parentNode.removeChild(r);
}
function editRow(evt) {
var x=document.getElementById('scrolltable');
//var l1 = evt.target.parentNode.parentNode;
//alert(l1);
var errorList = "";
var l=x.rows.length;
//var l=x.rowsIndex;
var y=l-1;
alert(l);
//alert("code"+y);
var code=document.getElementById('code'+y).value;
var product=document.getElementById('product_name'+y).value;
var qty=document.getElementById('quantity'+y).value;
var rate=document.getElementById('amount'+y).value;
var amount=document.getElementById('total'+y).value;
document.getElementById('code').value=code;
document.getElementById('product_name').value=product;
document.getElementById('quantity').value=qty;
document.getElementById('amount').value=rate;
document.getElementById('total').value=amount;
var i = evt.target.parentNode.parentNode.rowIndex;
document.getElementById('scrolltable').deleteRow(i);
}
</script>
My HTML code is:
<table class="table table-striped table-bordered dTableR" id="scrolltable">
<thead>
<tr>
<th width="10%">Code</th>
<th width="40%">Product</th>
<th width="10%">Total Qty</th>
<th width="10%">Rate</th>
<th width="12%">Amount</th>
<th width="10%">Action</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" name="code" class="span10" id="code" /></td>
<td><input type="text" name="product_name" class="span12" id="product_name" /></td>
<td><input type="text" name="quantity" class="span10" onBlur="calculate(this.value)" id="quantity" maxlength="8"/></td>
<td><input type="text" name="amount_name" class="span10" id="amount" /></td>
<td><input type="text" name="total_name" class="span10" id="total" maxlength="8" /></td>
<td><input type="button" id="addmorePOIbutton" style="width:25px;" value="+" onClick="insRow()"/>
<input type="button" id="delPOIbutton" style="width:25px;" value="-" onClick="deleteRow(this)"/></td>
</tr>
</tbody>
You can use jQuery for edit function :
First change
button.onclick = function(it) {editRow(it)};
to
button.onclick = function() {editRow(this)};
and change below function
function editRow(evt)
{
var $tr = $(evt).parents('tr'); // get parent tr
// put all values in top row
$('#code').val($tr.find('input[id^=code]').val());
$('#product_name').val($tr.find('input[id^=product_name]').val());
$('#quantity').val($tr.find('input[id^=quantity]').val());
$('#amount').val($tr.find('input[id^=amount]').val());
$('#total').val($tr.find('input[id^=total]').val());
// remove clicked tr
$tr.remove();
}
Working jsfiddle
Note : Please add jQuery js file to your html page.
since you are using jquery(as you have tagged this question with jquery), you can use index() function form jquery (http://api.jquery.com/index/).
Here is an updated (http://jsfiddle.net/6yXMF/) jsfiddle.
Which alerts index of the tr from which the input button is clicked.
Currently there are some issues in insertion and deletion or rows in your code. After resolving the issues you just can use the index function as demoed in
insRow() function.
Let me know if you have any queries.

Real-time calculation of total in dynamic form

This issue has probably a very simple solution, but as a beginner in Javascript, I can't find the solution after trying different possibilities.
So I have a form where people can reserve tickets at 6 or 10 Euros. Each line is a person. The user can add up to 5 people.
I wish to let the user see the total amount, depending of the ticket choice and the number of persons.
This is what I have:
HTML:
<form id="totaalBerekening" method="POST" action="example.php" role="form">
<table id="dataTable" class="form">
<tbody>
<tr>
<p>
<td><input type="checkbox" required="required" name="chkbox[]" checked="checked" /></td>
<td>
<label>Voornaam</label>
<input type="text" required="required" name="vn[]">
</td>
<td>
<label>Naam</label>
<input type="text" required="required" name="naam[]">
</td>
<td>
<label>E-mail</label>
<input type="email" required="required" name="email[]">
</td>
<td>
<label>Telefoon</label>
<input type="text" required="required" name="tel[]">
</td>
<td>
<label>Type</label>
<select id="leeftijd" name="leeftijd[]" onchange="calculateTotal">
<option value="kind">Kind -12j (€ 6,00)</option>
<option value="volw">Volwassene (€ 10,00)</option>
</select>
</td>
<td>
<label>Shift</label>
<select name="shift[]">
<option value="shift1">11u30 - 13u00</option>
<option value="shift2">13u - 14u30</option>
</select>
</td>
<td><a class="kruisje" onClick="deleteRow('dataTable')">X</a></td>
</p>
</tr>
</tbody>
</table>
<p>Total price: <div id="totaalPrijs"></div></p>
<p>
<a type="button" class="simplebtn" onClick="addRow('dataTable')">Voeg nog een persoon toe</a>
</p>
<div class="clear"></div>
<input type="submit" class="submit" value="Bestel nu" />
</form>
Javascript:
<script>
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
if(rowCount < 5){ // limit the user from creating fields more than your limits
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;
}
}else{
alert("Opgelet, het maximum aantal tickets per persoon is 5.");
}
}
function deleteRow(tableID) {
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) { // limit the user from removing all the fields
alert("Opgelet, je kan niet alle personen verwijderen.");
break;
}
table.deleteRow(i);
rowCount--;
i--;
}
}
}
var leeftijdPrijs = new Array();
leeftijdPrijs["kind"]=6;
leeftijdPrijs["volw"]=10;
function getLunchPrice()
{
var lunchPrice=0;
var theForm = document.forms["totaalBerekening"];
var selectedLeeftijd = theForm.elements["leeftijd"];
lunchPrice = leeftijdPrijs[selectedLeeftijd.value];
return lunchPrice;
}
function calculateTotal()
{
var totaalPrijs = getLunchPrice();
var divobj = document.getElementById('totaalPrijs');
divobj.style.display='block';
divobj.innerHTML = "Total Price For the lunch $"+totaalPrijs;
}
</script>
I don't get an output on <div id="totaalPrijs">. What am I doing wrong?
I appreciate your help. Thanks in advance.
You forgot to put () at: onchange="calculateTotal()", so the function is never called. With that change, the total is shown when the user modify the "leeftijd" select box.
To compute total:
function getLunchPrice() {
var lunchPrice=0;
var theForm = document.forms["totaalBerekening"];
var selectedLeeftijd = theForm.elements;
for (var i=0; i < selectedLeeftijd.length; i++) {
var field = selectedLeeftijd[i];
if (field.name == "leeftijd[]") lunchPrice += leeftijdPrijs[field.value];
}
return lunchPrice;
}
Then add two calls to calculateTotal(): one in the addRow() function, another when the page is loaded, eventually nicer identifiers for the fields ;-)

Deleting HTML tables rows

I know there are like thousands of answers on Stack Overflow about this specific topic, but I have been reading them for 3 days and nights already trying to apply solutions to my code with no success.
The problem is that addRow works fine, but DeleteRow doesn't work at all.
Here is my HTML:
<input type="button" value="add" onClick="addRow('dataTable')" />
<input type="button" value="delete" onclick="deleteRow(this)"/>
<p></p>
</p>
</table>
<table id="dataTable" class="cv" border="1">
<tr>
<td>
<input type="text" style="width:100%" placeholder="ievadiet valodu">
</td>
<td>
<select id="BX_gender" name="BX_gender" required="required">
<option>dzimtā valoda</option>
<option>teicami</option>
<option>labi</option>
<option>viduvēji</option>
<option>pamatzināšanas</option>
</select>
</td>
<td>
<select id="BX_gender" name="BX_gender" required="required">
<option>teicami</option>
<option>labi</option>
<option>viduvēji</option>
<option>pamatzināšanas</option>
</select>
</td>
<td>
<select id="BX_gender" name="BX_gender" required="required">
<option>teicami</option>
<option>labi</option>
<option>viduvēji</option>
<option>pamatzināšanas</option>
</select>
</td>
</tr>
</table>
<div class="clear"></div>
</fieldset>
javascript:
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
if (rowCount < 5) {
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;
}
} else {
alert("Maksimālais ierakstu skaits ir 7.");
}
}
function DeleteRow(o) {
//no clue what to put here?
var p = o.parentNode.parentNode;
p.parentNode.removeChild(p);
}
Here is a fiddle with code working (only the addRow function): http://jsfiddle.net/7AeDQ/690/
Assuming you want to delete the last row, you can use something like this
function deleteRow() {
var table = document.getElementById("dataTable");
var tbody = table.tBodies[0];
tbody.removeChild(tbody.lastChild);
}
Updated fiddle here
Using something like this, you don't need to traverse the DOM using parentNode.parentNode...

JavaScript Get the child id

I'm trying to add new row to table which is look's like this:
<table class="table table-striped">
<tbody id="dconTable">
<th><input type="text" class="span12" id="lbld"></th>
<th><input type="text" class="span12" id="edizmd"></th>
<th><input type="text" class="span12" id="idd"></th>
<th><input type="text" class="span12" id="ad"></th>
<th><input type="text" class="span12" id="bd"></th>
<th><input type="text" class="span12" id="en_spard"></th>
<th><input type="text" class="span12" id="spard"></th>
<th><input type="text" class="span12" id="en_periodd"></th>
<th><input type="text" class="span12" id="periodd"></th>
</tbody>
</table>
I using script which I found on the internet. And I want him also write id's in new cells (like id="lbld_1" etc). Here 's the code.
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++) {
colName = table.rows[0].cells[i].parentNode.children[1].getAttribute('id') +"_"+ i;
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[0].cells[i].innerHTML;
newcell.childNodes[0].value = "";
newcell.parentNode.children[1].setAttribute('id',colName);
colName = "";
}
};
Console says:
Uncaught TypeError: Cannot call method 'setAttribute' of undefined
Show me my mistake, please. Thanks.
Your code doesn't make any sense to me:
table.rows[0].cells[i].parentNode.children[1];
//===
table.rows[0].cells[1];
cells are children of rows, so get the parentNode of a row, and it'll return a row, get one of its children and you're back at the level of the cells (if you're lucky! - some browsers will include whitespace, or comments in the nodelist).Besides, if you need an id, just anElem.id will do, getAttribute() is a bit much.
So this would be what you're trying to do:
colName = table.rows[0].cells[i].id;
newcell.id = colName;
But that's creating multiple elements with the same ID, which is impossible. In real life, if someone else had my ID, I'd have a problem. Same logic applies to ID's in the DOM: they are unique! So try:
colName = table.rows[0].cells[i].id.split('_')[0];
newcell.id = colName+'_'+i;
Lastly, you don't seem to be appending your elements, so add table.rows[0].appendChild(newCell);, too

Categories