Note that there are some explanatory texts on larger screens.

plurals
  1. POLoop through form input fields with Javascript
    primarykey
    data
    text
    <p>Please help me out on this. I have Javascript like the following:</p> <pre><code>function calc() { var table = document.getElementById(tableNum); var rowCount = table.rows.length; for (var i = 0; i &lt; rowCount; i++) { var totalNum[i] = document.formNum.txt1[i].value * document.formNum.txt2[i].value; document.getElementById('totalCalc[' + i + ']').innerHTML = totalNum; } } </code></pre> <p>And HTML like this:</p> <pre><code>&lt;table id="tableNum"&gt; &lt;form name="formNum" action="" id="formNum"&gt; &lt;tr&gt; &lt;td&gt;&lt;input type="text" name="txt1[]" onkeyup="calc()"/&gt;&lt;/td&gt; &lt;td&gt;&lt;input type="text" name="txt2[]" onkeyup="calc()"/&gt;&lt;/td&gt; &lt;td&gt;&lt;span id="totalCalc[]"&gt;&lt;/span&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/form&gt; &lt;/table&gt; </code></pre> <p>The number of input fields is unknown. No error, but totalCalc field is empty. Please tell me what I have done wrong. Thanks.</p> <p><strong>EDIT:</strong> I'm sorry, I forgot to mention both the input fields are in a table. Please check the edited code. Thanks.</p> <p><strong>EDIT:</strong> I'm actually working on a demo which the number of table row is defined by user, by clicking insert row button.</p> <p><strong>EDIT:</strong> Thanks Travis for the code. After a few changes, the code is working now. But only the first row is working. I'm thinking to get the length of the row and to use for loop for the text fields. <code>&lt;input type="text" name="txt1[&lt;?php echo $rowLength;?&gt;]" onkeyup="calc()"/&gt;</code> Does anyone have other ideas? Thanks.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload