how to add array values in text box

how to add array values in text box - javascript

I have three text box that given as an array, I want to add two text box and get a result in the third text box as shown in below.
<tbody>
<?php
$i=1;
foreach ($sub as $row)
{
?>
<tr>
<td><?php echo $i++;?>
</td>
<td> <div><span style="border: none;"><input type="text" name="subject[]" class="textbox" value="<?php echo $row->subject_name;?>"></span></div></td>
<td><input type="text" name="mark-1[]" value="" id="mark1"></td>
<td><input type="text" name="mark-2[]" value="" id="mark2"></td>
<td><input type="text" name="total-mark[]" value="" id="totmark" onclick="add_number()"></td>
</tr>
<?php } ?>
<tr>
<th colspan="4">Total Mark</th>
<td></td></tr>
</tbody>
i have used the below script and its running but getting a result in the first loop
<script type="text/javascript">
function add_number() {
var first_number = parseInt(document.getElementById("mark1").value);
var second_number = parseInt(document.getElementById("mark2").value);
var result = first_number + second_number;
document.getElementById("totmark").value = result;
}
</script>
please help us get an answer

html
<tbody>
<?php
$i=1;
$k=1;
foreach ($sub as $row)
{ $k++;
?>
<tr>
<td><?php echo $i++;?>
</td>
<td> <div><span style="border: none;"><input type="text" name="subject[]" class="textbox" value="<?php echo $row->subject_name;?>"></span></div></td>
<td><input type="text" name="mark-1[]" value="" id="mark1-<?php echo $k;?>"></td>
<td><input type="text" name="mark-2[]" value="" id="mark2-<?php echo $k;?>"></td>
<td><input type="text" name="total-mark[]" value="" id="totmark-<?php echo $k;?>" onclick="add_number(<?php echo $k;?>)"></td>
</tr>
<?php } ?>
<tr>
<th colspan="4">Total Mark</th>
<td></td></tr>
</tbody>
Script
<script type="text/javascript">
function add_number(k) {
var first_number = parseInt(document.getElementById("mark1-"+k).value);
var second_number = parseInt(document.getElementById("mark2-"+k).value);
var result = first_number + second_number;
document.getElementById("totmark-"+k).value = result;
}
</script>

The problem is the repeated IDs for each iteration, mark1, mar2, mark1, mark2, and so on. The function getElementById is returning the first element.
An alternative is to use the function closest('tr') and then find by name [name="mark-1[]"] and [name="mark-2[]"]. Then find the field to store the result using this .querySelector('[name="total-mark[]"]').
Finally, using the function addEventListener you can bind the event click to the whole set of elements [name="total-mark[]"].
document.querySelectorAll('[name="total-mark[]"]').forEach(function(elem) {
elem.addEventListener('click', add_number);
});
function add_number() {
var tr = this.closest('tr');
var first_number = tr.querySelector('[name="mark-1[]"]').value;
var second_number = tr.querySelector('[name="mark-2[]"]').value;
var result = Number(first_number) + Number(second_number);
this.value = result;
}
<table>
<tbody>
<tr>
<td><input type="text" name="mark-1[]" value="" ></td>
<td><input type="text" name="mark-2[]" value="" ></td>
<td><input type="text" name="total-mark[]" value="" placeholder='click to totalize'></td>
</tr>
<tr>
<td><input type="text" name="mark-1[]" value="" ></td>
<td><input type="text" name="mark-2[]" value="" ></td>
<td><input type="text" name="total-mark[]" value="" placeholder='click to totalize'></td>
</tr>
</tbody>
</table>
A recommendation is using the current index from the PHP variable $i and add specific IDs to every field, that way you will be able to get the elements directly. For example, the two fields would have these IDs: mark-1-1[], mark-1-2[] and mark-2-1[], mark-2-2[], and so on.
This approach uses the attribute dataset.
document.querySelectorAll('[name="total-mark[]"]').forEach(function(elem) {
elem.addEventListener('click', add_number);
});
function add_number() {
var field = this.dataset.field;
var first_number = document.getElementById('mark-1-' + field + '[]').value;
var second_number = document.getElementById('mark-2-' + field + '[]').value;
var result = Number(first_number) + Number(second_number);
this.value = result;
}
<table>
<tbody>
<tr>
<td><input type="text" id="mark-1-1[]" value="" ></td>
<td><input type="text" id="mark-2-1[]" value="" ></td>
<td><input type="text" data-field='1' name="total-mark[]" value="" placeholder='click to totalize'></td>
</tr>
<tr>
<td><input type="text" id="mark-1-2[]" value="" ></td>
<td><input type="text" id="mark-2-2[]" value="" ></td>
<td><input type="text" data-field='2' name="total-mark[]" value="" placeholder='click to totalize'></td>
</tr>
</tbody>
</table>

