change name of select element in HTML form dynamically

Question

I have a HTML form that accepts user input (Number of Sectors (LTE)). Based on the user input I clone some elements of the form. Upon submission of the form the hash is passed to a program. I want the names of the keys to be unique for each of the instances (created based on user input). In the current setup I am only able to generate Unique names for keys of the first select element. I want to be able to do the same for the second select element as well. Please suggest.

Current output upon Submission -

 {"member"=>"3", "lte_freq1"=>"6", "ru_type"=>"RU", "4_way_rx"=>"Yes", 
      "lte_freq1_1"=>"Yes", "lte_freq1_2"=>"Yes"}

Desired output for a input VALUE = 3

{"member"=>"3", "lte_freq1"=>"6", "ru_type"=>"RU", "4_way_rx"=>"Yes", 
      "lte_freq1_1"=>"6","ru_type_1"=>"RU", "4_way_rx_1"=>"Yes" "lte_freq1_2"=>"Yes","ru_type_2"=>"RU", "4_way_rx_2"=>"Yes"}

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      $("button").click(function() {
        var number = document.getElementById("member").value;
        var repeat = $('fieldset');
        var cloned;
        for (i = 1; i < number; i++) {
          cloned = repeat.clone(true);
          current_name = cloned.find('select').attr('name');
          console.log(current_name)
          console.log(cloned)
          cloned.find("*").prop('name', current_name + '_' + i);
          cloned.appendTo('.sector_prop');
        }
      });
    });
  </script>
</head>

<body>
  <form action="/form" method="post">
    <div class="textbox"></div>
    <br>
    <legend><b> RF Parameters</b></legend>
    <br> Number of Sectors (LTE)<br>
    <br>
    <input type="text" id="member" name="member" value="">
    <br>
    <br>
    <button>Generate Sector Properties</button>
    <br>
    <br>
    <div class="sector_prop">
      <fieldset>
        Primary LTE Carrier (Select lowest frequency on the site 850 for Band 5, AWS for Band 4 and PCS for Band 2)<br>
        <br>
        <div id="freq">
          <select name="lte_freq1">
            <option value="6">850</option>
            <option value="2">AWS</option>
           <option value="4">PCS</option>
          </select>
        </div>
        <br>
        <br> Radio Type (Select "RU" for Rack-mount or RRU for Remote-Radio):<br>
        <br>
        <select name="ru_type">
          <option value="RU">RU</option>
          <option value="RRU">RRU</option>
        </select>
        <br>
        <br> 4 way Rx (Select "Yes" or "No"):<br>
        <br>
        <select name="4_way_rx">
          <option value="Yes">Yes</option>
          <option value="No">No</option>
        </select>
        <br>
        <br>
      </fieldset>
    </div>
    <br>
    <br>
    <br>
    <input type="submit">
  </form>
  <br>
  <br>
</body>

Louys Patrice Bessette · Accepted Answer · 2017-07-09 22:55:20Z

The trick is to target every element which has a name attribute in the cloned object.

This can be done easilly using an attribute selector like cloned.find("[name]").
Then, change the name for each of them.

$(document).ready(function(){
  $("button").click(function(e){
    e.preventDefault();
    
    var number = document.getElementById("member").value;
    var repeat = $('fieldset');
    var cloned;

    for (i=1;i<number;i++){
      cloned = repeat.clone(true);
      
      // Get all elements having a name attribute... And modify the name.
      cloned.find("[name]").each(function(){
        $(this).attr("name",$(this).attr("name")+"_"+i)
      });

      cloned.appendTo('.sector_prop');
    }
  });
});


// Just for this example
$("input[type='submit']").on("click",function(e){
  e.preventDefault();
  
  console.log( $("form").serialize() );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form action="/form" method="post">
  <div class="textbox"></div>
  <br>

  <legend><b> RF Parameters</b></legend>
  <br>
  Number of Sectors (LTE)<br>
  <br>
  <input type="text" id="member" name="member" value="">
  <br>
  <br>

  <button>Generate Sector Properties</button>
  <br>
  <br>

  <div class="sector_prop">
    <fieldset>
      Primary LTE Carrier (Select lowest frequency on the site 850 for Band 5, AWS 
      for Band 4 and PCS for Band 2)<br>
      <br>
      <div id="freq">
        <select name="lte_freq1">
          <option value="6">850</option>
          <option value="2">AWS</option>
          <option value="4">PCS</option>
        </select>
      </div>
      <br>
      <br>
      Radio Type (Select "RU" for Rack-mount or RRU for Remote-Radio):<br>
      <br>
      <select name="ru_type">
        <option value="RU">RU</option>
        <option value="RRU">RRU</option>
      </select>
      <br>
      <br>
      4 way Rx (Select "Yes" or "No"):<br>
      <br>
      <select name="4_way_rx">
        <option value="Yes">Yes</option>
        <option value="No">No</option>
      </select>
      <br>
      <br>
    </fieldset>
  </div>

  <br>
  <br>
  <br>
  <input type="submit">
</form>
<br>
<br>

Also in CodePen

Collectives™ on Stack Overflow

change name of select element in HTML form dynamically

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related