перемещать значение из одной формы html в другую, поэтому одна форма передает значения из себя и другой формы

Question

У меня есть 2 html-формы, formA и formB. Я хочу представить значения A и B при отправке 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 представляется, он отправляет значения для бара и mydrink, поэтому полученный URL является

forms.html?bar=doogans&mydrink=beer 

, но вместо того, чтобы Я просто получаю

forms.html?bar=doogans 

Код выглядит так, как будто он должен работать, но явно не работает. Знаете ли вы, что я делаю неправильно или забываю делать? Благодаря!

Answer 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, чтобы увидеть запрос Params после представить)

Answer 2

Я порекомендую две вещи.

1. Объединить формы в одной форме (форма тег никак не влияет стилизации все, что многое, если не ставить в зависимость CSS на него, что вы должны быть в состоянии заменить с DIV в этом случае)
2. Напишите свой собственный обработчик отправки (jQuery хорош для этого). В основном, вместо использования форм используйте JS/jQuery для написания обработчика кликов для кнопки, которая вытягивает значения из входов и отправляет их.

Если вы не знаете, как это сделать, я могу показать вам, если вы разместите весь свой код.

EDIT:

Это делается с помощью JQuery, поэтому убедитесь, что вы включили исходный файл Jquery в вашем заголовке. Я буду использовать входы с идентификационными тегами id1, id2, id3 и кнопку с идентификатором tag 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/