Related

Dropdown menu with .change function is not working with new dynamically added field

So I had this html code:
<div class="col-md-12 pad-bottom">
<table id="paymentdynamic" class="table">
<thead>
<th>Fee Type</th>
<th>Amount</th>
<th>Specific Balance</th>
<th>Account Balance</th>
<th></th>
<th><button type="button" name="add_input" id="add_input" class="btn btn-primary"> Add </button></th>
</thead>
<tbody>
<tr>
<td>
<select class="form-control" name="feetype[]" id="feetype">
<option></option>
<option>Tuition Fee</option>
<option>Miscellaneous Fee</option>
<option>Computer Fee</option>
<option>Aircon Fee</option>
<option>Book Fee</option>s
</select>
</td>
<td><input type="text" class="form-control" name="feeamount[]" id="feeamount" oninput="getBalance();"></td>
<td><input type="text" class="form-control" name="feebalance[]" id="feebalance" readonly></td>
<td><input type="text" class="form-control" name="accountbalance[]" id="accountbalance" readonly></td>
<td><input type="hidden" class="form-control" name="hiddenspecbalance[]" id="hiddenspecbalance" readonly></td>
<td></td>
<td><input type="hidden" class="form-control" name="hiddenaccbalance[]" id="hiddenaccbalance" readonly></td>
</tr>
</tbody>
</table>
</div>
and now I have this script
<script>
$('#feetype').change(function(){
var selected = $(this).val();
var stud_id = $('#stud_id').val();
$.ajax({
type:'GET',
data:{selected:selected, stud_id:stud_id},
url:'getspecificbalance.php',
success:function(data)
{
$('#feebalance').val(data);
}
});
});
var i=1;
$('#add_input').click(function(){
i++;
$('#paymentdynamic').append('<tr id="row'+i+'"> <td><select class="form-control" name="feetype[]" id="feetype"> <option></option> <option>Tuition Fee</option> <option>Miscellaneous Fee</option> <option>Computer Fee</option> <option>Aircon Fee</option> <option>Book Fee</option>s </select></td> <td><input type="text" class="form-control" name="feeamount[]" id="feeamount" oninput="getBalance();"></td> <td><input type="text" class="form-control" name="feebalance[]" id="feebalance" readonly></td> <td><input type="text" class="form-control" name="accountbalance[]" id="accountbalance" readonly></td> <td><input type="hidden" class="form-control" name="hiddenspecbalance[]" id="hiddenspecbalance" readonly></td> <td><button type="button" name="remove" id="'+i+'" class="btn btn-primary"> x </button></td> <td><input type="hidden" class="form-control" name="hiddenaccbalance[]" id="hiddenaccbalance" readonly></td> </tr>');
});
$(document).on('click', '.btn-primary', function(){
var button_id = $(this).attr("id");
$('#row'+button_id+'').remove();
});
</script>
and this is my PHP code for getspecificbalance.php in the ajax.
<?php
include '../../connect.php';
if(isset($_GET['stud_id'], $_GET['selected']))
{
$feetype = $_GET['selected'];
$stud_id = $_GET['stud_id'];
$sql = "SELECT * FROM tbl_account_management WHERE stud_id='$stud_id' AND transac_description='$feetype' ORDER BY transaction_id DESC LIMIT 1";
$result = mysqli_query($con, $sql);
while($row = mysqli_fetch_assoc($result)) {
$tuition_fee = $row['tuition_fee'];
$misc_fee = $row['misc_fee'];
$comp_fee = $row['comp_fee'];
$aircon_fee = $row['aircon_fee'];
$book_fee = $row['book_fee'];
}
if ($feetype == 'Tuition Fee')
{
echo $tuition_fee;
}
else if ($feetype == 'Miscellaneous Fee')
{
echo $misc_fee;
}
else if ($feetype == 'Computer Fee')
{
echo $comp_fee;
}
else if ($feetype == 'Aircon Fee')
{
echo $aircon_fee;
}
else if ($feetype == 'Book Fee')
{
echo $book_fee;
}
else
{
echo 0;
}
}
?>
My question is this. The onchange function only works in the fields that is already coded in the main php page. When I add a dynamic field the new drop down menu with on change function isnt working anymore and not showing any balance in the fee balance anymore.
The form looks like this:

