one textbox one button two different pages in html

问题

i am trying to assign a textbox value to a php variable now problem is i want one button to work for two different pages i.e if i enter in a text box 'a'and click on button it should redirect to 'a.php' page if i write in a text box 'b' it should redirect to 'b.php'.

so one textbox,one button two different pages.

Code :

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

回答1:

You can change the action onsubmit based on the text inside the input.

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

Test code here : http://jsfiddle.net/Eg9S4/

回答2:

use this codes buddy

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

回答3:

The problem looks to be that you're using getElementById but the input elements don't have an ID (they only have a name).

~~I'd also recommend attaching an onSubmit event to the form and removing the onClick events from the buttons.~~

Edit: After looking at the code in detail I saw that there were some other issues that were probably hindering the opersation. The most notable one was that you can't nest form tags. There were some other CSS and validation issues.

Here is some working code:

Test Page

    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>

来源：https://stackoverflow.com/questions/24455274/one-textbox-one-button-two-different-pages-in-html

标签

html

button

textbox

action