CODEWITHSUNDEEP
javascriptphpjqueryformshttp-redirect
Vishwas Bhatnagar
Vishwas Bhatnagar

Reputation: 168

To redirect a page on Form submit using values from dropdown feild

this is my Form code

<form id="search_mini_form">
<select id="cat" class="input-text-select catvalue" name="cat">
<option value="">All Mediums</option>
<option value="150">Painting</option>
<option value="151">Photography</option>
<option value="152">Work on paper</option>
<option value="153">Drawing</option>
</select>
<select id="style" class="input-text-select styvalue" name="style">
<option value="">All Styles</option>
<option value="54">Abstract</option>
<option value="55">Architectural</option>

</select>
<button class="button" title="Search" type="submit">Search</button>

what trying to achieve on submit my from redirects according to what values are selected from drop down like if on painting is selected it should redirect to mysite/paintings or if only style (abstract) selected it would redirect to mysite/artwork?abstract or if both selected it should be like mysite/painting?abstract how can i achieve this ?

i have tried using Jquery

<script type="text/javascript">
$(".catvalue").change(function(){
$catvalue = $(".catvalue option:selected").val();
alert ("$catvalue")
});
$(".styvalue").change(function(){
$styvalue = $(".styvalue option:selected").val();
});

if ($catvalue)
{
$redirecturl = "mysite/"+$jqcatvalue;
    }
else if ($styvalue)
{
$redirecturl = "mysite/artwork?"+$styvalue;
    }
else if ($styvalue && $styvalue )
{
$redirecturl = "mysite/"+$jqcatvalue="?"+$jqstyvalue;
    }

is it right approach ?? how could i pass it to form action ?

edit : using magento so have to get base url by <?php echo Mage::getBaseUrl() ?>

Upvotes: 0

Views: 1680

Answers (3)

tremor
tremor

Reputation: 3186

I think what you are looking for here is almost the basic drop down navigation schema, very common implementation similar to this example.

<FORM name="f1"> 
<SELECT name="s1"> 
<OPTION SELECTED value="http://www.java2s.com">Java2s.com
<OPTION value="http://www.google.com">Google
<OPTION value="http://www.msn.com">msn
<OPTION value="http://www.perl.com">Perl.com
<OPTION value="http://www.php.net">Php.net
</SELECT> 
<INPUT type="button" name="go" value="Go!" onClick="window.location=document.f1.s1.options[document.f1.s1.selectedIndex].value">
</FORM>

Your select options should have the value of the page location to navigate and your onClick value simply calls window.location and uses the selected form data appropriately. No need to actual "submit" the form here to a form handler, use pure javascript like one of the commenters mentioned.

Using this example you could easily add the second portion of your select as a "?option" with an if statement. The onClick could be moved into a function instead of calling window.location directly to do the analysis.

UPDATE: Here is your code re-purposed with this method, it's quick and dirty, might have a couple errors I haven't had the time to check it yet.

<script>
function doSearch() {
    var cat = document.search_mini_form.cat.options[document.search_mini_form.cat.selectedIndex].value;
    var style = document.search_mini_form.style.options[document.search_mini_form.style.selectedIndex].value;

    if ((cat) && (style)) {
        alert(cat + "?" + style);
        // send to page using variables
    }
    else if (cat) {
        alert(cat);
        // send to page using variables
    }
    else {
        alert("nothing selected");
    }
}
</script>
<form name="search_mini_form" id="search_mini_form">
<select name="cat" id="cat" class="input-text-select catvalue">
<option value="">All Mediums</option>
<option value="painting">Painting</option>
<option value="photo">Photography</option>
<option value="paper">Work on paper</option>
<option value="drawing">Drawing</option>
</select>
<select name="style" id="style" class="input-text-select styvalue">
<option value="">All Styles</option>
<option value="abstract">Abstract</option>
<option value="arch">Architectural</option>
</select>
<button class="button" title="Search" onClick="doSearch()">Search</button>
</form>

Upvotes: 1

Hamid Narikkoden
Hamid Narikkoden

Reputation: 861

Please try the following code

 <form id="search_mini_form">
<select id="cat" class="input-text-select catvalue" name="cat">
<option value="">All Mediums</option>
<option value="150">Painting</option>
<option value="151">Photography</option>
<option value="152">Work on paper</option>
<option value="153">Drawing</option>
</select>
<select id="style" class="input-text-select styvalue" name="style">
<option value="">All Styles</option>
<option value="54">Abstract</option>
<option value="55">Architectural</option>

</select>
    <input class="button" title="Search" type="submit" value="Search"/>
</form>

Check the javascript code

$('#search_mini_form').submit(function(){

    var mediums=$('#cat option:selected').text();
    var styles=$('#style option:selected').text();
     if(styles!="AllStyles" && mediums =="All Mediums")
     {
         $('#search_mini_form').attr("action",'mysite/artwork?'+styles+'=test');
     }
    else if(styles =="AllStyles" && mediums !="All Mediums")
    {
        $('#search_mini_form').attr("action",'mysite/'+mediums);
    }
    else
    {
        $('#search_mini_form').attr("action",'mysite/'+mediums+'?'+styles+'=test');
    }
});

http://jsfiddle.net/zzyEY/18/

Upvotes: 0

Tuhin
Tuhin

Reputation: 3373

<form id="search_mini_form" action="">
<select id="cat" class="input-text-select catvalue" name="cat">
<option value="">All Mediums</option>
<option value="150">Painting</option>
<option value="151">Photography</option>
<option value="152">Work on paper</option>
<option value="153">Drawing</option>
</select>
<select id="style" class="input-text-select styvalue" name="style">
<option value="">All Styles</option>
<option value="54">Abstract</option>
<option value="55">Architectural</option>

</select>
<button class="button" title="Search" type="submit">Search</button>

$(".input-text-select styvalue").change(function(){
           $("search_mini_form").attr("action","mysite/");
            var thisvalue = $(this).find("option:selected").text();
          $("search_mini_form").attr("action","mysite/"+thisvalue );

});

Upvotes: 0

Related Questions