user2680614 user2680614 - 2 months ago 8
HTML Question

Add and remove check and input boxes

I'm trying to add and remove input and check boxes from my form but the examples I have come across won't allow me to add these with my own with custom text. How do I achieve this using JQuery?

Here is my template: https://jsfiddle.net/cg1uoh9w/4/

Here is one of the examples: http://jsfiddle.net/KPkJn/9/

<!-- -->

<div class="sub-container-title">This is what I want to appear above the first box</div>

<ul class="no-style">
<li>Title</li>
<li>
<input type="text" name="text_area" class="text_area added" maxlength="50" />
<span class="input-group-btn">
<button class="btn btn-default" type="button">remove</button>
</span>
</li>
</ul>

<!-- -->

<div class="sub-container-title">This is what I want to appear above the second box</div>

<ul class="no-style">
<li>
<label><input type="checkbox" value="">Option 1</label>
<span class="input-group-btn">
<button class="btn btn-default" type="button">remove</button>
</span>
</li>
</ul>

Answer

this is how you do it...

<div>
  <input type="text" name="add_input_field" class="add_input_field" placeholder="Write input name"><input type="submit" name="add_input_submit" class="add_input_submit"><br />
  <input type="text" name="add_checkbox_field" class="add_checkbox_field" placeholder="Write checkbox name"><input type="submit" name="add_checkbox_submit" class="add_checkbox_submit"><br />
</div>
<div class="new_fields_container">
</div>

Thats the regular HTML look at the class tags on both the submit button and the text fields.

Then with jQuery

$('.add_input_submit').click(function(event) {
  event.preventDefault();
  var input_name = $('.add_input_field').val();
  var remove_name = input_name.split(' ').join('_');

  $('.new_fields_container').append('<div new_input="' + remove_name + '"><input type="text" name="' + input_name + '" placeholder="' + input_name + '">' + input_name + '<input type="submit" class="remove" new_input_name="'+ remove_name +'" value="remove"><br /></div>');
});

$('.add_checkbox_submit').click(function(event) {
  event.preventDefault();
  var input_name = $('.add_checkbox_field').val();
  var remove_name = input_name.split(' ').join('_');


  $('.new_fields_container').append('<div new_input="' + remove_name + '"><input type="checkbox" name="' + input_name + '" value="' + input_name + '"> ' + input_name + '<input type="submit" class="remove" new_input_name="'+ remove_name +'" value="remove"><br /></div>');
});

$('body').on('click', '.remove', function(event) {
  event.preventDefault();
  var input_name = $(this).attr('new_input_name');
  $('[new_input='+input_name+']').remove();
});

The jQuery is listening for the click on the submit buttons depending on the class name for example the $('.add_input_submit').

The .val(); is actually reading the input field, so the name you want it and saving it on a variable, then you can included on the HTML that you will create on the next steps.

The event.preventDefault(); will stop the "form" to be submitted literally (jQuery doesn't need to submit the actual form since is listening to the clicks all the time).

The .append() is adding the actual HTML code (So your new input values) to the dynamic div you selected in this case new_fields_container

REMOVE

Now to remove I added the $('body').on('click', '.remove' this .click is different because it needs to listen to ajax generated element, that's why it will parse the whole body of the site to listen for a click.

I also added the remove button to the generated HTML and added a div container to every new field.

Now the .remove(); will search for the div with the new_input="" attribute and it will remove it.

Heres the code

UPDATED WITH REMOVE:

Fiddle example

Hope this helps!

Comments