表单可以根据字段值提交到不同的页面吗？

Question

我想创建一个文本框和一个提交按钮，其中：

index.html: 如果用户在文本框字段“123”中输入点击提交将转到或跳转到john.html页面。

和

如果用户输入“456”点击提交将转到chris.html页面。

以上都应该只有 1 个文本框字段和 1 个提交按钮。

<form>
<input type="code" name="code" size="15"/>

<input type="button" value="Submit"/>
</form>

Answer 1

添加操作='name_of_your_html_file.php' 和方法='post'

现在您需要执行一些 php 并使用 javascript 进行重定向以帮助完成。

if(count($_POST)>0){
   if($_POST['code'] === "123" ){
      echo "<script> window.location.href='john.html' </script>";
      exit();
   }else{
      echo "<script> window.location.href='chris.html' </script>";
      exit();

   }
}

Answer 2

我认为这可能对您有所帮助：

使用if...else-if

的简单解决方案

Working : Demo

HTML

<form action="javascript:redirect();">
    <input id="textBox" type="text" name="code" size="15" />
    <input type="submit" value="Submit" />
</form>

JS

function redirect() {
    var textValue = document.getElementById("textBox").value;
    if(textValue == 123)
    {
        location.href = "www.yoursite.com/john.html";
    }
    else if(textValue == 456)
    {
        location.href = "www.yoursite.com/chris.html";
    }
    else
    {
        alert("Invalid Input");
    }
}

Answer 3

这不是很好，但它有效：

<script type="text/javascript">
function send( frm ) {
    if ( frm.code.value == "123" )
        frm.action = "john.html";
    else if ( frm.code.value == "456" )
        frm.action = "chris.html";
    else
        return false;
    return true;
}
</script>
<form action="" method="post" onsubmit="return send(this);">
    <input type="text" name="code" size="15"/>
    <input type="submit" value="Submit"/>
</form>

编辑： 如果输入 123，此代码会将浏览器重定向到 john.html，如果输入 456，则重定向到 chris.html。在所有其他情况下，它什么都不做！

Answer 4

试试这个，注意网站需要与表单操作具有相同的来源。

html

<form id="testForm" methode="POST" action="https://jsfiddle.net/">
    <input id="testInput" type="text" />
    <button id="testBtn">Go</button>
 </form>

js

function editprofilefunction() {
    document.getElementById("testBtn").onclick=function(){
        if(document.getElementById("testInput").value === '123')
        {
            document.getElementById("testForm").setAttribute("action", "https://jsfiddle.net/user/login/");
        }
    };
}
editprofilefunction()

Answer 5

这是一个使用 switch 语句的解决方案

HTML

<input id="myInput" value="">
<button onClick="goPlaces()">Click It</button>

JS

window.goPlaces = function(){
var input = document.getElementById("myInput").value;
switch(input){
    case '123':
        window.location.href = "www.locationOne.com";
        break;
    case '456':
        window.location.href = "www.locationTwo.com";
        break;
    default:
        alert("notify invalid input");
    }  
}

表单可以根据字段值提交到不同的页面吗？

Can a form submit to different pages based on field value?

html

javascript

forms

textbox

input