?
Solved

generated cell in a table using javascript function is not calculating the values

Posted on 2009-02-17
6
Medium Priority
?
392 Views
Last Modified: 2012-05-06
function cal()
{
      var f = document.form1;
      var regExp_Count = new RegExp("^[0-9)(-]+$");
   f.price1.value = parseFloat(f.baseprice.value*(f.percen.value/100)).toFixed(0);
}

cal() functions , will calculate  as such in that formula n display in the price1 text
using the text property onblur,

<input  name="percen" size="6" maxlength="2" onblur="cal();" onkeyup="valid(this,'notnumbers')" type="text" />

Problem Area ,
<a href="javascript:addRow()">Add Row</a>

addRow() functions which adds two input text control ,
cell1 couldnt able to calculate , and display on the cell2 .as it did on the other input text control which is percen and price1

i Think these lines giving an issue ,
        percentage.onblur='cal()'
        percentage.onkeyup=valid(this,'notnumbers')

some times with onkeyup event , it shows "error on page" on the status bar .

plz Suggest ....

This my code.....
function addRow()
{
  var tbl = document.getElementById('tbl');
  var lastRow = tbl.rows.length;
  if(lastRow <= 3) 
  {
	  var iteration = lastRow;
	  var row = tbl.insertRow(lastRow);
	  row.align = 'center';
		  // Column 1
	  var cell2 = row.insertCell(0);
	  var percentage = document.createElement('input');
	  percentage.type = 'text';
	  percentage.name = 'percentage_add_'+iteration;
	  percentage.onblur='cal()'
	  percentage.onkeyup=valid(this,'notnumbers')
	  cell2.appendChild(percentage);
	  // Column 2
	  var cell3 = row.insertCell(2);
	  var price = document.createElement('input');
	  price.type = 'text';
	  price.name = 'major_add_'+iteration;
	  price.readonly='true'
	  cell3.appendChild(price);
	  
     }
}
 
<body>
Base price<input id="Text1" name="baseprice" type="text" />
<input id="percen" name="percen" size="6" maxlength="2" onblur="cal();" onkeyup="valid(this,'notnumbers')" type="text" />
<input id="price1" type="text" /><a href="javascript:addRow()">Add Row</a>
 <div>
        <table id="tbl">
        </table>
        </div>
</body>
 
function cal()
{
	var f = document.form1;
	var regExp_Count = new RegExp("^[0-9)(-]+$");
   f.price1.value = parseFloat(f.baseprice.value*(f.percen.value/100)).toFixed(0);
}
 
function valid(o,w)
{
  var r={'notnumbers':/[^\d]/g}	
  o.value = o.value.replace(r[w],'');
}

Open in new window

0
Comment
Question by:Rajar Ahmed
  • 3
  • 3
6 Comments
 
LVL 15

Expert Comment

by:quincydude
ID: 23666398
i fixed the syntax errors of your code but not sure if it's what you want, check it out.

and yes, this line got one of the problem
percentage.onkeyup=valid(this,'notnumbers')

<html>
<head>
<script>
function addRow()
{
  var tbl = document.getElementById('tbl');
  var lastRow = tbl.rows.length;
  if(lastRow <= 3) 
  {
          var iteration = lastRow;
          var row = tbl.insertRow(lastRow);
          row.align = 'center';
                  // Column 1
          var cell2 = row.insertCell(0);
          var percentage = document.createElement('input');
          percentage.type = 'text';
          percentage.name = 'percentage_add_'+iteration;
          percentage.onblur='cal();'
          percentage.onkeyup="valid(this,'notnumbers')";
          cell2.appendChild(percentage);
          // Column 2
          var cell3 = row.insertCell(1);
          var price = document.createElement('input');
          price.type = 'text';
          price.name = 'major_add_'+iteration;
          price.readonly='true'
          cell3.appendChild(price);
          
     }
}
 
function cal()
{
        var f = document.form1;
        var regExp_Count = new RegExp("^[0-9)(-]+$");
   f.price1.value = parseFloat(f.baseprice.value*(f.percen.value/100)).toFixed(0);
}
 
