Member Avatar for azegurb

hi all,
I have script that sums all textboxes value from dynamically added row, but still i have problem with the script. below listed two version of script

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<script type="text/javascript">
/*<![CDATA[*/

function addRow()
{
// grab the element, i.e. the table your editing, in this we're calling it
// 'mySampleTable' and it is reffered to in the table further down on the page
// with a unique of id of you guessed it, 'mySampleTable'
var tbl = document.getElementById('mySampleTable');
// grab how many rows are in the table
var lastRow = tbl.rows.length;

// if there's no header row in the table (there should be, code at least one
//manually!), then iteration = lastRow + 1
var iteration = lastRow;
// creates a new row
var row = tbl.insertRow(lastRow);

// left cell
// insert a cell
var cellLeft = row.insertCell(0);
// here we're just using numbering the cell, like anything else you don't
// have to use this, but i've kinda noticed users tend to like them
var textNode = document.createTextNode(iteration);
// takes what we did (create the plain text number) and appends it the cell
// we created in the row we created. NEAT!
cellLeft.appendChild(textNode);

// right cell
// another cell!
var cellRight = row.insertCell(1);
// creating an element this time, specifically an input
var el = document.createElement('input');
// a data type of text
el.type = 'text';
// the name of the element txtRow, and because this is dynamic we also
// append the row number to it, so for example if this is the eigth row
// being created the text box will have the name of txtRow8. super fantastic.
el.name = 'txtRow' + iteration;
// the exact same thing with a unique id
el.id = 'txtRow' + iteration;
// set it to size of 40. setting sizes is good.
el.size = 40;

// same thing as earlier, append our element to our freshly and clean cell
cellRight.appendChild(el);

// select cell
// our last cell!
var cellRightSel = row.insertCell(2);
// create another element, this time a select box
var sel = document.createElement('select');
// name it, once again with an iteration (selRow8 using the example above)
sel.name = 'selRow' + iteration;
// crates options in an array
// the Option() function takes the first parameter of what is being displayed
// from within the drop down, and the second parameter of the value it is carrying over
sel.options[0] = new Option('text zero', 'value0');
sel.options[1] = new Option('text one', 'value1');
sel.options[2] = new Option('text two', 'value2');
// append our new element containing new options to our new cell
cellRightSel.appendChild(sel);
}

function removeRow()
{
// grab the element again!
var tbl = document.getElementById('mySampleTable');
// grab the length!
var lastRow = tbl.rows.length;
// delete the last row if there is more than one row!
if (lastRow > 2) tbl.deleteRow(lastRow - 1);
}
/*]]>*/
</script>

<script type="text/javascript">
/*<![CDATA[*/
function sum(){
 var table=document.getElementById('mySampleTable');
 var rows=table.rows;
 for (var total=0,ip,z0=1;z0<rows.length;z0++){
  ip=document.getElementById('txtRow'+(z0));
  if (ip.value.replace(/\D/g,'')!=''){
   total+=ip.value.replace(/\D/g,'')*1;
  }
 }
 document.getElementById('total').value=total;

}
/*]]>*/
</script>
</head>

<body>
<form action="miro.html" name="eval_edit" method="post" format="html">
<table align="center" width ="75%">
<tr>
<td align = "center">
click add to you know, add a row, and remove to remove a row, and submit to submit your page! whee!
</td>
</tr>
<tr>
<td align = "center">
<!--- very imporant to give the table an id --->
<!--- otherwise it won't know where to edit --->
<table border="1" id="mySampleTable">
<tr>
<td>
Lesson
</td>
<td>
Title
</td>
<td>
Instructor
</td>
</tr>
<tr>
<td>
1
</td>
<td>
<input type="text" name="txtRow1" id="txtRow1" size="40" /></td>
<td>
<select name="selRow0">
<option value="value0">text zero</option>
<option value="value1">text one</option>
<option value="value2">text two</option>
</select>
</td>
</tr>
</table>
 <input id="total" type="text"/>
<!--- our buttons call our javascript functions when clicked --->
<input type="button" value="Add" onclick="addRow();" />
<input type="button" value="Remove" onclick="removeRow();" />
<input type="button" value="SUM" onClick="sum()"/>
<input type="submit" value="Submit" />
</td>
</tr>
</table>
</form>

</body>

</html>

one is this.
and the second is this

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<script type="text/javascript">
/*<![CDATA[*/

function addRow()
{
// grab the element, i.e. the table your editing, in this we're calling it
// 'mySampleTable' and it is reffered to in the table further down on the page
// with a unique of id of you guessed it, 'mySampleTable'
var tbl = document.getElementById('mySampleTable');
// grab how many rows are in the table
var lastRow = tbl.rows.length;

// if there's no header row in the table (there should be, code at least one
//manually!), then iteration = lastRow + 1
var iteration = lastRow;
// creates a new row
var row = tbl.insertRow(lastRow);

// left cell
// insert a cell
var cellLeft = row.insertCell(0);
// here we're just using numbering the cell, like anything else you don't
// have to use this, but i've kinda noticed users tend to like them
var textNode = document.createTextNode(iteration);
// takes what we did (create the plain text number) and appends it the cell
// we created in the row we created. NEAT!
cellLeft.appendChild(textNode);

// right cell
// another cell!
var cellRight = row.insertCell(1);
// creating an element this time, specifically an input
var el = document.createElement('input');
// a data type of text
el.type = 'text';
// the name of the element txtRow, and because this is dynamic we also
// append the row number to it, so for example if this is the eigth row
// being created the text box will have the name of txtRow8. super fantastic.
el.name = 'txtRow' + iteration;
// the exact same thing with a unique id
el.id = 'txtRow' + iteration;
// set it to size of 40. setting sizes is good.
el.size = 40;

// same thing as earlier, append our element to our freshly and clean cell
cellRight.appendChild(el);

// select cell
// our last cell!
var cellRightSel = row.insertCell(2);
// create another element, this time a select box
var sel = document.createElement('select');
// name it, once again with an iteration (selRow8 using the example above)
sel.name = 'selRow' + iteration;
// crates options in an array
// the Option() function takes the first parameter of what is being displayed
// from within the drop down, and the second parameter of the value it is carrying over
sel.options[0] = new Option('text zero', 'value0');
sel.options[1] = new Option('text one', 'value1');
sel.options[2] = new Option('text two', 'value2');
// append our new element containing new options to our new cell
cellRightSel.appendChild(sel);
}

