perform addition of 1 form with dynamic values and show it in another form on same page

Question

I want to fetch the values of field " value3 " which would get values dynamically and show sum of it as output in output id "hello" field.

Also i want to send field "value2" values to another page

thanks in advance

<html>
<head>
<title>Arithmetic operations</title>

</head>
<script type="text/javascript">
    var x,y,z;
function Multiplication(o1, o2, o3){
 x=o1.value;
 y=o2.value;
 z=x*y;
 o3.value=z
}
function calcForm(formNode){
 Multiplication(formNode.value1, formNode.value2, formNode.value3);
}
</script>
</head>
<body>
<div style="display:none">
<form name="calc">
 <h1>Online Calculator</h1>
 Enter first Numeric Value :   
 <input
    id="value1"
    type       = "text" 
    onchange   = "calcForm(this.parentNode)"
    onkeypress = "this.onchange();"
    onpaste    = "this.onchange();"
    oninput    = "this.onchange();"
    onloadstart     ="this.onchange();"
    
    value   = "5"
 /> 
  </br>
 Enter Second Numeric Value : 

 <input
    id="value2"
    type       = "text" 
    onchange   = "calcForm(this.parentNode)"
    onloadstart= "this.onchange();"
    onkeypress = "this.onchange();"
    onpaste    = "this.onchange();"
    oninput    = "this.onchange();"
    value   = "1"
 /> 
  </br>
  </br>
 Result of the Arithmetic operation is : <output type="number" id="value3"> </output></br>
 </form>
</div>

<div id="i_container">
</div>

 <form name="out" >
 Estimated total: <output type="number" id="hello"></output>
 <br><input type="submit">
    </form>
<script>
 count = 2;
 my_parent = document.getElementById('i_container');
 for(i=0; i<count; i++){
  nw = calc.cloneNode(true);
  nw.name = "dynamic_name_"+i;
  nw.id = "dynamic_id_"+i;
  my_parent.appendChild(nw);
 }
 for(i=0; i<count; i++){
  p = document.getElementById("dynamic_id_"+i);
  calcForm(p);
 }
</script>
</body>
</html>

Avoid using `cloneNode` since it tends to blindly clone nodes without handling the ids getting duplicated. — Vikram Deshmukh, May 27 '15 at 08:02
@Vikram Deshmukh I m new to javascript. if u could send some code that would be helpful — ksumit, May 27 '15 at 08:07
From what I understand from the question, you're requirements are broad. Also i cannot give you the code you need. Please look through tutorials and share your work. The community will curate it and point you in the right direction. — Vikram Deshmukh, May 27 '15 at 09:15

score 0 · Answer 1 · edited May 23 '17 at 12:06

You can learn lots of good stuff from this:

resources:

http://www.w3schools.com/jsref/jsref_number.asp

http://www.w3schools.com/jsref/met_table_insertrow.asp

Delete a row from a table by id

and search whatever makes you confused :)

<html>
<head>
<title>Arithmetic operations</title>
</head>
<body>

<table id="myTable" width="550px" cellPadding=5 cellSpacing=0 border=1>
 <tr style="background-color:#dddddd">
  <td width="50">#</td>
  <td width="30%">Num1</td>
  <td width="30%">Num2</td>
  <td width="30%">Result</td>
 </tr>
 <tr style="background-color:#dddddd">
  <td colspan=3>Sum:</td>
  <td><input id="totalRes" type="text" size=10 readonly=readonly value=0></td>
 </tr>
</table>
<p>
 <input type="button" Value="Add row" onClick=addRow()>
</p>

