Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2895
  • Last Modified:

Copy elements from one textarea to other textarea fields with jquery

Hi Experts,

Here's my code:
<textarea id="optinform">
    <form method="post" action="http://www.aweber.com/scripts/addlead.pl" onsubmit="wps_ref(this)" class="wpsform">
    <input id="test" type="hidden" name="meta_web_form_id" value="1771438030">
    <input type="hidden" name="meta_split_id" value="">
    <input type="hidden" name="listname" value="generation_wso">
    <input type="hidden" name="redirect" value="http://www.aweber.com/thankyou-coi.htm?m=text">
    <input type="hidden" name="meta_adtracking" value="Generation_Plugin_buyers">
    <input type="hidden" name="meta_message" value="1">
    <input type="hidden" name="meta_required" value="name,email">
    <input type="hidden" name="meta_tooltip" value="">
    <input type="text" class="name_field" name="name" value="sam" size="20">
    <input type="text" class="email_field" name="email" value="Zado1984@gmail.com" size="20">
    <input type="text" class="email_field" name="email" value="Zado1984@gmail.com" size="20">
    <input type="submit" name="submit" value="" class="submit_field">
    </form>
</textarea>

<input type="button" value="proccess" id="proccess">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$("#proccess").click(function() {
	$("#hiddenfields").val($("#optinform").val());
	/********** I NEED HELP HERE **********/
});
</script>

<textarea id="formaction"></textarea>
<textarea id="regularfields"></textarea>
<textarea id="hiddenfields"></textarea>
<textarea id="otherfields"></textarea>

Open in new window

My function just copies value of the top textarea into #hiddenfields textarea. But what I want is:
- copy form action value into #formaction textarea
- copy all input fields with type=text into #regularfields textarea
- copy all input fields with type=hidden into #hiddenfields textarea
- copy all other input fields (different than text and hidden) into #otherfields textarea

Thanks for any help or hint.
0
Zado
Asked:
Zado
  • 5
  • 3
2 Solutions
 
Julian HansenCommented:
A couple of things odd about your code?

You have contained your form code in a <textarea> so that is going to display as text not as an active form - why have you done that?

