Jump to content
neilfurry

jQuery, Clone, Append

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.,

Share this post


Link to post
Share on other sites

As you have posted no code and your request is not 100% clear I'm exactly sure what you need.

 

But, here is a rough example based on what I think you are asking: https://jsfiddle.net/10t3gzb9/

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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.

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

I think this wont work on this as the left and right form contains fields and controls that is being cloned. see attached

 

post-54475-0-90900200-1467290529_thumb.png

 

Thank you Psycho.

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Hi Muddy_Funster,

 

I see that your solution is close to what i have in mind. is there a way that when i click on "Copy" it will not clear or empty the left side form?

 

Thank you so much for your time.

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

This is already ok https://jsfiddle.net/mphur5eq/1/

 

However the only problem there is the positioning of the form close tag </form>

 

Which should be

 

<form>

       <input />

       <input />

       <input />

</form>

 

and not

 

<form> </form>

       <input />

       <input />

       <input />

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×

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.