<script>
 function addRow(){
  var table = document.getElementById("myTable");
  var row = table.insertRow(table.rows.length-1);
  var c0 = row.insertCell(0);
  var c1 = row.insertCell(1);
  var c2 = row.insertCell(2);
  var c3 = row.insertCell(3);
  
  c1.innerHTML = 
   '<input name="txt" type = "text" onchange = "calcForm(this)" onkeypress = "this.onchange();"' + 
   ' onpaste = "this.onchange();" oninput = "this.onchange();" onloadstart ="this.onchange();" value = "5" />';
  
  c2.innerHTML = 
   '<input name="txt" type = "text" onchange = "calcForm(this)" onkeypress = "this.onchange();"' + 
   ' onpaste = "this.onchange();" oninput = "this.onchange();" onloadstart ="this.onchange();" value = "5" />';
    
  var deleteRowHTML = '<input type="button" Value="X" onClick=deleteRow(this)>';
  var resultContainerHTML = '<input name="txt" type="text" size=10 readonly=readonly value=10>';
  c3.innerHTML = resultContainerHTML + deleteRowHTML;
  
  updateRowNumbers();
 }
 
 function deleteRow(btn){
   var table = document.getElementById("myTable");
  var index = btn.parentNode.parentNode.rowIndex;
     table.deleteRow(index);
  updateRowNumbers();
 }
 
 function updateRowNumbers(){
  var table = document.getElementById("myTable");
  for (var i = 1; i<table.rows.length-1; i++) {
   //ignoring title row and total value row
   table.rows[i].cells[0].innerHTML = i;
  }
  
  calcAllRows();
 }
 
 function calcForm(text){
  row = text.parentNode.parentNode;
  t1 = row.cells[1].childNodes[0];
  t2 = row.cells[2].childNodes[0];
  t3 = row.cells[3].childNodes[0];
  t3.value = t1.value * t2.value;
  
  calcAllRows();
 }
 
 function calcAllRows(){
  var table = document.getElementById("myTable");
  var total = 0;
  for (var i = 1; i<table.rows.length-1; i++) {
   //ignoring title row and total value row
   total += Number(table.rows[i].cells[3].childNodes[0].value);
  }
  document.getElementById('totalRes').value = total;
 }
</script>
   
</body>
</html>

I want this solution in form format and wanted the sum value in another form And also i want to send Num2 value to next page for database storage — ksumit, May 27 '15 at 09:04
Or suggest me at how can i make the number of rows in this table dynamic :) — ksumit, May 27 '15 at 09:21
create a function which accepts a number, and add rows up to that number. before that make sure to remove all rows from 1 to rows.length-1 I think you have the code for dynamic number of forms. — Soley, May 27 '15 at 10:17
Check this answer for sending your results between pages. http://stackoverflow.com/questions/14693758/passing-form-data-to-another-html-page — Soley, May 27 '15 at 10:17
whatever you want to send to other forms, you can send them directly from the form in your html, or gather them in a script form like this and then send it. http://www.javascript-coder.com/javascript-form/javascript-form-submit.phtml for this create a form with desired fields and make it invisible. Then when the time comes, send it via your codes. This is good while you can send all your fields to your page via POST or GET method. To send your data using JSON, use http://stackoverflow.com/questions/1255948/post-data-in-json-format-with-javascript — Soley, May 27 '15 at 10:21
by the way, remove table header colors and set border=0 to have a clean form like GUI. You cannot send all your forms at once using regular html forms. use json which it makes it clean and manageable. — Soley, May 27 '15 at 10:23
the button that i want to send data to next page is needed to be in another form. how can i copy the data from table and pass it through that other form button to next page — ksumit, May 27 '15 at 10:26

score 0 · Answer 2 · edited May 23 '17 at 11:43

0

Please check https://stackoverflow.com/a/6964949/2655623 for dynamically create and submit a form via javascript.

var f = document.createElement("form");
f.setAttribute('method',"post");
f.setAttribute('action',"submit.php");

var i = document.createElement("input");
i.setAttribute('type',"text");
i.setAttribute('value',"your text ");

f.appendChild(i);
f.submit();

In your Server: https://stackoverflow.com/a/22679528/2655623 parse a JSON string.

echo json_encode($_POST['ids']);

to make your json from your table:

var json = JSON.stringify(content);
        alert( json );

edited May 23 '17 at 11:43

Community

1
1

answered May 27 '15 at 11:15

Soley

1,716
1
19
33

can you help me in converting the Add row button to another functionality. I want that instead of the button to add row, it takes count variable to add rows just like in last question you helped. Last Question - https://stackoverflow.com/questions/30276770/check-validations-of-form-whenever-a-change-in-textfield-occurs-just-like-in-gma – ksumit May 28 '15 at 15:14
For that you have to merge the two answers together. It is simple. Copy the codes from each answer to get what you are looking for. :) Now I am interested, What is your course name, my friend? – Soley May 28 '15 at 18:28
I m doing internship on java and have no knowledge of javascript. But i have to use javascript on my project that's why i need your help in completing my project – ksumit May 29 '15 at 05:03
I m unsuccessful in merging those two answers together. Can u plzz help me in this one also:) – ksumit May 30 '15 at 05:00

