Question

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

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

Answer 1

我会推荐两件事。

将表单合并为单个表单（表单标记并不会真正影响样式，除非您在其上放置依赖CSS，在这种情况下您应该能够用div替换）
编写自己的提交处理程序（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/

Answer 2

如果您正在浏览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工具栏上以查看提交后的查询参数）

将值从一个html表单移动到另一个表单，因此一个表单从自身和另一个表单提交值

2 个答案: