Jump to content

jQuery, Clone, Append


neilfurry
Go to solution Solved by Muddy_Funster,

Recommended Posts

Hello Mate,

 

 

I have another question with clone or append.

 

I have two div's containing form with tables in between of the divs is "Copy" button.

 

Now, When i click on Copy, what ever is on the left side form will be copied to the right side form...

 

so basically im confused on what to use or how to implement.

 

Thank you in advance.,

Link to comment
Share on other sites

Psycho's example is good, especially given the relative vagueness of the problem description. Offering another idea on what you're possibly asking, if you've got two complete forms - one with information and one without - and you want to copy the info from the filled-out form to the empty form, you don't need to use clone. Assuming the field names are similar (for instance, id 'name_left' on the left form maps to id 'name_right' on the right form, etc.), simply loop through the filled-out form, get the value of each element and assign that value to the corresponding element in the other form.

 

HTML:

<form id='left'>
	<input type='text' name='name_left' id='name_left' />
</form>
<div id='copy-button'>Copy left to right</div>
<form id='right'>
	<input type='text' name='name_right' id='name_right' />
</form>

JavaScript:

$('#copy-button').click(function(e){
	$('#left input').each(function(){
		var currentValue = $(this).val();
		var currentField = $(this).attr('id');
		var fieldArray = currentField.split('_');
		var newField = '#' + fieldArray[0] + '_right';
		$(newField).val(currentValue);
	});
});
Edited by maxxd
Link to comment
Share on other sites

Hello Psycho,

 

Your answer is absolutely correct. that is what i need, but another question came in mind.

 

When i copy the left form to the right form and hit copy its correct, but then when i hit copy again, the right side form increased or increments

 

How can i make it so that when i first clicked on Copy it will copy the form from the left to the form to the right then when i clicked the copy the second time it will just update the form on the right.

 

thank you

Link to comment
Share on other sites

Hello Psycho,

 

Your answer is absolutely correct. that is what i need, but another question came in mind.

 

When i copy the left form to the right form and hit copy its correct, but then when i hit copy again, the right side form increased or increments

 

How can i make it so that when i first clicked on Copy it will copy the form from the left to the form to the right then when i clicked the copy the second time it will just update the form on the right.

 

As I stated to your first post, you are not providing good information. I took the time to answer as best I could based on the info given. To be honest I'm still not clear on what you want. What maxxd posted may be closer to what you want. Instead of copying the fields, I would have one set of fields on the left and one set on the right (that are hidden). Then, when the user clicks the copy button make the fields visible and populate with the values from the left.

Link to comment
Share on other sites

Hi Psycho,

 

from your post i made modification of what i need here is the code:

 

$('#copy').click(function(){
   // $("#fieldGroup").contents().clone(true).appendTo("#div2");
   var newHTMLContent = $("#div1").html();
   $("#div2").html(newHTMLContent);
})

 

That is whatever the content of the left div it will be copied to the right div. However the contents or values of the form controls from the left is not copied to the form on right.

 

How can i make it so that it will also copy the content of the controls to the right.

 

Thank you

Link to comment
Share on other sites

Why are you trying to copy the fields at all? I don't really understand the purpose of this design. Perhaps if you explained more about what your overall goal is we could help you come up with a better solution. Just copying the form may not be the best way to do whatever you need to do. Sounds like a case of the XY Problem.

Edited by kicken
Link to comment
Share on other sites

Last question Muddy,

 

when i checked the right form using firebug it shows that the fields are not within the form

 

<div id="dRight">
<form id="right"></form>
<input type="text" value="" name="textIn[]">
<input type="text" value="" name="textIn[]">
</div>
 
That is the output on the right form.. how can i make it so that the output should look like this
 
<div id="dRight">
<form id="right">
<input type="text" value="" name="textIn[]">
<input type="text" value="" name="textIn[]">
</form>
</div>
 
here is your jquery :
 
$('#btnCopy').on('click', function(){
$('#dRight').html('');
  $('#dRight').append('<form id="right">');
  $('#inputLeft :input').clone().appendTo('#dRight');
  $('#dRight').appendTo('</form>');
})
 
Thank you
Link to comment
Share on other sites

It's just the way the append thing works, You could tweak the JS using callbacks to get the exact order every time, but I just hardcoded the empty form to the right div.

 

https://jsfiddle.net/mphur5eq/3/

 

that should now do everything that you asked and more: I have included a line that renames the form elements in the right form so that they won't conflict with the ones in the original form, allowing for you to submit them separately..

 

Still, as @kicken already said, I would love to know why you want to do this in the first place.

 

::Edit changed the link - previously forgot the part that clears down the existing contents before appendTo() is run.

Edited by Muddy_Funster
Link to comment
Share on other sites

Ok, thank you,

 

This is for my brothers school project. they were asked to create an estimate form. the estimate forms should be on the left side and when an estimate form is filled you can click on a Copy button to generate an invoice to the right hand side...

 

so basically Form2 is a Clone of Form 1 which contains fields that are also cloned.

 

On this https://jsfiddle.net/mphur5eq/3/

 

The right side is incremented whenever i clicked on copy.. which should not be... just copy or clone once...

 

So basically everytime i made changes to Form1 and click on Copy, Form2 will be re populated based on the contents of Form1

 

Thank you

Link to comment
Share on other sites

  • 1 month later...
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.