一个文本框一个按钮两个不同的页面在HTML中

时间:2014-06-27 15:16:13

标签: html button textbox action

我正在尝试将文本框值分配给php变量现在问题是我想要一个按钮来处理两个不同的页面,即如果我在文本框中输入' a'并点击按钮它应该重定向到' a.php'页面,如果我写在一个文本框' b'它应该重定向到'

;

所以一个文本框,一个按钮两个不同的页面。

代码:

<html><head>
<meta charset="UTF-8" />
<script>
function submitForm(action)
{
    document.getElementById('a').action = action;
    document.getElementById('a').submit();
}
function submitForm1(action)
{
    document.getElementById('b').action = action;
    document.getElementById('b').submit();
}

</script>
</head>
 <body >



<h3><font face="verdana" size="3"><b>Enter Text:</b></h3>

 <input type="text"  align="right" style="font-size:15pt;height:32px;"><br><br>

    <form action="b.php" name="b" id="b" method="post"> 
<form action="a.php" name="a" id="a" method="post">

 <input type="submit" onclick="submitForm('a.php')" value="TRY"  name="a">
 <input type="button" onclick="submitForm1('b.php')" value="TRY" name="b">



    </form>
    </form>


</body>
</html>

3 个答案:

答案 0 :(得分:1)

您可以根据输入内的文字更改onsubmit上的操作。

<html>
<head>
    <script type="text/javascript">
        function onsubmit_handler(){
            var myForm = document.getElementById('myForm');
            var data = document.getElementById('data').value;
            if(data == "a")
                myForm.setAttribute('action', 'a.php');
            else if(data == "b")
                myForm.setAttribute('action', 'b.php');
            else
                myForm.setAttribute('action', 'error.php');
        }
    </script>
</head>
<body>
    <h3>Enter Text:</h3>
    <form id="myForm" method="post" onsubmit="onsubmit_handler()">
        <input type="text" id="data" name="data" value="">
        <input type="submit" value="Post">
    </form>
</body>
</html>

此处测试代码:http://jsfiddle.net/Eg9S4/

答案 1 :(得分:0)

问题似乎是您正在使用getElementById,但输入元素没有ID(它们只有一个名称)。

我还建议将onSubmit事件附加到表单并从按钮中删除onClick事件。

编辑:在仔细查看代码之后,我发现其他一些问题可能会妨碍运营。最值得注意的是您无法嵌套表单标签。还有其他一些CSS和验证问题。

以下是一些有效的代码:

    测试页面          

    function SubmitForm(el) {

        // Get the form element so that we can set the action later
        var form = document.getElementById('theForm');


        // Set the action for the form based on which button was clicked
        if (el.id == "A")
            form.action = "a.php";

        if (el.id == "B")
            form.action = "b.php";

        // You dont need to submit the form. It's alreasdy happening, so there is no need for an explicit call.
    }

</script>

<h3 style="font-family: Verdana; font-weight: bold;">Enter Text:</h3>

<input type="text" style="font-size:15pt;height:32px;"><br><br>

<form method="post" onsubmit="SubmitForm();" action="fake.html" id="theForm">
    <input type="submit" id="A" value="A" onclick="SubmitForm(this);">
    <input type="submit" id="B" value="B" onclick="SubmitForm(this);">
</form>

答案 2 :(得分:0)

使用此代码伙伴

<html><head>
<meta charset="UTF-8" />
<script>
function submitForm()
{
    var link=document.getElementById('a');
var str1 = "a.php";
var n = str1.localeCompare(link);

if(n==1)
{
    window.open("main.html");

}

else if(n==-1)
{
    window.open("index.html");
}
} 



</script>
</head>
<body >



<h3><font face="verdana" size="3"><b>Enter Text:</b></h3>

<input type="text"  align="right" style="font-size:15pt;height:32px;"><br><br>


<input type="submit" onclick="submitForm()" value="TRY"  name="a">





</form>
</form>


</body>
</html>