CODEWITHSUNDEEP
jquery
Ann
Ann

Reputation: 139

How to add a form to a form?

I want to add a form below a form when I click the button. Code so far:

<form class="a" action="" method="" > 
  product:<input type="text">
  price:<input type="text">
</form>
<div class="b"> </div>
<button class="c"> add </button>

jquery:

  $('.c').on('click', function(){
    $('.a').insertAfter($('.b'))
  });

I tried with append but it is not working too.

Upvotes: 1

Views: 41

Answers (2)

Kolby
Kolby

Reputation: 2865

You forgot the dot in front of b.

$('.a').insertAfter($('.b'))


$('.c').on('click', function(){
    $('.a').appendTo($('.b'));
});

Working example: http://jsfiddle.net/t5sx2h4v/1/

And here is how you can append a new form.

$('.c').on('click', function(){
    $('<form><input type="text"/></form>').appendTo($('.b'));
});

http://jsfiddle.net/t5sx2h4v/2/

Upvotes: 1

charlietfl
charlietfl

Reputation: 171669

You want to use clone() to copy the first form and then use append() to put it into the other container

$('.c').on('click', function(){
    var $clone = $('.a:first').clone();
    // clear all values in clone
    $clone.find(':input').val('');
    $('.b').append( $clone );    
});

The current approach you are using is simply going to move the existing one

DEMO

Upvotes: 0

Related Questions