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

时间:2015-10-27 22:14:31

标签: javascript html forms input textbox

我想创建一个文本字段框和一个提交按钮,其中:

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

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

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

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

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

5 个答案:

答案 0 :(得分:1)

这是使用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");
    }  
}

答案 1 :(得分:0)

添加动作=&#39; name_of_your_html_file.php&#39;和方法=&#39;发布&#39;

现在你需要用javascript实现一点php和重定向来帮助它完成。

       <TabItem Header="Mail" BorderThickness="0" Margin="0" IsSelected="True">
            <Grid Background="#FFE5E5E5" Margin="0,5,0,0">
                <ListBox x:Name="mailsListBox" MouseLeftButtonDown="mailsListBox_MouseLeftButtonDown" >
                    <ListBoxItem Content="..." Margin="0,0,0,1"/>
                    <ListBoxItem Content="..." Margin="0,0,0,1" />
                </ListBox>
            </Grid>
        </TabItem>

答案 2 :(得分:0)

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

使用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");
    }
}

答案 3 :(得分:0)

这不好,但它有效:

<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重定向到chris.html。在所有其他场合它什么都不做!

答案 4 :(得分:-1)

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

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