Need some help with my search box please ..

**teamv** · 08-30-2006, 09:10 PM

Hi all, i would like some help with something if you would be so kind. I posted this in the php thread but was told (on another forum) that it is a javascript solution thats needed.

"make the onchange event of your select box call a js function that validates the selected value, changes the action of the form, and submits"

Basically,

I have this search box in my header ..

With this code.

<div style="padding:5px;">
<form method="get" action="http://www.xxxxxxx.com/yyyyyy/">
<table style="width:50%;" cellpadding="5">
<tr>
<td style="vertical-align:top;font-size:9pt;">
input type="text" value="search ..." id="search" onkeyup="searchSel()">
<SELECT id="groups">
<option value="">Select:</option>
<option value="user">Users</option>
<option value="event">Events</option>
<option value="gallery">Gallery</option>
</select>
<input type="submit" value="Go" class="mainmenu66" onmouseover="this.className='mainmenu77';" onmouseout="this.className='mainmenu66';"
</div>
</td>
</tr>
</table>
</form>

And am trying to do 2 things.

1. Remove the 'go' button, and have it execute the search when the user selects an option from the drop down box.

2. The 'action' of the form to goto a different place depending on the users selection within the drop down box -

So; if they select 'Users'.. it goes to xxxxxx.com/searchusers, if they select events it goes to xxxxx.com/searchevents etc.

Can anyone give me some ideas/code as to how i can implement this, Or, if anyone has some example code or something to help me along that would be awesome too? Have't had much luck with google when i searched for stuff ... my javascript knowledge is limited to a single university assignment so not very good, but not 100% noob .. just 90% hehe

.

Thanks to any and all who input into the thread

Ric

**mburt** · 08-31-2006, 02:48 PM

Question 1

"make the onchange event of your select box call a js function that validates the selected value, changes the action of the form, and submits"

Exactly correct. Use the event handler on your go button, and replace it with the onchange function on your select box.

Ex:

Code:

<select onchange="someFunction()">...

Question 2

Umm... Try this:

Code:

<html>
<head>
<script type="text/javascript">
function change(id) {
var obj = document.getElementById(id)
window.location.href=obj.value
}
</script>
</head>
<body>
<SELECT id="groups" onchange="change('groups')">
<option value="">Select:</option>
<option value="www.option1target.com">Users</option>
<option value="www.option2target.com">Events</option>
<option value="www.option3target.com">Gallery</option>
</select>
</body>
</html>

**mwinter** · 08-31-2006, 05:48 PM

Originally Posted by teamv

Style the form. There's no need for another element.

Why write a table with only one row and one column? Use a fieldset or div element (or perhaps even nothing at all, if you're using the Transitional document type).

The pt unit is for printing, not the screen. Use percentages for font sizes.

1. Remove the 'go' button, and have it execute the search when the user selects an option from the drop down box.

Don't. Not only does that introduce a dependency on client-side scripting (not a good thing), it also creates usability and accessibility issues.

2. The 'action' of the form to goto a different place depending on the users selection within the drop down box -

If you first asked this in a PHP forum, then I assume you have PHP available to you. If so, there's your answer: check the value provided by the select element upon submission and issue a HTTP redirect sending the browser to the relevent search URL. No need for client-side scripting at all.

Mike

Thread: Need some help with my search box please ..

Thread Tools

Search Thread

Need some help with my search box please ..

Bookmarks

Bookmarks

Posting Permissions