JavaScript function not working for newly added row by java script

ashwinganorkar

I am new with java script.
When I click on insert values in table then java scripts works but, when I click on Add Row then new row creates. When I start inserting value in new row then java script wont work?

Please help me





<html>
      <head>
	<title>A</title>
        <link href="stylesheets/public.css" media="all" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">
   <h1>A</h1>

</div>
<div id="main"><table id="structure">
     <script language="Javascript" type="text/javascript">
function validateForm()
{
var x=document.forms["myForm"]["email_address"].value;
var atpos=x.indexOf("@");
var dotpos=x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
  {
  alert("Not a valid e-mail address");
  document.forms["myForm"]["email_address"].focus();
  return false;
  }
}

function Validation()
{
var a = document.myForm.mobile_no.value;
if(a=="")
{
alert("please Enter the Contact Number");
document.myForm.mobile_no.focus();
return false;
}
if(isNaN(a))
{
alert("Enter the valid Mobile Number(Like : 9566137117)");
document.myForm.mobile_no.focus();
return false;
}
if((a.length < 10) || (a.length > 10))
{
alert(" Your Mobile Number must be 1 to 10 Integers");
document.form.phone.select();
return false;
}
}
 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 disc_per() {

	 rate = document.myForm.rate.value;
	 disc = document.myForm.dis.value;
	 rate = Number (rate)
	 disc = Number (disc)
         outp = disc / rate * 100;
	 document.myForm.dis_per.value = outp;
       }

       function exii_per() {

	 rate = document.myForm.rate.value;
	 exi = document.myForm.exi.value;
	 rate = Number (rate)
	 exi = Number (exi)
         outp = exi / rate * 100;
	 document.myForm.exi_per.value = outp;
       }
         function taxx_per() {

	 rate = document.myForm.rate.value;
	 tax = document.myForm.tax.value;
	 rate = Number (rate)
	 tax = Number (tax)
         outp = tax / rate * 100;
	 document.myForm.tax_per.value = outp;
       }

     function octroii_per() {

	 rate = document.myForm.rate.value;
	 octroi = document.myForm.octroi.value;
	 rate = Number (rate)
	 octroi = Number (octroi)
         outp = octroi / rate * 100;
	 document.myForm.octroi_per.value = outp;
       }
  function p_and_ff_per() {

	 rate = document.myForm.rate.value;
	 pf = document.myForm.p_and_f.value;
	 rate = Number (rate)
	 pf = Number (pf)
         outp = pf / rate * 100;
	 document.myForm.p_and_f_per.value = outp;
       }

       function disc() {

	 rate = document.myForm.rate.value;
	 disc1 = document.myForm.dis_per.value;
	 rate = Number (rate)
	 disc1 = Number (disc1)
         outp = disc1 * rate / 100;
	 document.myForm.dis.value = outp;
       }
        function exii() {

	 rate = document.myForm.rate.value;
	 exi1 = document.myForm.exi_per.value;
	 rate = Number (rate)
	 exi1 = Number (exi1)
         outp = exi1 * rate / 100;
	 document.myForm.exi.value = outp;
       }
     function taxx() {

	 rate = document.myForm.rate.value;
	 taxx = document.myForm.tax_per.value;
	 rate = Number (rate)
	 taxx = Number (taxx)
         outp = taxx * rate / 100;
	 document.myForm.tax.value = outp;
       }
    function octroii() {

	 rate = document.myForm.rate.value;
	 octroii = document.myForm.octroi_per.value;
	 rate = Number (rate)
	 octroii = Number (octroii)
         outp = octroii * rate / 100;
	 document.myForm.octroi.value = outp;
       }
     function p_and_ff() {

	 rate = document.myForm.rate.value;
	 p_and_ff = document.myForm.p_and_f_per.value;
	 rate = Number (rate)
	 p_and_ff = Number (p_and_ff)
         outp = p_and_ff * rate / 100;
	 document.myForm.p_and_f.value = outp;
       }