score 0 · Answer 3 · answered May 27 '15 at 11:16

The complete code to send all your data to another form:

<html>
<head>
<title>Arithmetic operations</title>
</head>
<body>

<table id="myTable" width="550px" cellPadding=5 cellSpacing=0 border=1>
    <tr style="background-color:#dddddd">
        <td width="50">#</td>
        <td width="30%">Num1</td>
        <td width="30%">Num2</td>
        <td width="40%">Result</td>
    </tr>
    <tr style="background-color:#dddddd">
        <td colspan=3>Sum:</td>
        <td>
            <input id="totalRes" type="text" size=10 readonly=readonly value=0>
            <input type="button" Value="Submit" onClick=submitAll()> 
        </td>
    </tr>
</table>
<p>
    <input type="button" Value="Add row" onClick=addRow()> 
</p>

<script>
    function addRow(){
        var table = document.getElementById("myTable");
        var row = table.insertRow(table.rows.length-1);
        var c0 = row.insertCell(0);
        var c1 = row.insertCell(1);
        var c2 = row.insertCell(2);
        var c3 = row.insertCell(3);

        c1.innerHTML = 
            '<input name="txt" type = "text" onchange = "calcForm(this)" onkeypress = "this.onchange();"' + 
            ' onpaste = "this.onchange();" oninput = "this.onchange();" onloadstart ="this.onchange();" value = "5" />';

        c2.innerHTML = 
            '<input name="txt" type = "text" onchange = "calcForm(this)" onkeypress = "this.onchange();"' + 
            ' onpaste = "this.onchange();" oninput = "this.onchange();" onloadstart ="this.onchange();" value = "5" />';

        var deleteRowHTML = '<input type="button" Value="X" onClick=deleteRow(this)>';
        var resultContainerHTML = '<input name="txt" type="text" size=10 readonly=readonly value=10>';
        c3.innerHTML = resultContainerHTML + deleteRowHTML;

        updateRowNumbers();
    }

    function deleteRow(btn){
        var table = document.getElementById("myTable");
        var index = btn.parentNode.parentNode.rowIndex;
        table.deleteRow(index);
        updateRowNumbers();
    }

    function updateRowNumbers(){
        var table = document.getElementById("myTable");
        for (var i = 1; i<table.rows.length-1; i++) {
            //ignoring title row and total value row
            table.rows[i].cells[0].innerHTML = i;
        }

        calcAllRows();
    }

    function calcForm(text){
        row = text.parentNode.parentNode;
        t1 = row.cells[1].childNodes[0];
        t2 = row.cells[2].childNodes[0];
        t3 = row.cells[3].childNodes[0];
        t3.value = t1.value * t2.value;

        calcAllRows();
    }

    function calcAllRows(){
        var table = document.getElementById("myTable");
        var total = 0;
        for (var i = 1; i<table.rows.length-1; i++) {
            //ignoring title row and total value row
            total += Number(table.rows[i].cells[3].childNodes[0].value);
        }
        document.getElementById('totalRes').value = total;
    }

    function submitAll(){
        var f = document.createElement("form");
        f.setAttribute('method',"post");
        f.setAttribute('action',"submit.php");

        var content = {};

        var table = document.getElementById("myTable");
        var total = 0;
        var k = 0;
        for (var i = 1; i<table.rows.length-1; i++) {
            content[k++] = Number(table.rows[i].cells[1].childNodes[0].value);
            content[k++] = Number(table.rows[i].cells[2].childNodes[0].value);
            content[k++] = Number(table.rows[i].cells[3].childNodes[0].value);
        }

        content[k++] = Number(document.getElementById('totalRes').value);

        var json = JSON.stringify(content);
        alert( json );

        var i = document.createElement("input");
        i.setAttribute('type',"text");
        i.setAttribute('value', json);

        f.appendChild(i);

        f.submit();
    }

</script>

</body>
</html>

Study how json works. It is very simple. check how we create the array content and in your php code, parse it like that. — Soley, May 27 '15 at 11:18

score 0 · Accepted Answer · answered May 30 '15 at 18:56

Dude, you have to learn javascript. It is simple and very useful.

Thanks.

<html>
<head>
<title>Arithmetic operations</title>
</head>
<body>

