我怎样才能获得下面这两个使用一个按钮提交的不同方法的表格？

<form method="POST" id="Form1" action="nextpage.html">

<input type="text" size="50" name="text_input">

<input type="submit" value="Submit">



<form method="GET" id="Form2" action="nextppage.html">

<input type="text" size="50" name="text_input">

<input type="submit" value="Submit">

Answer 1

您可以这样做的一种方法是为每个表单添加一个隐藏字段。例如，

<form action="action.php" method="get">
    <input type="hidden" name="id"  value="form1">
    Username: <input type="text" name="user">
    <input type="submit" value="Submit">
</form>

<form action="action.php" method="post">
    <input type="hidden" name="id" value="form2">
    Username: <input type="text" name="user">
    <input type="submit" value="Submit">
</form>

在你的脚本中，你只需要检查一下id的值是什么。另一种方法是检查发送到服务器的请求是发布还是获取。

Answer 2

递归使用AJAX或将所有数据收集到一个表单中并提交。

简单的表单提交将在第一个实例重定向您的页面，而第二个实例的数据将丢失。如果您可以完全控制服务器端，那么您只能提交包含POST数据的表单（在我的示例中为form2），您可以在提交之前将GET应用于 action 属性

我的意思是：

<form name="form1" id="form1" action="index.php" method="GET">
    <input type="text" name="foo" value="bar" />
    <input type="submit" value="Submit" />
</form>

<form name="form2" id="form2" action="index.php" method="POST">
    <input type="text" name="foo" value="bar" />
</form>

<script type="text/javascript">
    var f = document.getElementById('form1');
    f.onsubmit = function() {
        var t = f.getElementsByTagName('input'),
            l = t.length,
            i = 0,
            r = [];
        for (i = 0; i < l; i++) {
            if (!t[i].name) continue;
            r.push(t[i].name + '=' + encodeURIComponent(t[i].value));
        }
        var p = document.getElementById('form2');
        if (r.length) p.action += '?' + r.join('&');
        p.submit();
        return false;
    }
</script>

但是AJAX是一个更好，更优雅的解决方案，可以在需要时使用新功能轻松扩展，所以我将我的投票用于异步方式。

Answer 3

使用单个按钮使用两个表单确实没有意义，也不是有效的HTML。

Answer 4

我会使用您的POST表单提交，POST到页面，但不是发布到页面nextpage.html，而是发布到“nextpage.html？var1 = value＆amp; var2 = value”这样的页面
你会以下列方式使用javascript：

<form method="POST" id="Form1" action="nextpage.html">
<input type="text" size="50" name="text_input">
<input type="button" value="Submit" onclick="push();">
</form>

<form method="GET" id="Form2" action="nextpage.html">
<input type="text" size="50" name="text_input" id="name_input">
<input type="button" value="Submit" onclick="push();">
</form>

<script>
function push() {
    document.getElementById('Form1').action = "nextpage.html?text_input="+document.getElementById('name_input').value;
    document.getElementById('Form1').submit();
}
</script>

这应该有用，虽然很麻烦，但要注意有人将？，＆amp;，=或其他非字母数字字符放入你要发送到URL栏的任何内容中。 GET和POST变量将被发送到页面。

Answer 5

您应该了解一下HTTP的工作原理。浏览器执行“请求”，通常是GET或POST，响应正文被解析为HTML并显示在Web浏览器中。

同时发布两个表单没有任何意义，因为它会启动两个HTTP请求。哪一个应该用作浏览器中的新位置？

如何提交2个表格w / 1使用Javascript提交？ 1表格使用“GET”＆amp;其他用途“POST”

我怎样才能获得下面这两个使用一个按钮提交的不同方法的表格？

5 个答案: