Increment input name array index using Jquery

Question

I am beginner to UI designing and jquery. I am trying to increment the input name array index using jquery. I have an add button and clicking on it will add another row. But the name of the row should have name with incremented input array index value.

Here I require the paramKey[] and paramValue[] index value to increment as we click on an Add button.

Script I have written:

var i = 1;
$(document).ready(function() {
  $(".addCF").click(function() {
    i++;
    $("#paramsFields").append('<tr valign="top"><th></th><td><input  style="margin-left: 187px"  type="text" class="code" id="paramFieldName" name="paramKey[i]" value=""/> &nbsp; <input type="text" class="code" id="paramFieldValue" name="paramValue[i]" value=""/> &nbsp;<a href="javascript:void(0);" class="remCF">Remove</a></td></tr>');
  });
  $("#paramsFields").on('click', '.remCF', function() {
    $(this).parent().parent().remove();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="paramsFields">
  <tr valign="top">
    <td scope="row"><label for="paramFieldName">Params</label></td>
    <td><input style="margin-left: 187px" type="text" class="code" id="paramFieldName" name="paramKey[0]" placeholder="Param Name" /> &nbsp;
      <input type="text" class="code" id="paramFieldValue" name="paramValue[0]" value="" placeholder="Param Value" /> &nbsp;
      <a href="javascript:void(0);" class="addCF">Add</a>
    </td>
  </tr>
</table>

Thanks in advance!!

@Roy i have tried. I am getting this error: java.lang.NumberFormatException: For input string: "i" — vivek sharma
– vivek sharma, Commented Feb 27, 2019 at 11:46

Takit Isy · Accepted Answer · 2019-03-08 10:32:05Z

1

Here is what I'll do to keep it easy:

Keep HTML in HTML, by creating a template of your new data (hidden using CSS),
Use a placeholder, a special character to be replaced by your number,
Clone, replace the placeholder, and append this template when clicking the button.

Working snippet (see comments for details):

var i = 0; // Start at 0
$(document).ready(function() {
  $(".addCF").click(function() {
    i++;
    var newRow = $("#template").clone().removeAttr("hidden").removeAttr("aria-hidden"); // Clone template and make it visible
    $(newRow).html(newRow.html().replace(/%/g, i)); // Replace the % by the i number
    $("#paramsFields").append(newRow);
  });
  $("#paramsFields").on('click', '.remCF', function() {
    $(this).parent().parent().remove();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="paramsFields">
  <tr valign="top">
    <td scope="row"><label for="paramFieldName">Params</label></td>
    <td><input style="margin-left: 187px" type="text" class="code" id="paramFieldName" name="paramKey[0]" placeholder="Param Name" /> &nbsp;
      <input type="text" class="code" id="paramFieldValue" name="paramValue[0]" value="" placeholder="Param Value" /> &nbsp;
      <a href="javascript:void(0);" class="addCF">Add</a>
    </td>
  </tr>

  <tr id="template" valign="top" hidden="true" aria-hidden="true">
    <td></td>
    <td>
      <input style="margin-left: 187px" type="text" class="code" id="paramFieldName" name="paramKey[%]" value="" /> &nbsp;
      <input type="text" class="code" id="paramFieldValue" name="paramValue[%]" value="" /> &nbsp;
      <a href="javascript:void(0);" class="remCF">Remove</a>
    </td>
  </tr>

</table>

Note: All your styling should be done in CSS.

edited Mar 8, 2019 at 10:32

answered Feb 27, 2019 at 12:38

Takit Isy

10.2k3 gold badges29 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

jvk Over a year ago

Hi @Takit lsy, really you are great.

Takit Isy Over a year ago

@KrishnaJonnalagadda Thanks :) I'm glad it helps!

Ashraful Karim Miraz · Accepted Answer · 2019-02-27 12:10:15Z

You have first index inputs in html code like name="paramKey[0]". In javascript code you start index with 1 var i = 1 but before you append new inputs you increasing the index i++, that should be after appent inputs, and the index variable "i" value should be print in input name attribute name="paramKey[' + i + ']". And the id must be unique, so I add the index value on id name also.

I change your code and have look the change to understand.

var i = 1;
$(document).ready(function() {
  $(".addCF").click(function() {
    $("#paramsFields").append('<tr valign="top"><th></th><td><input  style="margin-left: 187px"  type="text" class="code" id="paramFieldName' + i + '" name="paramKey[' + i + ']" value=""/> &nbsp; <input type="text" class="code" id="paramFieldValue' + i + '" name="paramValue[' + i + ']" value=""/> &nbsp;<a href="javascript:void(0);" class="remCF">Remove</a></td></tr>');
    i++;
  });
  $("#paramsFields").on('click', '.remCF', function() {
    $(this).parent().parent().remove();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="paramsFields">
  <tr valign="top">
    <td scope="row"><label for="paramFieldName">Params</label></td>
    <td><input style="margin-left: 187px" type="text" class="code" id="paramFieldName" name="paramKey[0]" placeholder="Param Name" /> &nbsp;
      <input type="text" class="code" id="paramFieldValue" name="paramValue[0]" value="" placeholder="Param Value" /> &nbsp;
      <a href="javascript:void(0);" class="addCF">Add</a>
    </td>
  </tr>
</table>

chandra shekhar joshi · Accepted Answer · 2019-02-27 12:05:08Z

0

you are appending always hard codeded value and hence output is coming same whereas you i is increasing properly

 $("#paramsFields").append('<tr valign="top"><th></th><td><input  style="margin-left: 187px"  type="text" class="code" id="paramFieldName" name="paramKey['+i+']" value=""/> &nbsp; <input type="text" class="code" id="paramFieldValue" name="paramValue['+i+']" value=""/> &nbsp;<a href="javascript:void(0);" class="remCF">Remove</a></td></tr>');

});

Here I have added the i as variable in your code replace this line in your code

answered Feb 27, 2019 at 12:05

chandra shekhar joshi

16312 bronze badges

Comments

MjM · Accepted Answer · 2019-02-27 12:09:37Z

The reason why you are not getting incremented array index value for paramKey[] and paramValue[] is because you are not appending variable i properly.

Try the following code:

 <script>
   var i = 1;
    $(document).ready(function() {
      $(".addCF").click(function() {
        i++;
        $("#paramsFields").append('<tr valign="top"><th></th><td><input  style="margin-left: 187px"  type="text" class="code" id="paramFieldName" name="paramKey['+i+']" value=""/> &nbsp; <input type="text" class="code" id="paramFieldValue" name="paramValue['+i+']" value=""/> &nbsp;<a href="javascript:void(0);" class="remCF">Remove</a></td></tr>');
      });
      $("#paramsFields").on('click', '.remCF', function() {
        $(this).parent().parent().remove();
      });
    });
</script>

Collectives™ on Stack Overflow

Increment input name array index using Jquery

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related