Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

Dropdown menus instead textarea - jquery

Posted on 2012-08-12
6
Medium Priority
?
804 Views
Last Modified: 2012-08-12
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.
0
Comment
Question by:Zado
  • 3
  • 3
6 Comments
 
LVL 61

Expert Comment

by:Julian Hansen
ID: 38285476
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?
0
 
LVL 8

Author Comment

by:Zado
ID: 38285491
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

0
 
LVL 61

Accepted Solution

by:
Julian Hansen earned 2000 total points
ID: 38285500
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.
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
LVL 8

Author Comment

by:Zado
ID: 38285511
Ok, I'll try that, thanks a lot.
0
 
LVL 8

Author Comment

by:Zado
ID: 38285657
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!
0
 
LVL 61

Expert Comment

by:Julian Hansen
ID: 38286593
You are welcome
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses

579 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question