javascript - 需要根据输入将表单重定向到多个 URL

Question

我有一个基本的 HTML 表单，我需要帮助创建一些 JS，以根据在文本字段中键入的字符串将我的表单重定向到不同的 URL。

<form class="form-inline">
    <div class="form-group">
        <input type="text">
        <button type="submit">Go</button>
    </div>
</form>

将有 3 或 4 个文本字符串 - 要在输入字段中输入 - 是“有效的”，我需要它们将表单重定向到网站上的各个页面。

例如，输入有效字符串“STRING1”将使页面在表单提交时重定向至 example.com/something.html，或将“STRING2”重定向至 example.com/otherpage。 html.

但是无效字符串需要转到“example.com/invalid.html”之类的页面。

到目前为止我见过的最有用的东西是这个指南:http://www.dynamicdrive.com/forums/showthread.php?20294-Form-POST-redirect-based-on-radio-button-selected

<script type="text/javascript">
function usePage(frm,nm){
    for (var i_tem = 0, bobs=frm.elements; i_tem < bobs.length; i_tem++)
    if(bobs[i_tem].name==nm&&bobs[i_tem].checked)
    frm.action=bobs[i_tem].value;
 }
</script>

在该代码中，每个 radio 都分配有一个值。但这对于文本字段或在字符串无效时进行全面重定向没有帮助。

非常感谢您的帮助。

Answer 1

您可以在对象中定义路由:

<form class="form-inline">
    <div class="form-group">
         <input type="text">
         <button id="submit-form" type="button">Go</button>
    </div>
</form>

var urlMapping = {
    "STRING1" : "./first.html",
    "STRING2" : "./second.html",
    "STRING3" : "./third.html"
}

$("#submit-form").click(function(){
    var input = $("input").val().trim().toUpperCase();
    if (urlMapping.hasOwnProperty(input)){
        window.location = urlMapping[input];
    }
    else {
        //if url not found, redirect to default url
        window.location = "./default.html";
    }
});

注意:我添加了 .toUpperCase() 使其不区分大小写，因此您必须小心定义 urlMapping 键(“STRING1”，.. )大写。