</script>
     <tr>
      <td id="navigation">
     &nbsp;
       </td>
	<td id="page">

  <h2> New purchase enquiry </h2>

  <form  name="myForm"  method="post" >


        <p> <input type="hidden" name="party_party_type_id" value="" id='unit_id'  />
      </p>
       <p> Date:
          <input type="text" name="date" value="" id='unit_abbrevation' />
      </p>



	<p>


	     Party:
	     <SELECT NAME=party>
	     <OPTION VALUE=0>

	     <OPTION VALUE="2">ganorkar solar</option><OPTION VALUE="9">onkar furniech</option>		     </SELECT>
	     <a href="party.php" target="_blank" onclick="return confirm('Do you want to create new party?');">New party </a>

	</p>
	<p>
	     		     Term and condition :
	     <SELECT NAME=term_and_condition>
	     <OPTION VALUE=0>

	     <OPTION VALUE="3">return of goods</option><OPTION VALUE="4">sale of goods</option>		     </SELECT>
	     <a href="department.php" target="_blank" onclick="return confirm('Do you want to create new departmrnt?');">New department </a>

	</p>




  <p align= "left">
       <INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />

  <p/>
  <TABLE id="display_header" BORDER="2" CELLPADDING="4" CELLSPACING="2" WIDTH="1005">
       <tr bgcolor='#EAE8E8'>
	    <td WIDTH="25" align= "center"> <li>  </td>
	    <td WIDTH="100">Item <a href="item.php" target="_blank" onclick="return confirm('Do you want to create new item?');">New </a></td>
	    <td WIDTH="65">Qty</td>

	    <td WIDTH="100">Unit <a href="units.php" target="_blank" onclick="return confirm('Do you want to create new unit?');">New </a></td>
	    <td WIDTH="65">Rate</td>
	    <td WIDTH="65">Dis </td>
	    <td WIDTH="65">Dis %</td>
	    <td WIDTH="65">Exi</td>
	    <td WIDTH="65">Exi %</td>

	    <td WIDTH="65">Tax</td>
	    <td WIDTH="65">Tax %</td>
	    <td WIDTH="65">Octroi</td>
	    <td WIDTH="65">Octroi %</td>
	    <td WIDTH="65">P & F</td>
	    <td WIDTH="65">P & F %</td>


       </tr>
  </TABLE>
      <div style=" height:300px; overflow:auto;">
      <TABLE id="dataTable" BORDER="2" CELLPADDING="4" CELLSPACING="2" WIDTH="1005">

        <TR bgcolor='#EAE8E8'>
			       <TD WIDTH='25'><INPUT type='checkbox' name='chk[]'/></TD>
			       <td WIDTH='100'>	<SELECT NAME='item[]' style='width:85px' >
					<OPTION VALUE=0><OPTION VALUE="42">gi screw 3/4 (gi screw )</option><OPTION VALUE="38">ms bride bar (ms 689)</option><OPTION VALUE="39">ms bride bar 3/4 (ms b b 3/4)</option><OPTION VALUE="40">ms cr 20g  sheet  (ms 20g sheet)</option><OPTION VALUE="41">ss sheet 302 40x60 (ss 302 sheet)</option></SELECT>



			       </td><td WIDTH='65'> <input type='text' name='qty[]' value='' size='5' /></td>
				<td WIDTH='100'>	<SELECT NAME='unit[]' style='width:85px' >
					<OPTION VALUE=0><OPTION VALUE="2">centimeter (cm)</option><OPTION VALUE="6">kilogram (kg)</option><OPTION VALUE="4">kilometer (km)</option><OPTION VALUE="1">meter (m)</option><OPTION VALUE="5">meter square (sq m)</option></SELECT>


			       </td>
				  <td WIDTH='65'><input type='text' name='rate[]' value='' size='4' id='rate' /> </td>

				  <td WIDTH='65'><input type='text' name='dis[]' value='' size='4' id='dis' onchange="disc_per()" /></td>
				  <td WIDTH='65'><input type='text' name='dis_per[]' value='' size='4' id='dis_per'  onchange="disc()" /></td>
				  <td WIDTH='65'><input type='text' name='exi[]' value='' size='4' id='exi' onchange="exii_per()"/></td>
				  <td WIDTH='65'><input type='text' name='exi_per[]' value='' size='4' id='exi_per' onchange="exii()"/></td>
				  <td WIDTH='65'><input type='text' name='tax[]' value='' size='4' id='tax' onchange="taxx_per()" /></td>
				  <td WIDTH='65'><input type='text' name='tax_per[]' value='' size='4' id='tax_per' onchange="taxx()"/></td>
				  <td WIDTH='65'><input type='text' name='octroi[]' value='' size='4' id='octroi'onchange="octroii_per()"/></td>
				  <td WIDTH='65'><input type='text' name='octroi_per[]' value='' size='4' id='octroi_per' onchange="octroii()"/></td>
				  <td WIDTH='65'><input type='text' name='p_and_f[]' value='' size='4' id='p_and_f' onchange="p_and_ff_per()" /></td>

				  <td WIDTH='65'><input type='text' name='p_and_f_per[]' value='' size='4' id='p_and_f_per' onchange="p_and_ff()" onBlur="addRow('dataTable')" /></td>

			   </TR>	  </TABLE>
      </div>
       &nbsp
       <input type="Submit" name="submit" value="Create party" />
       <input type="Submit" name="submit" value="Update party" />
   </form>



    </td>

  </tr>
</table>


</div>
	<div id="footer">X</div>
</body>
</html>

johanafm

Validate your code. There is no language attribute for the script element, and there is no "Javascript" value for the language attribute (where it is allowed). Where there is one validation error, there is likely to be more validation errors.

There is a difference between

function f(value)
{
	var variable = value;
}

and

function f(value)
{
	variable = value;
}

On has global scope, the other has not.

If you want more help, indent your code properly.
If you want more help, clearly express what "javascript won't work" means. Does it not produce the intended result? Does it not "work at all", i.e. does youe browser give your parse errors, exceptions etc?