We help IT Professionals succeed at work.

Dropdown menus instead textarea - jquery

Zado
Zado asked
on
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.
Comment
Watch Question

CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
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?

Author

Commented:
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

CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019
Commented:
Ok that is a good start - basically you want to use the same each function and then build up two lists with same value
var count = 1;
$('input').each(function()  {
  if ($(this).attr('type') == 'text') {
    // now do a check here to see if this is the first time you are going around
    // in which case make the item in list 1 selected
    // add to both list1 and list2
    // check if second time arround and make second list item selected
    // otherwise don't add selected
    temp = '<option value="<input ....>">...</option>';
    if (count == 1) {
       list1 += '<option value="<input ....>" selected="selected">...</option>';
       list2 += temp;
    }
   else if (count == 2) {
       list1 += temp;
       list2 += '<option value="<input ....>" selected="selected">...</option>';
    }
   else {
       list1 += temp;
       list2 += temp;
   }
  count++;
 }
});

Open in new window


Sorry - no time to test today - work on that and if you get stuck post back and I will pick up tomorrow.

Author

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

Author

Commented:
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!
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
You are welcome

Explore More ContentExplore courses, solutions, and other research materials related to this topic.