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

【问题标题】：To redirect a page on Form submit using values from dropdown feild使用下拉字段中的值重定向表单提交上的页面
【发布时间】：2014-03-28 12:32:07
【问题描述】：

这是我的表单代码

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

根据从下拉列表中选择的值，在提交我的重定向时尝试实现什么就像如果选择了绘画，它应该重定向到 mysite/paintings 或者如果只选择了样式（抽象），它会重定向到 mysite/artwork?abstract 或者如果两者都选择它应该像 mysite/painting?abstract 我怎样才能做到这一点？

我尝试过使用 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() ?>获取基本网址

【问题讨论】：

使用多个 if 条件或嵌套 if 条件来实现这一点
你可以通过使用简单的 javascript 本身来做到这一点。只需发布您的代码。
@ElmoVanKielmo 编辑了我所做的事情
@wittyvishwas - 更新了我的答案以包含第二个字段选项。注意，我们没有将它传递给表单操作，我们调用了 javascript 函数“onClick” - 然后从 DOM 中读取

标签： javascript php jquery forms redirect

【解决方案1】：

我认为您在这里寻找的几乎是基本的下拉导航架构，非常常见的实现类似于此示例。

<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.location 并适当地使用选定的表单数据。无需将此处的表单实际“提交”到表单处理程序，使用纯javascript，就像提到的评论者之一。

使用此示例，您可以轻松地将选择的第二部分添加为带有 if 语句的“？选项”。可以将 onClick 移到函数中，而不是直接调用 window.location 进行分析。

更新：这是您使用此方法重新使用的代码，它又快又脏，可能有几个错误，我还没有时间检查它。

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

【讨论】：

这对于一个简单的下拉菜单很有用，我有多个下拉菜单，我的网址会根据选择的字段进行更改
是的，我在最后的评论中提到了这一点，这可以很容易地重新用于此目的，我现在正在使用您的代码编写该示例，应该在一点点
我正在实现你的代码....但是我在使用 magento 时遇到了问题 m，所以我必须使用我将如何实现??
实际上我认为您可以使用相对 url 路径，它应该可以正常工作。

【解决方案2】：

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

});

【讨论】：

【解决方案3】：

请尝试以下代码

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

【讨论】：