CODEWITHSUNDEEP
javascriptjquery
Ivo
Ivo

Reputation: 2636

Adding input forms and removing them again get all id's

I'm currently adding some input fields to a div. There is also the option to remove the just added input fields.

Now the problem is, if you add 4 input fields and let's say you removed number 2.

You will get something like this

id=1

id=3

id=4

Now when you will add a new one it will add id=5.

So we end up with:

id=1

id=3

id=4

id=5

JS :

     var iArtist = 1,
         tArtist = 1;
 $(document).on('click', '#js-addArtist', function() {
   var artist = $('#js-artist');
   var liData = '<div class="js-artist"><input id="artiestNaam_' + iArtist + '"><input id="artiestURL_' + iArtist + '"><span class="js-removeArtist">remove</span></div>';
   $(liData).appendTo(artist);
   iArtist++;
   tArtist++;
 });
 $(document).on('click', '.js-removeArtist', function() {
   if (tArtist > 1) {
     $(this).parents('.js-artist').slideUp("normal", function() {
       $(this).remove();
       tArtist--;
     });
   }
 });
 $(document).on('click', '#js-print', function() {
  var historyVar = [];
    historyVar['artiestNaam_0'] = $('#artiestNaam_0').val();
    historyVar['artiestURL_0'] = $('#artiestURL_0').val();
  console.log(historyVar); 
 });

HTML :

<span id="js-addArtist">add</span>
<div id="js-artist">
  <div class="js-artist">
    <input id="artiestNaam_0">
    <input id="artiestURL_0">
    <span class="js-removeArtist">remove</span>
  </div>
</div>
<span id="js-print">print</span>

For now it's okay.

Now for the next part I'm trying to get the data from the input fields:

historyVar['artiestNaam_0'] = $('#artiestNaam_0').val();
historyVar['artiestURL_0'] = $('#artiestURL_0').val();

How can I make sure to get the data of all the input fields?

Working version

Upvotes: 1

Views: 110

Answers (3)

Martijn
Martijn

Reputation: 16123

You could do with a whole lot less code. For example purposes I'm going to keep it more simple than your question, but the priciple remains the same:

<input name="artiest_naam[]" />
<input name="artiest_naam[]" />
<input name="artiest_naam[]" />

The bracket at the end make it an array. We do not use any numbers in the name.
When you submit, it will get their index because it´s an array, which returns something like:

$_POST['artiestnaam'] = array(
   [0] => "whatever you typed in the first",
   [1] => "whatever you typed in the second",
   [2] => "whatever you typed in the third"
)

If I would add and delete a hundred inputs, kept 3 random inputs and submit that, it will still be that result. The code will do the counting for you.
Nice bonus: If you add some javascript which enables to change the order of the inputs, it will be in the order the user placed them (e.g. if I had changed nuymber 2 and 3, my result would be "one, third, second").

Upvotes: 2

Zakaria Acharki
Zakaria Acharki

Reputation: 67525

Working fiddle

You could use each() function to go through all the divs with class js-artist:

$('.js-artist').each(function(){
  var artiestNaam = $('input:eq(0)',this);
  var artiestURL = $('input:eq(1)',this);

  historyVar[artiestNaam.attr('id')] = artiestNaam.val();
  historyVar[artiestURL.attr('id')]  = artiestURL.val();
});

Hope this helps.

var iArtist = 1,
    tArtist = 1;
$(document).on('click', '#js-addArtist', function() {
  var artist = $('#js-artist');
  var liData = '<div class="js-artist"><input id="artiestNaam_' + iArtist + '"><input id="artiestURL_' + iArtist + '"><span class="js-removeArtist">remove</span></div>';
  $(liData).appendTo(artist);
  iArtist++;
  tArtist++;
});
$(document).on('click', '.js-removeArtist', function() {
  if (tArtist > 1) {
    $(this).parents('.js-artist').slideUp("normal", function() {
      $(this).remove();
      tArtist--;
    });
  }
});
$(document).on('click', '#js-print', function() {
  var historyVar = [];
  $('.js-artist').each(function(){
    var artiestNaam = $('input:eq(0)',this);
    var artiestURL = $('input:eq(1)',this);

    historyVar[artiestNaam.attr('id')] = artiestNaam.val();
    historyVar[artiestURL.attr('id')]  = artiestURL.val();
  });
  console.log(historyVar); 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="js-addArtist">add</span>
<div id="js-artist">
  <div class="js-artist">
    <input id="artiestNaam_0">
    <input id="artiestURL_0">
    <span class="js-removeArtist">remove</span>
  </div>
</div>
<span id="js-print">print</span>

Upvotes: 1

Richard Hamilton
Richard Hamilton

Reputation: 26444

Initialize a count variable. This way if an input field is removed, a new id still gets initialized. To get the data for each of them, jQuery has a convenient each function to iterate over all elements.

Hope this helps

count = 0;
$("#add").on("click", function() {
    count++;
    $("body").append("<input id='" + count + "'</input>");
});

$("#remove").on("click", function() {
    var index = prompt("Enter the index of the input you want to remove");
    $("input:eq(" + index + ")").remove();
});

$("#log-data").on("click", function() {
    $("input").each(function() {
        console.log($(this).val());
    });
});
#btn-group {
  margin-bottom: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="btn-group">
  <button id="add">Add Input Fields</button>
  <button id="remove">Remove Input Fields</button>
  <button id="log-data">Log Data</button>
</div>

Upvotes: 0

Related Questions