How to alter the name value in jQuery "add another field" function

Question

I'm trying to add another input field as the user clicks on the "add another field" button.

Although it works perfectly, there's this minor issue as the name in the input field supposed to add +1 to the earlier name value in the additional field, which returns as a string instead of int.

Upon clicking on "Add Additional field" a new input appears with name value as name="asin1" and further on goes as name="asin11" & name="asin111". How can I add it up as a count?

And on the other hand, how can I know on the backend page how many fields were actually user added using PHP.

Any help is greatly appreciated.

$('.extra-fields-customer').click(function() {
  $('.customer_records').clone().appendTo('.customer_records_dynamic');
  $('.customer_records_dynamic .customer_records').addClass('single remove');
  $('.single .extra-fields-customer').remove();
  $('.single').append('<a href="#" class="remove-field btn-remove-customer button" style="margin: auto;padding: 5px;background:orange;color:white;float:right;width:200px;text-align:center;margin-top: 5px;">Remove Fields</a>');
  $('.customer_records_dynamic > .single').attr("class", "remove");

  $('.customer_records_dynamic input').each(function() {
    var count = 1;
    var fieldname = $(this).attr("name");
    $(this).attr('name', fieldname + count);
    count++;
  });
});

$(document).on('click', '.remove-field', function(e) {
  $(this).parent('.remove').remove();
  e.preventDefault();
});

<script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<div class="customer_records">
  <input type="text" class="input" id="fname" name="asin" required placeholder="ASIN/FSIN or Wesite Link of the product">
  <a class="extra-fields-customer button" href="#">Add Another Field</a>
</div>
<br>
<div class="customer_records_dynamic"></div>

Abdelrhman Gemi · Accepted Answer · 2020-11-02 11:20:39Z

First solution: defined count & fieldname out of function .each

$('.extra-fields-customer').click(function() {
  $('.customer_records').clone().appendTo('.customer_records_dynamic');
  $('.customer_records_dynamic .customer_records').addClass('single remove');
  $('.single .extra-fields-customer').remove();
  $('.single').append('<a href="#" class="remove-field btn-remove-customer button" style="margin: auto;padding: 5px;background:orange;color:white;float:right;width:200px;text-align:center;margin-top: 5px;">Remove Fields</a>');
  $('.customer_records_dynamic > .single').attr("class", "remove");

    var count = 1;
    var fieldname='asin';
  $('.customer_records_dynamic input').each(function() {
    $(this).attr('name', fieldname + count);
    count++;
  });
});

$(document).on('click', '.remove-field', function(e) {
  $(this).parent('.remove').remove();
  e.preventDefault();
});

<script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<div class="customer_records">
  <input type="text" class="input" id="fname" name="asin" required placeholder="ASIN/FSIN or Wesite Link of the product">
  <a class="extra-fields-customer button" href="#">Add Another Field</a>
</div>
<br>
<div class="customer_records_dynamic"></div>

Another solution: edit input field Like:

  <input type="text" class="input" id="fname" name="asin[]" required placeholder="ASIN/FSIN or Wesite Link of the product">

now you don't need to count your inputs and use this.

    $('.customer_records_dynamic input').each(function() {
    $(this).attr('name', fieldname + count);
    count++;
  });

just edit your back-end and receive input data asin as Array

jpmc · Accepted Answer · 2020-11-02 11:35:19Z

1

Since you are using PHP on the backend, you really do not need to keep track of the names like you would for a set static number of fields.

Have a look at this:

<input type="text" name="asin[]" />
<input type="text" name="asin[]" />
<input type="text" name="asin[]" />

// php will convert it to an array in the backend as $_POST['asin']

In your PHP you'll want something like:

<?php

foreach ($_POST['asin'] as $asinInputValue) {
    // iterate over each input's value
    echo $asinInputValue . "<br>";
}

edited Nov 2, 2020 at 11:35

answered Nov 2, 2020 at 11:24

jpmc

1,21312 silver badges19 bronze badges

Collectives™ on Stack Overflow

How to alter the name value in jQuery "add another field" function

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related