Then assuming you want to process the contents of the form - i.e. remove the enclosing <textarea> then you might want to do something like this (I have added an id to the form to get the action attribute out

<!doctype html>
<html>
<head>
<title>Title</title>
<script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
    <form method="post" id="theform" action="http://www.aweber.com/scripts/addlead.pl" onsubmit="wps_ref(this)" class="wpsform">
    <input id="test" type="hidden" name="meta_web_form_id" value="1771438030">
    <input type="hidden" name="meta_split_id" value="">
    <input type="hidden" name="listname" value="generation_wso">
    <input type="hidden" name="redirect" value="http://www.aweber.com/thankyou-coi.htm?m=text">
    <input type="hidden" name="meta_adtracking" value="Generation_Plugin_buyers">
    <input type="hidden" name="meta_message" value="1">
    <input type="hidden" name="meta_required" value="name,email">
    <input type="hidden" name="meta_tooltip" value="">
    <input type="text" class="name_field" name="name" value="sam" size="20">
    <input type="text" class="email_field" name="email" value="Zado1984@gmail.com" size="20">
    <input type="text" class="email_field" name="email" value="Zado1984@gmail.com" size="20">
    <input type="submit" name="submit" value="" class="submit_field">
</form>

<input type="button" value="proccess" id="proccess">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$("#proccess").click(function(e) {
	e.preventDefault();
	$("#hiddenfields").val($("#optinform").val());
	console.log($(this).closest('form').attr('action'));
	$('#formaction').val($('#theform').attr('action'));
	$('input:hidden').each(function() {
		$('#hiddenfields').val($('#hiddenfields').val() + $(this).val() + "\n");
	});
	$('input:text').each(function() {
		$('#regularfields').val($('#regularfields').val() + $(this).val() + "\n");
	});
	/********** I NEED HELP HERE **********/
});
</script>

<textarea id="formaction"></textarea>
<textarea id="regularfields"></textarea>
<textarea id="hiddenfields"></textarea>
<textarea id="otherfields"></textarea>
</body>
</html>

Open in new window


Will post code for the 'otherfields' once I understand why your code is structured the way it is and if the above is on the right track.
0
 
ZadoAuthor Commented:
Thanks for your help. I am not jquery expert, so I appreciate any help.
My code should be in textarea, this script is a part of Wordpress plugin I'm currently building. I get it with this code:
var form=$("#optinform").val();

Open in new window

It works like this:
User inserts his form code into textarea, clicks 'proccess' button and it's proccessed as I described earlier. I know how to find input type or value (found it on stackoverflow here: http://stackoverflow.com/questions/3165413/how-to-get-input-type-using-jquery), but I need to move whole input into specific textareas. So when we proccess the form above, the output in each textarea should be something like this:

content of #formaction textarea is ok now, that's what I want, but:
content of #regularfields should look like this:
<input type="text" class="name_field" name="name" value="sam" size="20">
    <input type="text" class="email_field" name="email" value="Zado1984@gmail.com" size="20">
    <input type="text" class="email_field" name="email" value="Zado1984@gmail.com" size="20">

Open in new window

content of #hiddenfields textarea:
<input type="hidden" name="meta_split_id" value="">
    <input type="hidden" name="listname" value="generation_wso">
    <input type="hidden" name="redirect" value="http://www.aweber.com/thankyou-coi.htm?m=text">
    <input type="hidden" name="meta_adtracking" value="Generation_Plugin_buyers">
    <input type="hidden" name="meta_message" value="1">
    <input type="hidden" name="meta_required" value="name,email">
    <input type="hidden" name="meta_tooltip" value="">
    

Open in new window

content of #otherfields: same: whole input fields (different than type=text and type=hidden).
And last one should be #submitbutton textarea with whole input.

To make it probably easier, I need to retrieve and copy only type, name and value of each input field, ignore anything else (id, class etc.)
0
 
Julian HansenCommented:
Ok then this should do it

I have removed the enclosing <textarea> to test

<!doctype html>
<html>
<head>
<title>Title</title>
<script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
    <form method="post" id="theform" action="http://www.aweber.com/scripts/addlead.pl" onsubmit="wps_ref(this)" class="wpsform">
    <input id="test" type="hidden" name="meta_web_form_id" value="1771438030">
    <input type="hidden" name="meta_split_id" value="">
    <input type="hidden" name="listname" value="generation_wso">
    <input type="hidden" name="redirect" value="http://www.aweber.com/thankyou-coi.htm?m=text">
    <input type="hidden" name="meta_adtracking" value="Generation_Plugin_buyers">
    <input type="hidden" name="meta_message" value="1">
    <input type="hidden" name="meta_required" value="name,email">
    <input type="hidden" name="meta_tooltip" value="">
    <input type="text" class="name_field" name="name" value="sam" size="20">
    <input type="text" class="email_field" name="email" value="Zado1984@gmail.com" size="20">
    <input type="text" class="email_field" name="email" value="Zado1984@gmail.com" size="20">
    <input type="submit" name="submit" value="" class="submit_field">
</form>

<input type="button" value="proccess" id="proccess">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$("#proccess").click(function(e) {
	e.preventDefault();
// For each input found
	$('input', '#theform').each(function() {
// Set the output box based on the type
		var field = 'otherfields';
		if ($(this).attr('type') == 'hidden') field = 'hiddenfields';
		if ($(this).attr('type') == 'text') field = 'regularfields';
// Append to the box
		$('#' + field).val($('#' + field).val() + '<input type="' + $(this).attr('type') + '" name="' + $(this).attr('name') + '" value="'+ $(this).val() +'" />\n');
	});
});
</script>

<textarea id="formaction"></textarea>
<textarea id="regularfields"></textarea>
<textarea id="hiddenfields"></textarea>
<textarea id="otherfields"></textarea>
</body>
</html>

Open in new window

0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
ZadoAuthor Commented:
Ok, that was easy, here's my code:
<!doctype html>
<html>
<head>
<title>Title</title>
<script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
    <form method="post" id="theform" action="http://www.aweber.com/scripts/addlead.pl" onsubmit="wps_ref(this)" class="wpsform">
    <input id="test" type="hidden" name="meta_web_form_id" value="1771438030">
    <input type="hidden" name="meta_split_id" value="">
    <input type="hidden" name="listname" value="generation_wso">
    <input type="hidden" name="redirect" value="http://www.aweber.com/thankyou-coi.htm?m=text">
    <input type="hidden" name="meta_adtracking" value="Generation_Plugin_buyers">
    <input type="hidden" name="meta_message" value="1">
    <input type="hidden" name="meta_required" value="name,email">
    <input type="hidden" name="meta_tooltip" value="">
    <input type="text" class="name_field" name="name" value="sam" size="20">
    <input type="text" class="email_field" name="email" value="Zado1984@gmail.com" size="20">
    <input type="text" class="email_field" name="email" value="Zado1984@gmail.com" size="20">
    <input type="submit" name="submit" value="" class="submit_field">
</form>

<input type="button" value="proccess" id="proccess"><br/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$("#proccess").click(function(e) {
	e.preventDefault();
	$("#hiddenfields").val($("#optinform").val());
	console.log($(this).closest('form').attr('action'));
	$('#formaction').val($('#theform').attr('action'));
	$('input:hidden').each(function() {
		$('#hiddenfields').val($('#hiddenfields').val()+"<input type='hidden' name='"+$(this).attr('name')+"' value='"+$(this).val()+"'>\n");
	});
	$('input:text').each(function() {
		$('#regularfields').val($('#regularfields').val()+"<input type='text' name='"+$(this).attr('name')+"' value='"+$(this).val()+"'>\n");
	});
	$('input:submit').each(function() {
		$('#submitbutton').val($('#submitbutton').val()+"<input type='submit' name='"+$(this).attr('name')+"' value='"+$(this).val()+"'>\n");
	});
});
</script>

<textarea style="width:700px; height:200px" id="formaction"></textarea><br/>
<textarea style="width:700px; height:200px" id="regularfields"></textarea><br/>
<textarea style="width:700px; height:200px" id="hiddenfields"></textarea><br/>
<textarea style="width:700px; height:200px" id="submitbutton"></textarea><br/>
</body>
</html>

Open in new window

But I need your help with two things here:
- when click 'proccess' button second time, I need to proccess the form from the beginning, I mean now it repeats the conversion and adds same values to textareas (duplicates them).
- second thing is: for now it works nicely with form, but how proccess form within 'textarea'?
0
 
ZadoAuthor Commented:
Thanks, I'll test it now. In a meantime, could you help me with my first problem, please? Proccess the form from start (do not add new values to existing values, but add new when clicked 'proccess' button)
0
 
ZadoAuthor Commented:
Yes, your script is great, thank you. So I only need to make it work with form closed inside of textarea and reset all textareas (except the main one with form) and insert the values again when you click the 'proccess' button.
0
 
Julian HansenCommented:
So you want to take the form out of the text area and make it an actual html form and then process that form when the process button is clicked.

Basically you would add
<div id="formarea">
$('#formarea').html($('#optinform').val());
$('#process').hide();
$('#otherprocess').show() // Link this to processing the form.

I am not sure I fully understand what you are trying to do but from the gist of your posts I think the above should get you going in the right direction.
0
 
ZadoAuthor Commented:
Excellent job, that's exactly what I wanted :-) Here's my final code:
<!doctype html>
<html>
<head>
<title>Title</title>
<script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
<textarea style="width:700px; height:200px" id="optinform">
<form method="post" action="http://www.aweber.com/scripts/addlead.pl" onsubmit="wps_ref(this)" class="wpsform">
    <input id="test" type="hidden" name="meta_web_form_id" value="1771438030">
    <input type="hidden" name="meta_split_id" value="">
    <input type="hidden" name="listname" value="generation_wso">
    <input type="hidden" name="redirect" value="http://www.aweber.com/thankyou-coi.htm?m=text">
    <input type="hidden" name="meta_adtracking" value="Generation_Plugin_buyers">
    <input type="hidden" name="meta_message" value="1">
    <input type="hidden" name="meta_required" value="name,email">
    <input type="hidden" name="meta_tooltip" value="">
    <input type="checkbox" name="checkboxname" value="checked">
    <input type="text" class="name_field" name="name" value="sam" size="20">
    <input type="text" class="email_field" name="email" value="Zado1984@gmail.com" size="20">
    <input type="text" class="email_field" name="email" value="Zado1984@gmail.com" size="20">
    <input type="submit" name="submit" value="" class="submit_field">
</form>
</textarea>

<div id="formarea" style="display:none"></div>

<input type="button" value="proccess" id="proccess"><br/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$("#proccess").click(function(e) {
	e.preventDefault();
	$('#formarea').html($('#optinform').val());
	//reset textareas
	$('#formaction').val('');
	$('#regularfields').val('');
	$('#hiddenfields').val('');
	$('#otherfields').val('');
	$('#submitbutton').val('');
	$('#formaction').val($('#formarea form').attr('action'));
	$('input', '#formarea').each(function() {
		//proccess the form
		var field = 'otherfields';
		if ($(this).attr('type') == 'hidden') field = 'hiddenfields';
		if ($(this).attr('type') == 'text') field = 'regularfields';
		if ($(this).attr('type') == 'submit') field = 'submitbutton';
		$('#' + field).val($('#' + field).val() + '<input type="' + $(this).attr('type') + '" name="' + $(this).attr('name') + '" value="'+ $(this).val() +'" />\n');
	});
});
</script>

<textarea style="width:700px; height:200px" id="formaction"></textarea><br/>
<textarea style="width:700px; height:200px" id="regularfields"></textarea><br/>
<textarea style="width:700px; height:200px" id="hiddenfields"></textarea><br/>
<textarea style="width:700px; height:200px" id="otherfields"></textarea><br/>
<textarea style="width:700px; height:200px" id="submitbutton"></textarea><br/>
</body>
</html>

Open in new window

Also, could you help me with this, please?
http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Jquery/Q_27826009.html
It's about the same script, I just need to convert it as described in my new question.

Thanks a lot for your help!
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 5
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now