<table id="myTable" width="550px" cellPadding=5 cellSpacing=0 border=1>
    <tr style="background-color:#dddddd">
        <td width="50">#</td>
        <td width="30%">Num1</td>
        <td width="30%">Num2</td>
        <td width="40%">Result</td>
    </tr>
    <tr style="background-color:#dddddd">
        <td colspan=3>Sum:</td>
        <td>
            <input id="totalRes" type="text" size=10 readonly=readonly value=0>
            <input type="button" Value="Submit" onClick=submitAll()> 
        </td>
    </tr>
</table>
<p>
    <input id="totalRows" type="text" size=10 value=3>
    <input type="button" Value="Update Rows" onClick=addRowByCount()> 
</p>

<script>
    document.getElementById('totalRows').onkeypress = function(e){
        if (!e) e = window.event;
        var keyCode = e.keyCode || e.which;
        if (keyCode == '13'){
            addRowByCount();
            return false; // consume key
        }
    }
    function addRowByCount(){
        clear();
        count = Number(document.getElementById('totalRows').value);
        for(var i=0; i<count; i++){
            addRow();
        }
        updateRowNumbers();
    }
    function clear(){
        var table = document.getElementById("myTable");
        var rows = table.rows.length-2; // reduce one for top and one for bottom
        for (var i = 0; i<rows; i++) {
            table.deleteRow(1); // remove "form" rows by removing second row and shifting up the rest
        }
        updateRowNumbers();
    }
    function addRow(){
        var table = document.getElementById("myTable");
        var row = table.insertRow(table.rows.length-1);
        var c0 = row.insertCell(0);
        var c1 = row.insertCell(1);
        var c2 = row.insertCell(2);
        var c3 = row.insertCell(3);

        c1.innerHTML = 
            '<input name="txt" type = "text" onchange = "calcForm(this)" onkeypress = "this.onchange();"' + 
            ' onpaste = "this.onchange();" oninput = "this.onchange();" onloadstart ="this.onchange();" value = "5" />';

        c2.innerHTML = 
            '<input name="txt" type = "text" onchange = "calcForm(this)" onkeypress = "this.onchange();"' + 
            ' onpaste = "this.onchange();" oninput = "this.onchange();" onloadstart ="this.onchange();" value = "5" />';

        var deleteRowHTML = '<input type="button" Value="X" onClick=deleteRow(this)>';
        var resultContainerHTML = '<input name="txt" type="text" size=10 readonly=readonly value=10>';
        c3.innerHTML = resultContainerHTML + deleteRowHTML;

        updateRowNumbers();
    }

    function deleteRow(btn){
        var table = document.getElementById("myTable");
        var index = btn.parentNode.parentNode.rowIndex;
        table.deleteRow(index);
        updateRowNumbers();
    }

    function updateRowNumbers(){
        var table = document.getElementById("myTable");
        for (var i = 1; i<table.rows.length-1; i++) {
            //ignoring title row and total value row
            table.rows[i].cells[0].innerHTML = i;
        }

        calcAllRows();
    }

    function calcForm(text){
        row = text.parentNode.parentNode;
        t1 = row.cells[1].childNodes[0];
        t2 = row.cells[2].childNodes[0];
        t3 = row.cells[3].childNodes[0];
        t3.value = t1.value * t2.value;

        calcAllRows();
    }

    function calcAllRows(){
        var table = document.getElementById("myTable");
        var total = 0;
        for (var i = 1; i<table.rows.length-1; i++) {
            //ignoring title row and total value row
            total += Number(table.rows[i].cells[3].childNodes[0].value);
        }
        document.getElementById('totalRes').value = total;
    }

    function submitAll(){
        var f = document.createElement("form");
        f.setAttribute('method',"post");
        f.setAttribute('action',"submit.php");

        var content = {};

        var table = document.getElementById("myTable");
        var total = 0;
        var k = 0;
        for (var i = 1; i<table.rows.length-1; i++) {
            content[k++] = Number(table.rows[i].cells[1].childNodes[0].value);
            content[k++] = Number(table.rows[i].cells[2].childNodes[0].value);
            content[k++] = Number(table.rows[i].cells[3].childNodes[0].value);
        }

        content[k++] = Number(document.getElementById('totalRes').value);

        var json = JSON.stringify(content);
        alert( json );

        var i = document.createElement("input");
        i.setAttribute('type',"text");
        i.setAttribute('value', json);

        f.appendChild(i);

        f.submit();
    }

</script>

</body>
</html>

perform addition of 1 form with dynamic values and show it in another form on same page

4 Answers4

Linked