使用下拉字段中的值重定向表单提交上的页面


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

这是我的表单代码

<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>

什么试图实现提交我从重定向根据什么值是从下拉选择比如,如果选择了一幅画,它应该重定向到我的网站/绘画,或者如果只选择了风格(抽象),它会重定向到我的网站/艺术品?抽象的,或者如果两者都选择,它应该像我/绘画?摘要我该怎么做呢?

我试过使用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;
    }

这是正确的方法吗?我怎样才能传递它形成动作?

编辑:使用magento,所以必须通过<?php echo Mage::getBaseUrl() ?>获取基础url

我想你在这里寻找的几乎是基本的下拉导航模式,非常常见的实现类似于这个例子。

<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> 

你的选择选项应该有要导航的页面位置的值,而你的onClick值只是调用window。定位并适当地使用所选表单数据。这里不需要实际"提交"表单给表单处理程序,使用纯javascript就像评论者提到的那样。

使用这个例子,你可以很容易地添加你的选择的第二部分作为"?"选项",并使用if语句。onClick可以移动到一个函数中,而不是调用window。位置直接做分析。

更新:这是你的代码重新利用这个方法,它是快速和肮脏的,可能有几个错误,我还没有时间检查它。

<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>
<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 );
});

请尝试以下代码

 <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>

检查javascript代码

$('#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/