1

我有 2 个 html 表单，formA 和 formB。我想在提交 B 时同时提交 A 和 B 的值。这是我尝试过的代码：

<script>
function combine()
{
formB=document.getElementById('formB').elements;
formA=document.getElementById('formA').elements;
formB[2]=formA[0];
return true;
}
</script>

<form name=A id=formA>
mydrink: <input type=text value=beer name=mydrink><br>
</form>

<br>

<form name=B id=formB action=forms.html method=get>
bar: <input type=text name=bar value=doogans><br>
<input type=submit onclick="return combine();" value=okie>
</form>

我想要的行为是，当提交表单 B 时，它会发布 bar 和 mydrink 的值，因此生成的 url 是

forms.html?bar=doogans&mydrink=beer

但相反，我只是得到

forms.html?bar=doogans

代码看起来应该可以工作，但显然不行。你知道我做错了什么或忘记做什么吗？谢谢！

4

2 回答 2

2

我会推荐两件事。

  1. 将表单组合成一个表单（表单标签并不会真正影响样式，除非您将依赖的 CSS 放在它上面，在这种情况下您应该能够用 div 替换它）
  2. 编写你自己的提交处理程序（jQuery 很适合这个）。基本上只是不使用表单，而是使用 JS/jQuery 为按钮编写一个单击处理程序，该处理程序从输入中提取值并提交它们。

如果您不确定如何执行此操作，如果您发布所有代码，我可以向您展示。

编辑：

这是使用 jQuery 完成的，因此请确保在标题中包含 jQuery 源文件。我将使用带有 ID 标签 id1、id2、id3 的输入和带有 ID 标签 submit_button 的按钮作为示例。

$(document).ready( function() {
    $("#submit_button").click( function() {
        var val1 = $("#id1").val();
        var val2 = $("#id2").val();
        var val3 = $("#id3").val();

        var http_str = jQuery.param({ var1: val1, var2: val2, var3: val3});

        window.location = "myscript.php?" + http_str;
    }

});

相关文档： http ://api.jquery.com/jQuery.param/

于 2013-08-15T23:53:16.380 回答
1

如果您正在探索jQuery ，以下是提交时如何拉取所有formA元素的方法。formB

HTML

<form name=A id=formA>
    mydrink: <input type=text value=beer name=mydrink /><br />
</form>
<br />
<form name=B id=formB action=forms.html method=get>
    bar: <input type=text name=bar value=doogans /><br />
    <input type=submit value=okie />
</form>

jQuery

$(function() {
    $( '#formB input[type = "submit"]' ).on( 'click', function( e ) {
        $.each( $( '#formA' ).prop( 'elements' ), function( idx, elem ) {
            $( '#formB' ).append( $( '<input />' ).attr({
                type : "hidden",
                name : elem.name,
                value : elem.value
            }));
        });
    });
});

工作演示：JsFiddle.net （悬停在 iframe 的工具栏上以查看提交后的查询参数）

于 2013-08-16T00:33:12.523 回答