Dropdown menus instead textarea - jquery
Hi Experts,
Here's my code:
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.
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>
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.
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?
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>
if ($(this).attr('type') == 'text') {
var optionvalue = $('<input type="' + $(this).attr('type') + '" name="' + $(this).attr('name') + '" value="'+ $(this).val() +'" />');
var optiontext = $(this).attr('name');
}
Ok that is a good start - basically you want to use the same each function and then build up two lists with same value
Sorry - no time to test today - work on that and if you get stuck post back and I will pick up tomorrow.
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++;
}
});
Sorry - no time to test today - work on that and if you get stuck post back and I will pick up tomorrow.
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:
Here's the part creating html <option> elements from text input fields and inserting them between <select> html tags:
<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>
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);
}
$('#emailfield option:eq(1)').attr('selected','selected');
Premium Content
You need an Expert Office subscription to comment.Start Free Trial