CODEWITHSUNDEEP
javascript
Beauford
Beauford

Reputation: 1

Javascript dynamically add input fields in form - need help with script

I have the following script which I downloaded as I know nothing about javascript. What I want to do with this script is have the input fields added before the button instead of after it.

I already have one set of input fields hardcoded with titles, so I just want the new ones to be added under them and before the button.

Any help is appreciated.

Not sure how to show code here as none of the code links seem to do anything, so if someone can let me know I will post the code.

    <script type="text/javascript">
  function addRow(parts)
  {
        var table = document.getElementById(parts);
        var i = table.rows.length;

        var newRow = table.insertRow(-1);
        newRow.innerHTML =
                    '<tr><td><input type="text" name="po' + i + '" style="width: 50px" VALUE=""></td></tr>\n'
              +      '<tr><td><input type="text" name="po' + i + '" style="width: 100px" VALUE=""></td></tr>\n'
              +      '<tr><td><input type="text" name="po' + i + '" style="width: 510px" VALUE=""></td></tr>\n'
              +      '<tr><td><input type="text" name="po' + i + '" style="width: 100px" VALUE=""></td></tr>\n'
              +      '\n';
  }
</script>

    <input type="button" value="Add New Rrow" onclick="addRow('parts')">

Upvotes: 0

Views: 1716

Answers (3)

creeve
creeve

Reputation: 1

This board is weird, obviously not an answer but a followup question.

In my form I have a lot more that just what is in the dynamic function and the form type is post, so not sure of what your referring to with the $_GET statement.

In any event, it only sees the original hard coded input. This is the latest I have. Can there not be a counter that increments and gets added to the input name, like quantity1, quantity2, etc. I have no idea as I know nothing of javascript.

Thanks again

 <script language='javascript' type='text/javascript'>

function addRow(parts) { var table = document.getElementById(parts); var i = table.rows.length;

var newRow = table.insertRow(2);
newRow.innerHTML =
      '<td><input type="text" name="quantity' + i + '" style="width: 50px" VALUE=""></td>\n'
      + '<td><input type="text" name="part_number' + i + '" style="width: 75px" VALUE=""></td>\n'
      + '<td><input type="text" name="partsdesc' + i + '" style="width: 177px" VALUE=""></td>\n'
      + '<td><input type="text" name="supplier' + i + '" style="width: 140px" VALUE=""></td>\n'
      + '<td><input type="text" name="parts_invoice_id' + i + '" style="width: 90px" VALUE=""></td>\n'
      + '<td><input type="text" name="parts_eta' + i + '" style="width: 90px" VALUE=""></td>\n'
      + '<td><input type="text" name="unitprice' + i + '" style="width: 100px" VALUE=""></td>\n'
      + '\n';

}

Upvotes: 0

redShadow
redShadow

Reputation: 6777

I just tried it and it seems to work. Just watch the extra <tr> tags you are adding to the table row..

This is the final code I used, that works for me.

<html><head>
<script language='javascript' type='text/javascript'>
function addRow(parts) {
    var table = document.getElementById(parts);
    var i = table.rows.length;

    var newRow = table.insertRow(-1);
    newRow.innerHTML =
                '<td>'+ i +'</td><td><input type="text" name="po' + i + '" style="width: 50px" VALUE=""></td>\n'
          + '<td><input type="text" name="po' + i + '" style="width: 100px" VALUE=""></td>\n'
          + '<td><input type="text" name="po' + i + '" style="width: 510px" VALUE=""></td>\n'
          + '<td><input type="text" name="po' + i + '" style="width: 100px" VALUE=""></td>\n'
          + '\n';
  }
</script>
</head><body>
  <table id='parts'>
  <tr>
    <td>ID</td>
    <td style='width: 50px;'>FIELD1</td>
    <td style='width: 100px;'>FIELD2</td>
    <td style='width: 510px;'>FIELD3</td>
    <td style='width: 100px;'>FIELD4</td>
  </tr>
  </table>
  <button type='button' onclick='addRow("parts")'>ADD</button>
</body></html>

<sidenote>

Also, as Babiker pointed out, you should check your input fields names, although the browser will probably build a query like:

?po1=val1&po1=val2&po1=val3...

..that i.e. in PHP will be read as an array into $_GET['po1'] as an array with elements val, val2, val3, etc. etc...

..html elements names must be unique in the page, and that could cause some problems, (for example, if you use <label>s). You should instead name them po1[0], po1[1], etc..

</sidenote>

Upvotes: 0

bowsersenior
bowsersenior

Reputation: 12574

You are much, much better off using a framework like MooTools or jQuery. They make DOM manipulation much easier and more reliable.

Upvotes: 1

Related Questions