How to generate grand total dynamically using javascript

here i want to create dynamically grand total. i got total of price and quantity. but i cant get grand total to total, so kindly request to solve this, here i have to use php for loop for ten row
function myFunction(time,v) {
var p="price"+time;
var d="demo"+time;
var y = document.getElementById(p).value;
var z = v;
var ans=y*z;
document.getElementById(d).value = ans;
}
function my(time,ans) {
//alert('You have not Login !!');
var p="demo"+time;
var y = document.getElementById(p).value;
//var z=y+ans;
document.getElementById("total").innerHTML = ans;
}
<table>
<?php
$i=0;
while($i<=10)
{
?>
<tr>
<td> <input id="price<?php echo $i; ?>" type="text" readonly value="5"></td>
<td><input id="qty" type="number" value="0" onChange="myFunction(<?php echo $i; ?>,this.value)" ></td>
<td><input id="demo<?php echo $i; ?>" type="text" value="0" onChange="my(<?php echo $i; ?>,this.value)" >
</td>
</tr>
<?php
$i++;
}?>
<h4> Total :- <span id = "total"></span></h4>
</table>

Store your Total count globaly, and Get all elements of your "demo" by querySelector and then calculate them.
Check snippest.
var _mytotal=0;
function _Function1(time,v)
{
var p="price"+time;
var d="demo"+time;
var y = document.getElementById(p).value;
var z = v;
var ans=y*z;
document.getElementById(d).value = ans;
_mytotal=0;
_Function2();
}
function _Function2()
{
var demos = document.querySelectorAll('*[id^="demo"]');
demos.forEach(_FunctionTotal);
}
function _FunctionTotal(item)
{
_mytotal = +_mytotal + +document.getElementById(item.id).value;
document.getElementById("total").textContent = _mytotal;
}
<table>
<tr>
<th>Price</th>
<th>Quantity</th>
<th>Total</th>
</tr>
<tr>
<td><input id="price0" type="text" readonly value="5"></td>
<td><input id="qty" type="number" value="0" onChange="_Function1(0,this.value)" ></td>
<td><input id="demo0" type="text" readonly value="0" ></td>
</tr>
<tr>
<td><input id="price1" type="text" readonly value="5"></td>
<td><input id="qty" type="number" value="0" onChange="_Function1(1,this.value)" ></td>
<td><input id="demo1" type="text" readonly value="0" ></td>
</tr>
<tr>
<td><input id="price2" type="text" readonly value="5"></td>
<td><input id="qty" type="number" value="0" onChange="_Function1(2,this.value)" ></td>
<td><input id="demo2" type="text" readonly value="0" ></td>
</tr>
<tr>
<td><input id="price3" type="text" readonly value="5"></td>
<td><input id="qty" type="number" value="0" onChange="_Function1(3,this.value)" ></td>
<td><input id="demo3" type="text" readonly value="0" ></td>
</tr>
<tr>
<td><input id="price4" type="text" readonly value="5"></td>
<td><input id="qty" type="number" value="0" onChange="_Function1(4,this.value)" ></td>
<td><input id="demo4" type="text" readonly value="0" ></td>
</tr>
<tr>
<td><h4>Grand Total</h4></td>
<td> </td>
<td><h4><span id = "total"></span></h4></td>
</tr>
</table>

