CODEWITHSUNDEEP
javascriptjqueryhtml
vivek sharma
vivek sharma

Reputation: 23

Increment input name array index using Jquery

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!!

Upvotes: 1

Views: 2050

Answers (4)

Takit Isy
Takit Isy

Reputation: 10081

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.

Upvotes: 1

Ashraful Karim Miraz
Ashraful Karim Miraz

Reputation: 725

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>

Upvotes: 0

MjM
MjM

Reputation: 581

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>

Upvotes: 0

chandra shekhar joshi
chandra shekhar joshi

Reputation: 163

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

Upvotes: 0

Related Questions