-2

I am building a form solely with JavaScript and jQuery. I am unable to connect to any servers, so I am unable to use any PHP script at all.

How to add more and remove textboxes with an "add more"and "x" (for remove) buttons that also increments the ID's so I can capture the individual values associated with each ID and use them later in a variable.

I have seen and tested several working examples of dynamically adding more textboxes but they don't have an incrementing ID

Any suggestions would be very helpful.

HaveNoDisplayName
  • 8,291
  • 106
  • 37
  • 47
Matt
  • 31
  • 8
  • 3
    where is the relevant code... – Milind Anantwar Aug 19 '15 at 13:34
  • I don't have any "relevant code". I don't really even know where to begin, so that's why I'm asking. – Matt Aug 19 '15 at 13:46
  • 2
    You should rather hire consultant then. people are here to help and not for doing everything for you from scratch. – Milind Anantwar Aug 19 '15 at 13:48
  • I'm not looking for someone to do it from scratch, but at least point me in the right direction of how to figure it out myself. – Matt Aug 19 '15 at 13:51
  • for that you should have something to show it to other developers. the question you asked is too broad and broad questions are barely answered on SO. also you said you have seen plenty of working example. but you have not tried anything to take out of those working example. – Milind Anantwar Aug 19 '15 at 13:53

2 Answers2

2

I have used the data since you can from inbetween delete any input boxes and also you need to maintain a sequential count

You can get your elements by id #count0 , #count1 ... (make sure you have a null check as if you wish to delete #count1 so it will not be there)

function addMore(){
  var inps = $('#wrapper > div:last').data('count')+1 || 0;
  $('#wrapper').append('<div data-count="'+inps+'"><input type=text id="count'+inps+'" class="inp"/> <a class=remove>X</a></div>');
}

$('#wrapper').on('click' , 'a.remove' ,function(){
  $(this).closest('div').remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id=wrapper>
  </div>
<button id=add onclick="addMore()">Add More</button>
Raghavendra
  • 3,530
  • 1
  • 17
  • 18
  • 1
    This code shows some bad habits: Don't use `.data()` where you can use `.attr()`. Next one is `onclick` attribute - It's commonly better to have JS independent of the actual markup. – Artur Filipiak Aug 19 '15 at 14:05
  • I am new. Can you give me to read, why attr why not data ?? I got the second point. Thanks for the advice –  Aug 19 '15 at 14:07
  • 1
    It's about the accessibility of the data. You're actually storing just a simple string `countX`, why would you handle that with much more complex method as `.data()` is ? `.data()` is actually used for something else. [attr vs data (just a quick search on SO)](http://stackoverflow.com/questions/7261619/jquery-data-vs-attr) – Artur Filipiak Aug 19 '15 at 14:13
  • Ok I understand. I thought I had to parse again since data gives you parsed result, nevermind. Nice insight. –  Aug 19 '15 at 14:16
0

function addMore(){
  var inps = $('#wrapper > div:last').data('count')+1 || 0;
  $('#wrapper').append('<div data-count="'+inps+'"><input type=text id="count'+inps+'" class="inp"/> <a class=remove>X</a></div>');
}

$('#wrapper').on('click' , 'a.remove' ,function(){
  $(this).closest('div').remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id=wrapper>
  </div>
<button id=add onclick="addMore()">Add More</button>

function addMore(){
  var inps = $('#wrapper > div:last').data('count')+1 || 0;
  $('#wrapper').append('<div data-count="'+inps+'"><input type=text id="count'+inps+'" class="inp"/> <a class=remove>X</a></div>');
}

$('#wrapper').on('click' , 'a.remove' ,function(){
  $(this).closest('div').remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id=wrapper>
  </div>
<button id=add onclick="addMore()">Add More</button>

function addMore(){
  var inps = $('#wrapper > div:last').data('count')+1 || 0;
  $('#wrapper').append('<div data-count="'+inps+'"><input type=text id="count'+inps+'" class="inp"/> <a class=remove>X</a></div>');
}

$('#wrapper').on('click' , 'a.remove' ,function(){
  $(this).closest('div').remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id=wrapper>
  </div>
<button id=add onclick="addMore()">Add More</button>
Amit Pundir
  • 1