While adding a div content into another div on click of a button

Question

Here is my code --

<div id="div1">

    this is div 1 

    <form class="thisformtobeaddeverytime">
    <!-- this form to be add on click #btn1 -->
    </form>

</div>

<div id="div2">

    this is div 2 

      <form class="thisformtobeaddeverytime">
             <!-- this form to be add on click #btn2 -->
      </form> 

</div>

<div id="showtheaddedform">

          //here my form will be push on click to button

</div>

<button type="button" id="btn1">Add the form1</button>
<button type="button" id="btn2">Add the form2</button>

// the click function in my js file are as -

$(document).on("click","#btn1",function(){
          $("#showtheaddedform").append($("#div1").html());
});
$(document).on("click","#btn2",function(){
          $("#showtheaddedform").append($("#div2").html()); 
 });

now the problem is --

On click #bun1 it's adding the content of #div1 into #showtheaddedform (i.e. the form attribute and all element inside form), like

<div id="showtheaddedform">
      <form class="thisformtobeaddeverytime">
         <!-- this form to be add on click #btn1 -->
      </form>
</div>

but when I'm clicking #btn2 it's adding only the element inside the form , like

  <div id="showtheaddedform">
     <!-- this form to be add on click #btn2 -->
  </div>

[ NOTE : I've not written any kind of remove query ]

..any idea , how it's removing !!!

the point is it's removing the form tag only..all other text input are available . — Chinmoy
– Chinmoy, Commented Mar 6, 2014 at 7:50
What do you mean it's removing the form tag only Do you want move div element as well? — Pavlo
– Pavlo, Commented Mar 6, 2014 at 7:52

Anoop Joshi P · Accepted Answer · 2014-03-06 07:53:47Z

1

Both your buttons have the same id. Also there is a syntax mistake in

$(document).on("click","#btn1",function(){
      $("#showtheaddedform").append($("#div1").html());
 }

add

); to it

DEMO

Actually Form tag is getting append to the div on second button's click. But in the UI it will not be shown as it doesnt have any tags or text in it. Try giving some text or tag in it. It will work

EDIT

Updated Fiddle

edited Mar 6, 2014 at 7:53

answered Mar 6, 2014 at 7:42

Anoop Joshi P

25.6k9 gold badges35 silver badges54 bronze badges

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

2 Comments

Chinmoy Over a year ago

problem is not with those ... I've many text input in each form .. the point is it's removing the form tag only..all other text input are available .

Anoop Joshi P Over a year ago

@ChinmoyMaity its working fine, please have a look at the updated fiddle

Thomas · Accepted Answer · 2014-03-06 07:40:10Z

0

Your second button appears to have the wrong ID.

<button type="button" id="btn1">Add the form2</button>

Change to

<button type="button" id="btn2">Add the form2</button>

answered Mar 6, 2014 at 7:40

Thomas

3231 gold badge4 silver badges15 bronze badges

1 Comment

Chinmoy Over a year ago

sorry ..that was a typo ..it's #btn2

Panjab Shelke · Accepted Answer · 2014-03-06 08:00:04Z

0

Try Below code in java script tag and also change your button id to btn1 and btn2

$(document).ready(function(){
//alert("hi");
$("#btn1").click( function()
{
    $("#showtheaddedform").empty();
    $("#showtheaddedform").append($("#div1").html());

});
$("#btn2").click( function()
{
    $("#showtheaddedform").empty();
    $("#showtheaddedform").append($("#div2").html());

});

});

answered Mar 6, 2014 at 8:00

Panjab Shelke

215 bronze badges

Collectives™ on Stack Overflow

While adding a div content into another div on click of a button

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related