根据选项选择重定向表单

时间:2015-05-06 17:24:15

标签: javascript html

如何根据下拉菜单中的两个选项重定向用户?

我已经阅读了一些类似的问题,但由于我使用的表单代码非常冗长而复杂,因此无法将建议联系起来。我已经拿出了很多代码,所以我希望我不会错过任何重要的代码。

我正在尝试根据用户选择重定向用户 1)仅限试镜 2)仅限车间或 3)工作坊+试演

以及他们是否选择参加

1)伦敦 2)伯明翰 3)曼彻斯特

所以在伦敦进行试镜的人会被引导到与在曼彻斯特进行试镜的人不同的地方。

如果可以的话,我会很感激你的帮助!

<form name="signupForm" id="signupForm" target="_top" method="post" action="http://app.greenrope.com/j1.pl?9ec6ce8b4e17b30b7c2a75edc1c1a684716721de718b4187c3ac601cb070094b" onsubmit="get_action(this);">

<table><tbody>
<tr>
<td> 
<ul id="teamFields"> 

  <li class="formRow emailRow" id="field_Email"><label class="fieldName" for="signup_Email">Email<span class="reqMarker">*</span></label>
<input type="text" name="Email" maxlength="64" value="" id="signup_Email" class="inputTextField" />
<div id="emailEntryAlert">
</div>
</li> 


<li class="formRow userFieldName" id="field_User5" ><label class="fieldName" id="labelUser5" for="signup_User5">Please select the closest city to where you live from the list<span class="reqMarker">*</span></label> <select name="User5" id="signup_User5"><option value="">Choose</option> <option value="London" >London</option><option value="Birmingham" >Birmingham</option><option value="Manchester" >Manchester</option></select>
</li> 

</li> 
<li class="formRow userFieldName" id="field_User8" ><label class="fieldName" id="labelUser8" for="signup_User8">Would you like to attend the workshop and/or audition?<span class="reqMarker">*</span></label> <select name="User8" id="signup_User8"><option value="">Choose</option> <option value="Workshop Only" >Workshop Only</option><option value="Workshop + Audition" >Workshop + Audition</option><option value="Audition Only" >Audition Only</option></select>
</li> 


</ul>
<ul id="teamSelection"> 
<li class="formRow joinRow"><span id="confirmText"> </span>
</li> 
<input type="hidden" name="AutomaticTeamIDs" value="4" /> 
<input type="hidden" name="AutomaticTeamIDs" value="3" /> 
<input type="hidden" name="AutomaticTeamIDs" value="1" /> 
</ul> 
</td> 
</tr> </tbody>
</table> 
<div id="reqInfo">* required information
</div> 
<input id="formSubmit" type="submit" name="formSubmit" style="font-weight: bold; font-size: 16px; color: #000000; border-style: solid; border-width: 8px !important; border-color: #d3d3d3 !important; border-radius: 0px !important; padding: 16px !important; background: #a9a9a9 !important; box-shadow: none !important;" value="Sign Me Up" /> 
<input type="hidden" name="Referrer" value="" /> 
<input type="hidden" name="qstring" value="9ec6ce8b4e17b30b7c2a75edc1c1a684716721de718b4187c3ac601cb070094b" /> 
<input type="hidden" name="formSubmitCheck" value="1" /> 


<script type="text/javascript">
    function get_action(form) {
        var optn = document.getElementById("signup_User5");
        var optn_value= e.options[e.selectedIndex].value;
        var optn = document.getElementById("signup_User8");
        var optn_value= e.options[e.selectedIndex].value;

        if ((optn_value=="Workshop Only") && (optn_value=="London")) {
           window.location.href = "http://www.mscurvaceousuk.com/mcuklondonworkshop";
     } else if ((optn_value=="Workshop Only") && (optn_value=="Birmingham")) {
           window.location.href = "http://www.mscurvaceousuk.com/mcukbirminghamworkshop";
     } else if ((optn_value=="Workshop Only") && (optn_value=="Manchester")) {
           window.location.href = "http://www.mscurvaceousuk.com/mcukmanchesterworkshop";
    } else if ((optn_value=="Audition Only") && (optn_value=="London")) {
           window.location.href = "http://www.mscurvaceousuk.com/mcuk-london-audition-confirmation";
    } else if ((optn_value=="Audition Only") && (optn_value=="Birmingham")) {
           window.location.href = "http://www.mscurvaceousuk.com/mcuk-birmingham-audition-confirmation";
    } else if ((optn_value=="Audition Only") && (optn_value=="Manchester")) {
           window.location.href = "http://www.mscurvaceousuk.com/mcuk-manchester-audition-confirmation"; 
    } else if ((optn_value=="Audition + Workshop") && (optn_value=="London")) {
           window.location.href = "http://www.mscurvaceousuk.com/mcuk-london-audition-confirmation";
    } else if ((optn_value=="Audition + Workshop") && (optn_value=="Birmingham")) {
           window.location.href = "http://www.mscurvaceousuk.com/mcuk-birmingham-audition-confirmation";
    } else if ((optn_value=="AAudition + Workshop") && (optn_value=="Manchester"))
           window.location.href ="http://www.mscurvaceousuk.com/mcuk-manchester-audition-confirmation"; 

}
    }

</script>

</form> 
<div id="formBottom">
</div> 
</div> 
</div> 
</body>
</html>

1 个答案:

答案 0 :(得分:0)

你可以用Javascript

来做

首先,您必须获取所选选项,然后根据所选选项设置操作。

您可以按如下方式获取所选选项的值,例如

var optn = document.getElementById("signup_User8");
var optn_value= e.options[e.selectedIndex].value;

现在,optn_value将包含所选选项的值。

然后检查optn_value并相应地设置操作网址。此操作网址可以设置为表单的操作,如下所示

form.action = new_action_url;

整个代码如下

<script type="text/javascript">
    function get_action(form) {
        var optn = document.getElementById("signup_User8");
        var optn_value= e.options[e.selectedIndex].value;
        if(optn_value=="foo")
           form.action = new_action_url_1;
        else
           form.action = new_action_url_2;
    }
</script>

并在HTML表单中添加一个onsubmit属性,该属性调用Javascript函数

<form onsubmit="get_action(this);">
    ...
</form>