jQuery, Clone, Append

[neilfurry]

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

[Psycho]

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/

[maxxd]

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 June 30, 2016 by maxxd

[neilfurry]

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

[Psycho]

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.

[neilfurry]

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

[neilfurry]

here is the jsfiddle:

 

https://jsfiddle.net/10t3gzb9/3/

[Psycho]

https://jsfiddle.net/10t3gzb9/4/

[neilfurry]

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

 

 

Thank you Psycho.

[Muddy_Funster]

I'm not too fussed about why it's cutting rather than copying, but: https://jsfiddle.net/mphur5eq/ works with dynamic inputs.

[kicken]

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 June 30, 2016 by kicken

[neilfurry]

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.

[Muddy_Funster]

Updated using clone() with appendTo() https://jsfiddle.net/mphur5eq/1/

 

as explained here: https://api.jquery.com/clone/

[neilfurry]

Thank you very much Muddy_Funster ...

[neilfurry]

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

[Muddy_Funster]

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 June 30, 2016 by Muddy_Funster

[neilfurry]

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

[neilfurry]

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 />

[Muddy_Funster]

Sorry, the Edit didn't update the link destination, it was still going to /2/ rather than the /3/ - https://jsfiddle.net/mphur5eq/3/ 

 

If that doesn't update just change the /2/ in the address bat to /3/ and you're good to go.

[neilfurry]

Thank you so much Muddy... that works with charm...

[susandecone]

you can view video :https://codek.tv/v/SydIDrQ/javascript-functions-tutorial/

Edited August 4, 2016 by susandecone