function valid(o,w)
{
  var r={'notnumbers':/[^\d]/g} 
  o.value = o.value.replace(r[w],'');
}
</script>
</head>
<body>
<form name="form1">
Base price<input id="Text1" name="baseprice" type="text" />
<input id="percen" name="percen" size="6" maxlength="2" onblur="cal();" onkeyup="valid(this,'notnumbers')" type="text" />
<input id="price1" name="price1" type="text" /><a href="javascript:addRow()">Add Row</a>
</form>
 <div>
        <table id="tbl">
        </table>
        </div>
</body>
</html>
 

Open in new window

0
 
LVL 18

Author Comment

by:Rajar Ahmed
ID: 23666809
Thanks , but cal() function dint work,
if u notice , that the generated text control, 'percentage_add' and 'major_add' of name property dint have the variables in the function cal(),can u suggest how to create a function for this..so that it iterates accordingly w.r.t to the text control ...?  

function cal()
{
        var f = document.form1;
        var regExp_Count = new RegExp("^[0-9)(-]+$");
   f.price1.value = parseFloat(f.baseprice.value*(f.percen.value/100)).toFixed(0);
}

0
 
LVL 15

Accepted Solution

by:
quincydude earned 2000 total points
ID: 23667235
I think I had make some mistake in the previous reply.
And the following code works fine.
<html>
<head>
<script>
function addRow()
{
  var tbl = document.getElementById('tbl');
  var lastRow = tbl.rows.length;
  if(lastRow <= 3) 
  {
          var iteration = lastRow;
          var row = tbl.insertRow(lastRow);
          row.align = 'center';
                  // Column 1
          var cell2 = row.insertCell(0);
          var percentage = document.createElement('input');
          percentage.type = 'text';
          percentage.name = 'percentage_add_'+iteration;
		  percentage.onblur= function() {cal(this,'major_add_' + iteration );};
          percentage.onkeyup= function() { valid(this,"notnumbers")};
          cell2.appendChild(percentage);
          // Column 2
          var cell3 = row.insertCell(1);
          var price = document.createElement('input');
          price.type = 'text';
          price.name = 'major_add_'+iteration;
		  price.id = 'major_add_'+iteration;
          price.readOnly=true;
          cell3.appendChild(price);
          
     }
}
 
function cal(perc, poutstr)
{
        var f = document.form1;
		pout = document.getElementById(poutstr);
        var regExp_Count = new RegExp("^[0-9)(-]+$");
   pout.value = parseFloat(f.baseprice.value*(perc.value/100)).toFixed(0);
}
 
function valid(o,w)
{
  var r={'notnumbers':/[^\d]/g} 
  o.value = o.value.replace(r[w],'');
}
</script>
</head>
<body>
<form name="form1">
Base price<input id="Text1" name="baseprice" type="text" />
<input id="percen" name="percen" size="6" maxlength="2" onblur="cal(this,'price1');" onkeyup="valid(this,'notnumbers')" type="text" />
<input id="price1" name="price1" type="text" /><a href="#" onclick="addRow();">Add Row</a>
</form>
 <div>
        <table id="tbl">
        </table>
        </div>
 
 
</body>
</html>
 

Open in new window

0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 18

Author Comment

by:Rajar Ahmed
ID: 23667719
everything does well ,  only thing is i couldnt able to set the percentage text control to maxlength of 2 , its entering more than 2 even if i enter 213234 its entering

           var cell2 = row.insertCell(1);
          var percentage = document.createElement('input');
          percentage.type = 'text';
          percentage.size="6";
         percentage.maxlength="2";
          percentage.name = 'percentage_add_'+iteration;
          percentage.onblur= function() {cal(this,'major_add_' + iteration );};
          percentage.onkeyup= function() { valid(this,"notnumbers")};
           cell2.appendChild(percentage);
0
 
LVL 15

Assisted Solution

by:quincydude
quincydude earned 2000 total points
ID: 23667768
it's case sensitive, it should be

percentage.maxLength="2";
0
 
LVL 18

Author Closing Comment

by:Rajar Ahmed
ID: 31547730
thanks.mate ...:)
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

The most up-to-date version of this article is on my Blog https://iconoun.com/blog/
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

621 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question