根据 Jquery/Javascript 中的表单提交重定向页面？答案

【问题标题】：Redirect page depending on form submission in Jquery/Javascript?根据 Jquery/Javascript 中的表单提交重定向页面？
【发布时间】：2013-03-31 21:01:14
【问题描述】：

我正在处理一个页面，该页面应根据用户在表单中输入的内容进行重定向，但我似乎无法弄清楚。 Javascript 新手，渴望学习！

这里是html：

<body>
<div id="header">
    <div id="navcontainer">
        <ul>
            <li> <a href="#item1">Home</a> </li>
            <li> <a href="#item2">Scents</a> </li>
            <li> <a href="#item3">About</a> </li>
            <li> <a href="#item4">Contact</a> </li>
        </ul>
    </div>  
</div>
<div id="content">
        <p>Hi, how are you feeling today?</p>
        <form> <input id="feels" type="text" name="feeling" size="35" onchange="checkfeels(#feels.value);"> 
        <input type="submit" value="submit" >
        </form>
</div>

还有我目前拥有的 Javascript：

function checkfeels(myFeels) {
        switch (myFeels) 
        {
        case "good":
            document.location.href = 'scents.html';
            break
        case "bad":
            alert(2);
            document.location.href = 'scents2.html';
        default: 
            alert("whatever");
        }
    }

非常感谢任何帮助，谢谢！

【问题讨论】：

应该发生什么？实际发生了什么？你试过什么浏览器？您是否在浏览器中启用了调试功能？如果是，它是否报告了任何错误？
我只想让用户回答“你感觉如何？”这个问题，当他们输入答案时，应根据他们的答案将他们引导至新页面。我在 Firefox 和 Chrome 中尝试过，但我没想到要启用调试..我会调查一下。

标签： javascript jquery html forms redirect

【解决方案1】：

把

return checkfeels(this.elements.feeling.value)

以 onsubmit 属性的形式。

“感觉”在当前情况下是输入字段的名称。在你的代码中。

并添加

return false;

到 checkfeels 函数的末尾，以防止默认操作（向服务器提交表单）。

另外，您可以将整个表单传递给函数，例如：

return checkfeels(this)

并且已经在 checkfeels 功能中使用整个表单。

function checkfeels(form) {
   var feeling = form.elements.feeling.value;
   var otherField = form.elements.otherField.value;

   // code with your logic here

   return false; // prevent default action
}

【讨论】：

【解决方案2】：

输入以下代码：

checkfeels($('#feels').val());
return false;

以 onsubmit 属性的形式。

【讨论】：

当我这样做时，我只会被带到 index.html?feeling=good 而不是一个新页面。我是不是做错了什么……或者我只是不明白表单是如何工作的？

【解决方案3】：

您无法使用#feels.value 获取用户键入的内容（您似乎在 jQuery 语法和 javascript 之间犯了一个错误）。

你可以用纯 javascript 做到这一点：

function checkfeels() {
    var myFeels = document.getElementById('feels').value;
    switch (myFeels) {
        case "good":
            document.location.href = 'scents.html';
            break
        case "bad":
            alert(2);
            document.location.href = 'scents2.html';
        default: 
            alert("whatever");
    }
}

你会得到用户输入的内容：

document.getElementById('feels').value

并且您不需要为函数提供任何参数。

如果你使用 jQuery，你可以通过 : 获取值

$('#feels').val();

【讨论】：