function removeRow()
{
// grab the element again!
var tbl = document.getElementById('mySampleTable');
// grab the length!
var lastRow = tbl.rows.length;
// delete the last row if there is more than one row!
if (lastRow > 2) tbl.deleteRow(lastRow - 1);
}
/*]]>*/
</script>

<script type="text/javascript">
/*<![CDATA[*/
function sum(){
 var table=document.getElementById('mySampleTable');
 var rows=table.rows;
 for (var total=0,ip,z0=0;z0<rows.length;z0++){
  ip=document.getElementById('txtRow'+(z0+1));
  if (ip&&ip.value.replace(/\D/g,'')!=''){
   total+=ip.value.replace(/\D/g,'')*1;
  }
 }
 document.getElementById('total').value=total;

}
/*]]>*/
</script>
</head>

<body>
<form action="miro.html" name="eval_edit" method="post" format="html">
<table align="center" width ="75%">
<tr>
<td align = "center">
click add to you know, add a row, and remove to remove a row, and submit to submit your page! whee!
</td>
</tr>
<tr>
<td align = "center">
<!--- very imporant to give the table an id --->
<!--- otherwise it won't know where to edit --->
<table border="1" id="mySampleTable">
<tr>
<td>
Lesson
</td>
<td>
Title
</td>
<td>
Instructor
</td>
</tr>
<tr>
<td>
1
</td>
<td>
<input type="text" name="txtRow1" id="txtRow1" size="40" /></td>
<td>
<select name="selRow0">
<option value="value0">text zero</option>
<option value="value1">text one</option>
<option value="value2">text two</option>
</select>
</td>
</tr>
</table>
 <input id="total" type="text"/>
<!--- our buttons call our javascript functions when clicked --->
<input type="button" value="Add" onclick="addRow();" />
<input type="button" value="Remove" onclick="removeRow();" />
<input type="button" value="SUM" onClick="sum()"/>
<input type="submit" value="Submit" />
</td>
</tr>
</table>
</form>

</body>

</html>

Here notice that if

z0

variable starts its value from zero then it needed to write conditional function like that

if (ip&&ip.value.replace(/\D/g,'')!=''){
   total+=ip.value.replace(/\D/g,'')*1;
  }

else if

z0

starts its value from 1 its not needed actually to check both

ip

and

ip.value

property

Who can explain me why needed to check both object and its value if it starts from zero.
I will wait for your responces. thanks in advance

  • 2 Contributors
  • 6 Replies
  • 291 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Airshow
Member Avatar for Airshow

Hi Aze,

If I understand the question correctly ...

The condition if (ip && ip.value.replace(/\D/g,'')!='') exploits the "protective" characteristic of logical operartor && . && protects its right argument by not testing it and returning false immediately if the left argument is falsy.

This is safe coding and good practice even if you feel certain that ip will always be valid.

Without this protection, if ip was null , not defined or did not have a value property, then ip.value.replace(/\D/g,'') would throw an error.

Airshow

Edited by Airshow because: n/a
Member Avatar for azegurb

Thank you very much for help. But if z0=0 were like that

ip=document.getElementById('txtRow'+(z0));

then ip variable will equal=txtRow0

then it requres like that

if (ip&&ip.value.replace(/\D/g,'')!=''){   total+=ip.value.replace(/\D/g,'')*1;  }

else
z0=1
then
ip=variable will equal=txtRow1

in this case
it doesn strictly require like below

if (ip&&ip.value.replace(/\D/g,'')!=''){   total+=ip.value.replace(/\D/g,'')*1;  }

it is enough
to write like that

if (ip.value.replace(/\D/g,'')!=''){   total+=ip.value.replace(/\D/g,'')*1;  }

I dont know what happans if z0=0
Thanks again for attention

Member Avatar for Airshow

Aze,

If z0==0 , then document.getElementById('txtRow'+(z0)); is equivalent to document.getElementById('txtRow0'); which will return a DOM node or null depending on whether an element with id="txtRow0" is found or not found.

The test if (ip && ip.value.replace(/\D/g,'')!='') is appropriate because of the possibility that ip might, under some condition or other, be null .

Safe code does no harm.

Airshow

Edited by Airshow because: n/a
Member Avatar for azegurb

so you want to say that checking both ip and ip.value will return true?

Member Avatar for azegurb

Aze,

If z0==0 , then document.getElementById('txtRow'+(z0)); is equivalent to document.getElementById('txtRow0'); which will return a DOM node or null depending on whether an element with id="txtRow0" is found or not found.

The test if (ip && ip.value.replace(/\D/g,'')!='') is appropriate because of the possibility that ip might, under some condition or other, be null .

Safe code does no harm.

Airshow

Are there any tutorials about only this? or this a trick?
Thanks againg

Member Avatar for Airshow

Aze,

It's not a trick, it's a feature of javascript, as in most (all?) C-like languages.

Code of this kind runs in millions of web pages every minute of the day.

Airshow

Edited by Airshow because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.