Change form action based on 2 select option
The tutorial explains on how to change form action based on the 2 select option. The use of this code is for loading different pages using the submit function of the javascript (this.form.submit();) when one of the select option changes its value ( onchange=”changeAction(this.form,this.name);”). In the example below, the first select named range will load to shop_by_price.php page and the second select named keyword will load to advanced_search_result.php page when the visitor chose from their option.
See the code in action: Demo
Here is the code:
function changeAction(aForm,aValue)
{ if(aValue==”range”){
aForm.setAttribute(”action”,”shop_by_price.php”); /** load the data range in advanced_search_result.php (Example:shop_by_price.php”?range=0) */
}else{
aForm.setAttribute(”action”,”advanced_search_result.php”); /** load the data keyword in advanced_search_result.php (Example:advanced_search_result.php?keyword=steel )*/
}
aForm.submit();
}
</script>
<form class=”formsearch” action=”shop_by_price.php” method=”get”>
<p>Search Caskets by:</p>
<ul>
<li>Price:
<select name=”range” onChange=”changeAction(this.form,this.name);”>
<option selected=”selected” disabled=”disabled”>Select One</option>
<option value=”0″>Under $1,000.00</option><option value=”1″>From $1,000.00 to $2,000.00</option>
<option value=”2″>From $2,000.00 to $3,000.00</option>
<option value=”3″>From $3,000.00 to $4,000.00</option>
<option value=”4″>From $4,000.00 to $5,000.00</option>
<option value=”5″>$5,000.00 and above</option>
</select>
</li>
<li> Type:
<select name=”keyword” onChange=”changeAction(this.form,this.name);”>
<option selected=”selected” disabled=”disabled”>Select One</option>
<option value=”hardwood”>Hardwood</option>
<option value=”wood”>Wood</option>
<option value=”steel”>Steel</option>
<option value=”brass”>Brass</option>
<option value=”copper”>Copper</option>
<option value=”marble”>Marble</option>
<option value=”bronze”>Bronze</option>
<option value=”stainless steel”>Stainless Steel</option>
<option value=”cloisonne”>Cloisonne</option>
</select>
</li>
</ul>
</form>
Ratings:
(No Ratings Yet)
Loading ...Posted in:
Creloaded, Ecommerce, Form, Javascript, Joomla, Virtuemart, Website Addons — admin| 
| 
|
[...] Change form action based on 2 select option | Web Developers Help b…/b [...]
Pingback by Change form action based on 2 select option | Web Developers Help b…/b | sellconcrete.com — February 9, 2009 @ 12:31 pm
[...] The tutorial explained on how to change form action base on the 2 select option. The use of this code is for loading different pages using the submit function.Page 2 [...]
Pingback by Popular People » Blog Archive » Change Form Action Based on 2 Select Option | Web Developers Help … — February 10, 2009 @ 5:27 pm