jquery calculate on dynamically added rows

I`ve dynamiclally added rows, and i want to auto calculate values on it.
Here are part of my code:
<table id="itemsTable" class="general-table">
<thead>
<tr>
<th></th>
<th>Код на продукт</th>
<th>Описание</th>
<th>Брой</th>
<th>Цена</th>
</tr>
</thead>
<tbody>
<tr class="item-row">
<td></td>
<td><input name="itemCode[]" value="" class="tInput" id="itemCode" tabindex="1" /> </td>
<td><input name="itemDesc[]" value="" class="tInput" id="itemDesc" readonly="readonly" /></td>
<td><input name="itemQty[]" value="" class="tInput" id="itemQty" tabindex="2"/></td>
<td><input name="itemPrice[]" value="" class="tInput" id="itemPrice" readonly="readonly" /> </td>
</tr>
</tbody>
</table>
<span> <img src="images/icon-plus.png" alt="Add" title="Add Row" /> Добави ред</span>
<div style="float: right; width: 100px;">
<div id="container">Общо: <span style="clear:both;" id="added"></span><br></div>
</div>
And jquery
$('input').keyup(function(){ // run anytime the value changes
var firstValue = parseFloat($('#itemQty').val()); // get value of field
var secondValue = parseFloat($('#itemPrice').val()); //
$('#added').html(firstValue * secondValue); // add them and output it
});
The problem is that that script calculate only the first row.

You have repeated IDs in your webpage. And whenever you will use repeated IDs it will always treated for the first Element. So, you have to make dynamic ids for this purpose:
Making HTML with PHP:
<table id="itemsTable" class="general-table">
<thead>
<tr>
<th></th>
<th>Код на продукт</th>
<th>Описание</th>
<th>Брой</th>
<th>Цена</th>
</tr>
</thead>
<tbody>
<?php
foreach( $yourArray as $key=>$item){}
?>
<tr class="item-row">
<td></td>
<td><input name="itemCode[]" value="" class="tInput" id="itemCode_<?php echo $key;?>" tabindex="1" /> </td>
<td><input name="itemDesc[]" value="" class="tInput" id="itemDesc_<?php echo $key;?>" readonly="readonly" /></td>
<td><input name="itemQty[]" value="" class="tInput" id="itemQty_<?php echo $key;?>" tabindex="2"/></td>
<td><input name="itemPrice[]" value="" class="tInput" id="itemPrice_<?php echo $key;?>" readonly="readonly" /> </td>
</tr>
<?php
}
?>
</tbody>
</table>
<span> <img src="images/icon-plus.png" alt="Add" title="Add Row" /> Добави ред</span>
<div style="float: right; width: 100px;">
<div id="container">Общо: <span style="clear:both;" id="added"></span><br></div>
</div>
Javascirpt/JQuery:
$(document).ready(function(){
$('input').keyup(function(){ // run anytime the value changes
// getting parent TR of current Input
var parent_tr = $(this).closest('tr');
//gettting parent TR's child input named as 'itemQty[]'
var firstValue = parseFloat($("input[name='itemQty[]']", parent_tr).val()); // get value of field
//gettting parent TR's child input named as 'itemPrice[]'
var secondValue = parseFloat($("input[name='itemPrice[]']", parent_tr).val()); //
$('#added').html(firstValue * secondValue); // add them and output it
});
});
Demo will Static HTML 2 rows: http://jsfiddle.net/Lvjff4ga/

$('input','#itemsTable').change(function(){
var tot = 0;
$('tbody tr','#itemsTable').each(function(){
tot += $('[name=itemQty\[\]]', this).val() * $('[name=itemPrice\[\]]', this).val();
});//each
$('#added').html(tot);
});

How to reflect a calculation from one field to another

I'm very new to JavaScript and I have an assignment that I'm unable to resolve. So I have a table with five fields and I need to calculate the total for a month, then automatically generate the yearly total in a different cell. I got to make the total work for the month but I have no idea how to reflect that in the year cells. Any help will be much appreciated. Thanks a lot for your time :)
Here's my code:
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
function update() {
var a = +document.forms['calc'].elements['fieldOne'].value,
b = +document.forms['calc'].elements['fieldTwo'].value,
c = +document.forms['calc'].elements['fieldThree'].value,
d = +document.forms['calc'].elements['fieldFour'].value,
e = +document.forms['calc'].elements['fieldFive'].value,
fieldTotal = ((b-d)*a)*c;
document.forms['calc'].elements['fieldTotal'].value = fieldTotal;
return false;
}
function update2() {
var f = +document.forms['calc'].elements['field6'].value,
g = +document.forms['calc'].elements['field7'].value,
h = +document.forms['calc'].elements['field8'].value,
i = +document.forms['calc'].elements['fieldFour'].value,
j = +document.forms['calc'].elements['fieldFive*12'].value,
field9=fieldFour;
field10=fieldFive*12;
fieldTotal2=fieldTotal*12;
document.write('fieldTotal2');
document.write('field9');
document.write('field10');
return false;
}
</script>
</head>
<body>
<form name="calc" action="#">
<table width="600" border="1">
<tr>
<td colspan="2"> </td>
<td width="63">Month</td>
<td width="109">Year</td>
</tr>
<tr>
<td colspan="2">Field1</td>
<td><input type="text" name="fieldOne" id="fieldOne" size="15" value="5,000" /></td>
<td><input type="text" name="field6" id="field6" size="15" value="60,000"/></td>
</tr>
<tr>
<td colspan="2">Field2</td>
<td><input type="text" name="fieldTwo" id="fieldTwo" value="3.0" size="15" /></td>
<td><input type="text" name="field7" id="field7" value="3.0" size="15" /></td>
</tr>
<tr>
<td colspan="2">Field3</td>
<td><input type="text" name="fieldThree" id="fieldThree" size="15" value="$350"/></td>
<td><input type="text" name="field8" id="field8" size="15" value="$350"/></td>
</tr>
<tr>
<td colspan="2">Field4</td>
<td><input type="text" name="fieldFour" id="fieldFour" value="1.5" size="15" /></td>
<td><input type="number" name="field9" id="field9" value="1.5" size="15" /></td>
</tr>
<tr>
<td colspan="2">Filed5</td>
<td><input type="text" name="fieldFive" id="fieldFive" size="15" value="75"/></td>
<td><input type="text" name="field10" id="field10" size="15" /></td>
</tr>
<tr>
<td width="137">Total</td>
<td width="83"><input type="button" value="Calculate" onClick="update();return false;" /></td>
<td><input type="text" name="fieldTotal" id="fieldTotal" size="15" readonly /></td>
<td><input type="text" name="fieldTotal2" id="fieldTotal2" size="15" readonly /></td>
</tr>
</table>
</form>
</body>

Based on what you described I think this should work for you.
Demo
function update() {
var frmEles = document.forms.calc.elements,
a = frmEles.fieldOne.value.replace(',',''), //Remove comma
b = frmEles.fieldTwo.value,
c = frmEles.fieldThree.value.replace('$',''), //Remove Dollar sign
d = frmEles.fieldFour.value,
e = frmEles.fieldFive.value,
fieldTotal = ((b-d)*a)*c;
//Total for the month
frmEles.fieldTotal.value = formatNumber(fieldTotal);
//Calculations for the year
frmEles.field6.value = formatNumber(a * 12);
frmEles.field7.value = formatNumber(b * 12);
frmEles.field8.value = '$' + formatNumber(c * 12); //Add back dollar sign
frmEles.field9.value = formatNumber(d * 12);
frmEles.field10.value = formatNumber(e * 12);
frmEles.fieldTotal2.value = formatNumber(fieldTotal * 12);
return false;
}
//Format the numbers with commas.
function formatNumber(n){
return n.toLocaleString();
}

JavaScript code works only in IE

Below is the code which creates a new line of text fields, say if the row has specified 4 text fields, the below code creates additional line same as above when I click the [Add] button.
The following code is working only in IE, it does not work in any other browser:
var delName = "ID=oth4del";
var t = oth4;
t.str = "\r\n <td><table class=\"query\" width=\"100%\">\r\n <tr>\r\n <td><input type=\"text\" name=\"q269r1491i~\" size=\"22\" maxlength=\"50\">\r\n </td>\r\n <td><input type=\"text\" name=\"q270r1447i~\" size=\"22\" maxlength=\"50\">\r\n </td>\r\n <td><input type=\"text\" name=\"q2765r6758i~\" size=\"22\" maxlength=\"50\">\r\n </font></td>\r\n </tr>\r\n </table></td>\r\n ";
t.str = '<table width="100%"><tr chooserroot="true"><td><input type="button" value="Del" onclick="delrow(this)" '+delName+'></td>'+t.str+'</tr></table>';
t.cnt = 1;
document.multis.push(t);
Error I get is this:
TypeError: m.lastChild.insertAdjacentHTML is not a function [Break On
This Error]
m.lastChild.insertAdjacentHTML('beforeBegin', m.str.replace(/~/g,++m.cnt));
Code for Add button:
The following functions get called:
<table align="center"><tr><td><input type="button" value="Add" onclick="addrow(this)" ID="insurance1Add"
></td></tr></table>
document.multis = new Array();
function findparent(e,tn) {
while(e && e.parentNode && e.tagName && e.tagName.toLowerCase()!=tn) e = e.parentNode;
return e;
}
function addrow(b)
{
var m = findparent(b,"div");
m.lastChild.insertAdjacentHTML('beforeBegin', m.str.replace(/~/g,++m.cnt));
}
///////////////////////////////////DEL ROW
function delrow(b)
{
var table = findparent(b,"table");
//var t = findparent(b,"div");
//alert(t.cnt);
//alert(table.cnt);
table.parentNode.removeChild(table);
}
Uncaught TypeError: Object # has no method 'insertAdjacentHTML'
Also I checked again in Chrome and it gave me error on: when addRow is called
HTML generated code:
<DIV ID="Div_Insurance" >
<SPAN id="INSURANCE" style="display:inline;">
<div ID="insurance1"
>
<table border="1%" align="center" width="100%" style="display:none"><tr>
<td><table class="query" width="100%">
<tr>
<td >Type</td>
<td><select name="q2485i~">
<option value="5581">Pharmaceutical</option>
<option value="5582" selected>Long Term Care</option>
<option value="5583">Home Care</option>
<option value="5584">Other</option>
</select>
</td>
<td>Other</td>
<td><input type="text" name="q2764r6757i~" placeholder="Other Infomation" size="22" maxlength="50"></td>
</tr>
<tr>
<td>Name of Insurance</td>
<td><input type="text" name="q2438r5533i~" placeholder="Insurance Name" size="22" maxlength="50">
</td>
<td>Contact Person</td>
<td><input type="text" name="q2439r5534i~" placeholder="Contact Person" size="22" maxlength="50">
</td>
</tr>
<tr>
<td>Address</td>
<td><textarea cols="20" rows="4" maxlength="50" name="q2440r5535i~" placeholder="Address"></textarea>
</td>
<td>Phone</td>
<td><input type="text" name="q2441r5536i~" size="22" maxlength="50" onKeyUp="jm_phonemask(this)" onBlur="wphoneLength(this)"; placeholder="XXX-XXX-XXXX">
</td>
</tr>
<tr>
<td>Fax</td>
<td><input type="text" name="q2442r5537i~" size="22" maxlength="50" onKeyUp="jm_phonemask(this)" onBlur="wphoneLength(this)"; placeholder="XXX-XXX-XXXX">
</td>
<td>Email</td>
<td><input type="text" name="q2443r5538i~" size="22" maxlength="50" placeholder="xyz#xyz.xyz">
</td>
</tr>
</table></td>
</tr></table>
<table align="center"><tr><td><input type="button" value="Add" onclick="addrow(this)" ID="insurance1Add"
></td></tr></table>
</div>
<script>
var delName = "ID=insurance1del";
var t = insurance1;
t.str = "\r\n <td><table class=\"query\" width=\"100%\">\r\n <tr>\r\n <td >Type</td>\r\n <td><select name=\"q2485i~\">\r\n <option value=\"5581\">Pharmaceutical</option>\r\n <option value=\"5582\" selected>Long Term Care</option>\r\n <option value=\"5583\">Home Care</option>\r\n <option value=\"5584\">Other</option>\r\n </select>\r\n </td>\r\n <td>Other</td>\r\n <td><input type=\"text\" name=\"q2764r6757i~\" placeholder=\"Other Infomation\" size=\"22\" maxlength=\"50\"></td>\r\n </tr>\r\n <tr>\r\n <td>Name of Insurance</td>\r\n <td><input type=\"text\" name=\"q2438r5533i~\" placeholder=\"Insurance Name\" size=\"22\" maxlength=\"50\">\r\n </td>\r\n <td>Contact Person</td>\r\n <td><input type=\"text\" name=\"q2439r5534i~\" placeholder=\"Contact Person\" size=\"22\" maxlength=\"50\">\r\n </td>\r\n </tr>\r\n <tr>\r\n <td>Address</td>\r\n <td><textarea cols=\"20\" rows=\"4\" maxlength=\"50\" name=\"q2440r5535i~\" placeholder=\"Address\"></textarea>\r\n </td>\r\n <td>Phone</td>\r\n <td><input type=\"text\" name=\"q2441r5536i~\" size=\"22\" maxlength=\"50\" onKeyUp=\"jm_phonemask(this)\" onBlur=\"wphoneLength(this)\"; placeholder=\"XXX-XXX-XXXX\">\r\n </td>\r\n </tr>\r\n <tr>\r\n <td>Fax</td>\r\n <td><input type=\"text\" name=\"q2442r5537i~\" size=\"22\" maxlength=\"50\" onKeyUp=\"jm_phonemask(this)\" onBlur=\"wphoneLength(this)\"; placeholder=\"XXX-XXX-XXXX\">\r\n </td>\r\n <td>Email</td>\r\n <td><input type=\"text\" name=\"q2443r5538i~\" size=\"22\" maxlength=\"50\" placeholder=\"xyz#xyz.xyz\">\r\n </td>\r\n </tr>\r\n </table></td>\r\n ";
t.str = '<table width="100%"><tr chooserroot="true"><td><input type="button" value="Del" onclick="delrow(this)" '+delName+'></td>'+t.str+'</tr></table>';
t.cnt = 1;
document.multis.push(t);
</script>
</SPAN>
</DIV>

In your addrow() function, do a console.log(m.lastChild) and see what it is.
Check its nodeType. I suspect it is a Text Node (i.e. nodeType = 3).
Since it is a text node, not an Element Node, then of course it wouldn't have the insertAdjacentHTML method.
References:
lastChild: https://developer.mozilla.org/en-US/docs/DOM/Node.lastChild
nodeType: https://developer.mozilla.org/en-US/docs/DOM/Node.nodeType
insertAdjacentHTML: https://developer.mozilla.org/en-US/docs/DOM/element.insertAdjacentHTML
Here's a classic, old-school snippet you might want to keep. After you get the lastChild (or any other flavors), ensure you're working on an Element Node.
function addrow(b) {
var m = findparent(b,"div"),
lastChildElement = m.lastChild;
// the old-school routine
while (lastChildElement && lastChildElement.nodeType !== 1) {
lastChildElement = lastChildElement.previousSibling;
}
if (lastChildElement) {
lastChildElement.insertAdjacentHTML('beforeBegin', m.str.replace(/~/g,++m.cnt));
} else {
// handle this case...
}
}
And as you might have already guessed, the opposite end would involve firstChild and nextSibling.

Develop Reference

JavaScript is the programming language of the Web.

how to add array values in text box - javascript

Related

Dropdown menu with .change function is not working with new dynamically added field

How to generate grand total dynamically using javascript

jquery calculate on dynamically added rows

How to reflect a calculation from one field to another

JavaScript code works only in IE

Categories

Resources