Add input field with jQuery

Question

I'm quite new to jQuery, so still trying to wrap my head around how it works.

I'm creating a admin-panel where the admin can insert some questions. As its not a fixed amount, the admin should be able to add or remove extra input-fields, so the admin can choose the desired amount questions.

This is how it looks graphically: Add-remove

And this is the code:

            <div class="adinputfield90">
            <input type="text" placeholder="Insert question 1"> <span class="font-entypo icon-circled-cross adaddnextremove" aria-hidden="true"></span></input>
            </div>

The span class holds the image, so the add-new input is just another webfont.

How can I get this to work, so I can add an infinite amounts of inputfields? I should of cause make sure that if theres only one input I can only add, and not remove that one.

All help is appreciated!

possible duplicate of Add / remove input field dynamically with jQuery — gpgekko
– gpgekko, Commented Mar 11, 2014 at 10:01

Prakash Bhagat · Accepted Answer · 2014-03-11 10:12:08Z

0

Include this in head section of the page

<script>
$(function(){

  $('.adinputfield90 span').click(addTextBox);

});

function addTextBox(){
  $('.adinputfield90').append('<input type="text" placeholder="Insert question 1"> <span class="font-entypo icon-circled-cross adaddnextremove" aria-hidden="true"></span></input>');
  $('.adinputfield90 span').unbind('click');
  $('.adinputfield90 span').click(addTextBox);
}
</script>

answered Mar 11, 2014 at 10:12

Prakash Bhagat

1,46616 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Vineeth Bhaskaran · Accepted Answer · 2014-03-11 10:14:46Z

0

 var template='<div class="adinputfield90">';
 template=template+'<input type="text" placeholder="Insert question 1"> 
 <span class="font-entypo icon-circled-cross adaddnextremove" aria-hidden="true"></span>
  </input>';
  template=template+'</div>'


  $("#htmlContainerId").append(template);

htmlContainerId - The container into which we are inserting the content.That will be the element just outside of 'adinputfield90' ie, the container of 'adinputfield90'

answered Mar 11, 2014 at 10:14

Vineeth Bhaskaran

2,2911 gold badge33 silver badges36 bronze badges

Comments

Rakesh Kumar · Accepted Answer · 2014-03-11 10:15:07Z

0

Try this.

$('.adaddnextremove').on('click', function(){
    $(this).parent().clone(true).appendTo('body');
    $('.remove').show();
    $('.adaddnextremove').hide();
    $('.adinputfield90').last().find('.remove').hide();
    $('.adinputfield90').last().find('.adaddnextremove').show();
});
$('.remove').on('click', function(){
    $(this).parent().remove();
});

Fiddle Demo

answered Mar 11, 2014 at 10:15

Rakesh Kumar

2,8631 gold badge22 silver badges37 bronze badges

Collectives™ on Stack Overflow

Add input field with jQuery

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related