Home/ Questions/Q 7020019
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T23:15:48+00:00

I am creating a form and I have a field set for client information

  • 0

I am creating a form and I have a field set for client information and the ability to add another field set for another client if needed.

As of now the additional field sets’ field id adds by 1 which is good, but I would like for each of the fields in the field set to add by 1 as well.

var _counter = 0;
function Add() {
_counter++;
var oClone = document.getElementById("client1").cloneNode(true);
oClone.id += (_counter + "");
document.getElementById("placehere").appendChild(oClone);
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Here’s a page that clones and increments the fieldset as well as any children elements within the set. It’s assuming that both fieldset and children inputs have a numeric suffix. i.e. fieldset1 and textfield2, etc.

    Cheers.

    <!DOCTYPE html>
<html>
<head>


  <script type='text/javascript'>
    // store a reference to the last clone so I can increment off that.
    window.lastClone = null;

    function incrementId(id) {
      // regexp is looking for text with a number suffix.  adjust accordingly.
      var numberSuffixRegExp = /(.*?)(\d*)$/;
      var regExpMatch = numberSuffixRegExp.exec(id);
      // assuming a match will be made here, and position 1 and 2 are populated.
      var prefix = regExpMatch[1];
      var counter = parseInt(regExpMatch[2]);
      counter++;
      return prefix + counter;
    }

    function cloneFieldSet() {

      if (!window.lastClone) {
        window.lastClone = 'fieldset1';
      }

      var newFieldSet = document.getElementById(lastClone).cloneNode(true);

      newFieldSet.id = incrementId(newFieldSet.id);

      var tagNames = ['input', 'select', 'textarea'];  // insert other tag names here
      var elements = [];

      for (var i in tagNames) {
        // find all fields for each tag name.
        var fields = newFieldSet.getElementsByTagName(tagNames[i]);
        for(var k = 0; k < fields.length; k++){
          elements.push(fields[k]);
        }
      }

      for (var j in elements) {
        // increment the id for each child element
        elements[j].id = incrementId(elements[j].id);
      }

      document.getElementById("placehere").appendChild(newFieldSet);
      window.lastClone = newFieldSet.id;
    }

  </script>


</head>
<body>
<input type='button' value='Clone' onclick='cloneFieldSet()'/><br/>
<fieldset id='fieldset1'>
  <table>

    <tr>
      <td>Label One:</td>
      <td><input type='text' id='fieldOne1'/></td>
    </tr>
    <tr>
      <td>Label Two:</td>
      <td><input type='text' id='fieldTwo1'/></td>
    </tr>
    <tr>
      <td>Label Three:</td>
      <td><select id='selectOne1'>
        <option>Some Value</option>
      </select></td>
    </tr>
  </table>
</fieldset>
<div id='placehere' style='margin:10px 0; border:1px solid black'>
</div>

</body>
</html>
    • 0