asked on

Dropdown menus instead textarea - jquery

Hi Experts,

Here's my 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/> 
<!-- 
instead the textarea above I need two dropdown fields, where in first one there's first detected
text input selected and in second one there's second detected text field selected:
-->
<select>
	<!-- list of all text inputs, first one selected -->
</select>
<select>
	<!-- list of all text inputs, second one selected -->
</select>

<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

And it's all explain inside of the code in html comments:
I need to change the jquery script there and instead dropping all the text inputs into textarea, drop them into select, display each input as separate option.
Hope that's clear.

Thanks for any help.

Julian Hansen

Ok brain is a bit foggy - any chance you can do a mock up of what you want to see - i.e. manually code the <selects> based on the above example so we can see what you are after?

Zado

ASKER

Yeah, sorry about not being clear. The html output I expect is this:

<select id="namefield">
	<option value='<input type="text" name="name" value="sam">' selected="selected">name</option>
	<option value='<input type="text" name="email" value="Zado1984@gmail.com">'>email</option>
	<option value='<input type="text" name="email" value="Zado1984@gmail.com">'>email</option>
</select>
<select id="emailfield">
	<option value='<input type="text" name="name" value="sam">'>name</option>
	<option value='<input type="text" name="email" value="Zado1984@gmail.com">' selected="selected">email</option>
	<option value='<input type="text" name="email" value="Zado1984@gmail.com">'>email</option>
</select>

Open in new window

I started doing something in your jquery code (not sure it's the best way), detect name and value of text fields, but then I have to put them together and create <option> html elements and put them between <select> tags.

if ($(this).attr('type') == 'text') {
   var optionvalue = $('<input type="' + $(this).attr('type') + '" name="' + $(this).attr('name') + '" value="'+ $(this).val() +'" />');
   var optiontext = $(this).attr('name');
}

Open in new window

ASKER CERTIFIED SOLUTION

Julian Hansen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Zado

ASKER

Ok, I'll try that, thanks a lot.

Zado

ASKER

I've done it, in a bit different way but I based on your idea, thank you, you helped me a lot! Here's my whole jquery script:

<script type="text/javascript">
var myFunction = function(e) {
	e.preventDefault();
	$('#formarea').html($('#optinform').val());
	//reset textareas
	$('#formaction').val('');
	$('#regularfields').val('');
	$('#hiddenfields').val('');
	$('#otherfields').val('');
	$('#submitbutton').val('');
	$('#namefield option').remove();
	$('#emailfield option').remove();
	
	$('#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 = 'textfields';

		//make each text field an <option> and add insert it between <select> html tag
		if ($(this).attr('type') == 'text') {
			var optionvalue = $('<input type="' + $(this).attr('type') + '" name="' + $(this).attr('name') + '" value="'+ $(this).val() +'" />');
			temp = '<option value="' + optionvalue + '">' + $(this).attr('name') + '</option>';
			$('#namefield').append(temp);
			$('#emailfield').append(temp);
		}

		if ($(this).attr('type') == 'submit') field = 'submitbutton';
		$('#' + field).val($('#' + field).val() + '<input type="' + $(this).attr('type') + '" name="' + $(this).attr('name') + '" value="'+ $(this).val() +'" />\n');
	});
	//select the second option in second dropdown field
    $('#emailfield option:eq(1)').attr('selected','selected');
};
$('#optinform').keyup(myFunction).mouseout(myFunction);
</script>

Open in new window

And a bit of explanation here:
Here's the part creating html <option> elements from text input fields and inserting them between <select> html tags:

		if ($(this).attr('type') == 'text') {
			var optionvalue = $('<input type="' + $(this).attr('type') + '" name="' + $(this).attr('name') + '" value="'+ $(this).val() +'" />');
			temp = '<option value="' + optionvalue + '">' + $(this).attr('name') + '</option>';
			$('#namefield').append(temp);
			$('#emailfield').append(temp);
		}

Open in new window

And then at the end of the script I added part selecting second option in second dropdown field (email field):

$('#emailfield option:eq(1)').attr('selected','selected');

Open in new window

Again, thank you for your great help, I appreciate that!

Julian Hansen

You are welcome