在一个提交中合并两个 forms 值，但单选按钮无法正常工作 - Jquery

Question

我有 2 个 html forms，表格 A 和表格 B。我想在提交表格 B 时同时提交两个表格值。 该脚本工作正常。 但它实际上传递了所有单选按钮值（男性，女性，其他），只有一个选定的单选按钮值应该传递到下一页。 复选框也是如此。

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

  <input type="radio" name="test" value="male" checked>
  <label for="male">Male</label><br>
  <input type="radio"  name="test"  value="Female">
  <label for="female">Female</label><br>
  <input type="radio"  name="test"  value="other">
  <label for="other">Other</label>

</form>

<br />
<form name="B" id="formB" action="forms.html" method="post">
bar: <input type="text" name="bar" value="doogans" /><br />
<input type="hidden" name="Qnty" value="1">
<input type="submit" value="submit" />
</form>


$(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
            }));
        });
    });
});

Answer 1

您可以检查element是否为无线电以及是否已检查，即： elem.type == "radio" && elem.checked == true在每个循环内。

演示代码：

 $('#formB input[type = "submit"]').on('click', function(e) { e.preventDefault()//remove this just for testing $.each($('#formA').prop('elements'), function(idx, elem) { //check if elem.type is radio and its checked.. if ((elem.type == "radio" && elem.checked == true) || (elem.type == "text")) { $('#formB').append($('<input />').attr({ type: "text", name: elem.name, value: elem.value })); } }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form name="A" id="formA"> mydrink: <input type="text" value="beer" name="mydrink" /><br /> <input type="radio" name="test" value="male" checked> <label for="male">Male</label><br> <input type="radio" name="test" value="Female"> <label for="female">Female</label><br> <input type="radio" name="test" value="other"> <label for="other">Other</label> </form> <br /> <form name="B" id="formB" action="forms.html" method="post"> bar: <input type="text" name="bar" value="doogans" /><br /> <input type="hidden" name="Qnty" value="1"> <input type="submit" value="submit" /> </form>

Answer 2

在$.each中，您可以指定两个选择器，其中第一个将接收一个带有伪类:checked的input[type="radio"] ，第二个选择器将接收一个input[type="text"] 。

如有必要，您可以指定两个以上的选择器以在formB表单中显示。

 $(function () { $('#formB input[type = "button"]').on("click", function (e) { $.each($('#formA input[type="radio"]:checked, #formA input[type="text"]'), function (idx, elem) { $("#formB").append( $("<input />").attr({ type: "hidden", name: elem.name, value: elem.value, }) ); console.log(elem.value); }); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form name="A" id="formA"> mydrink: <input type="text" value="beer" name="mydrink" /><br /> <input type="radio" name="test" value="male" checked /> <label for="male">Male</label><br /> <input type="radio" name="test" value="Female" /> <label for="female">Female</label><br /> <input type="radio" name="test" value="other" /> <label for="other">Other</label> </form> <br /> <form name="B" id="formB" action="forms.html" method="post"> bar: <input type="text" name="bar" value="doogans" /><br /> <input type="hidden" name="Qnty" value="1" /> <input type="button" value="submit" /> </form>