...

View Full Version : Put values from 2 select drop downs into one input with javascript



doug7410
09-27-2012, 04:48 PM
Hello,

I need to make a form that can create a URL like the one below. I need to have two drop down boxes that get their selected values entered into another input with a + sign between them. I want to do this with javascript. I think the example below explains it. It seems like it should be simple, but I have very little experience with javascript. Thanks for your help.

This is what I want the form to do http://www.myurl.com?search=a+1

Here is the example form and what I need it to do.


<form method="GET" action="www.myurl.com">

<input type="hidden" name="search" value="search1+search2" />

<select name="search1">
<option value="a">A</option>
<option value="b">B</option>
</select>

<select name="search2">
<option value="1">1</option>
<option value="2">2</option>
</select>

</form>

As the url example shows, I don't want the form to pass the values from search1 or search2, only the value from the search input.

WolfShade
09-27-2012, 04:53 PM
Leave the value of "search" blank.

Create a function that will set the value of "search" to

document.forms["formName"].search1.options[document.forms["formName"].search1.selectedIndex].value + document.forms["formName"].search2.options[document.forms["formName"].search2.selectedIndex].value

EVERY element in a form is passed when the form is submit, you just have to have the receiving code separate out what you need.

doug7410
09-27-2012, 05:06 PM
Thanks for the reply. I really know very little about javascript. I'm trying to figure it out as I go. I created this and put it in the head tag


<script>
function myFunction()
{
document.forms["sortform"].search1.options[document.forms["sortform"].search1.selectedIndex].value + document.forms["sortform"].search2.options[document.forms["sortform"].search2.selectedIndex].value
}

</script>


And added the function to the form like this


<form onSubmit="myFunction" method="GET" action="www.myurl.com">

and i left the value of search blank like this


<input type="hidden" name="search" value="" />

But no luck. What am I doing wrong?

doug7410
09-27-2012, 05:09 PM
I forgot to add that I gave the form and id and name of "sortform"


<form onSubmit="myFunction" name="sortform" id="sortform" method="GET" action="www.myurl.com">

Philip M
09-27-2012, 05:36 PM
<form name = "sortform" id = "sortform">

<input type="text" size ="50" id="search" />
<!-- change to "hidden" after testing -->

<select id="search1" onchange = "makeURL()">
<option value = "0">Choose A or B</option>
<option value="a">A</option>
<option value="b">B</option>
</select>

<select id="search2" onchange = "makeURL()">
<option value = "0">Choose 1 or 2</option>
<option value="1">1</option>
<option value="2">2</option>
</select>

<script type = "text/javascript">
function makeURL() {
var s1 = document.getElementById("search1").value;
var s2 = document.getElementById("search2").value;
// no need for involved selected index syntax
if (s1 != 0 && s2 !=0) { // both select lists have option chosen
var f = (s1 + "+" + s2);
document.getElementById("search").value = "http://www.myurl.com/?search=" + f;
}
}

</script>

Logic Ali
09-27-2012, 05:36 PM
The only scenario that justifies doing this, is if you're targeting a server script that you don't control.
You must warn users that they need script enabled, or they'll soon be doubting your parentage.


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<noscript>
<div style='color:#fff;background-color:#f00;text-align:center;font-weight:bold'>
Please enable JavaScript, or this form will be inoperable.
</div>
</noscript>
<form id='myForm' method="GET" action="http://myurl.com">

<input type="text" size='50' name="search" value="" />

<select id="search1">
<option value="">Select</option>
<option value="a">A</option>
<option value="b">B</option>
</select>

<select id="search2">
<option value="">Select</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<br>
<input type = 'submit'>
</form>

<script type="text/javascript">

(function( theForm )
{
theForm.search1.onchange = theForm.search2.onchange = function()
{
this.form.search.value = "http://www.myurl.com?search=" + this.form.search1.value + '+' + this.form.search2.value;
}

theForm.onsubmit = function()
{
var err = this.search1.selectedIndex < 1 || this.search2.selectedIndex < 1;

if( err )
alert( 'Must select from both dropdowns' );
else
this.search1.selectedIndex = this.search2.selectedIndex = -1;

return !err;
}

})( document.getElementById( 'myForm' ) );

</script>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum