Question

似乎要问几次，但我找不到解决方法。

<form id="foo">    
    <div class="g1">
     <input type="radio" data-next="2" name="op1[]" value="1">
     <input type="radio" data-next="2" name="op1[]" value="2">
     <input type="radio" data-next="2" name="op1[]" value="3">
    </div>
    <div class="g2">
     <input type="radio" data-next="3" name="op2[]" value="1">
     <input type="radio" data-next="3" name="op2[]" value="5">
     <input type="radio" data-next="3" name="op2[]" value="3">
    </div>
    <div class="g3">
     <input type="radio" data-send="1" name="op3[]" value="6">
     <input type="radio" data-send="1" name="op3[]" value="5">
     <input type="radio" data-send="1" name="op3[]" value="3">
    </div>
 </form>

这是我实际代码的基础，但 g2 和 g3 是相同的，当用户从g1中选择一个选项时，它将显示下一个块，用户从 g2 中选择，并显示 g3 ...
当用户从 g3 组中选择一个选项时，它将通过ajax提交表单。
问题在于它第一次提交表单两次，仅发送选项1和2，而第二次发送整个表单。
如果我使用event.preventDefault();，它只会提交一次表单，这是我想要的问题是没有发送op3的值

$('[data-send]').on('click', function(e) {
 e.preventDefault();
var formdata = $('form#foo').serialize();
// next is a regular ajax, post, dataType: 'json'... etc
})

因此，使用event.preventDefault();不会发送我的上一个单选值，如果不发送，它将提交两次表单，如果我使用return false;，则结果与{{ 1}}，

Answer 1

按如下所示在代码中添加一些类属性：

<form id="foo">    
    <div class="g1">
     <input class="radio_g1" type="radio" data-next="2" name="op1[]" value="1">
     <input class="radio_g1" type="radio" data-next="2" name="op1[]" value="2">
     <input class="radio_g1" type="radio" data-next="2" name="op1[]" value="3">
    </div>
    <div class="g2" style="display: none;">
     <input class="radio_g2" type="radio" data-next="3" name="op2[]" value="1">
     <input class="radio_g2" type="radio" data-next="3" name="op2[]" value="5">
     <input class="radio_g2" type="radio" data-next="3" name="op2[]" value="3">
    </div>
    <div class="g3" style="display: none;">
     <input class="radio_g3" type="radio" data-send="1" name="op3[]" value="6">
     <input class="radio_g3" type="radio" data-send="1" name="op3[]" value="5">
     <input class="radio_g3" type="radio" data-send="1" name="op3[]" value="3">
    </div>
 </form>

在js代码中：

$(document).on('change', '.radio_g1', function(){
    $(document).find('.g2').show();
});

$(document).on('change', '.radio_g2', function(){
    $(document).find('.g3').show();
});

$(document).on('change', '.radio_g3', function(){
    event.preventDefault();
    var formdata = $(document).find('#foo').serializeArray();                   
    console.log(formdata);
});

结果如：

(3) [{…}, {…}, {…}]
0: {name: "op1[]", value: "2"}
1: {name: "op2[]", value: "3"}
2: {name: "op3[]", value: "5"}
length: 3

Answer 2

$('[data-send]')将无法识别，因此将类别添加到g3单选按钮并使用该类别进行点击

代码：-

$('.submit-form').on('click', function(e) {
   e.preventDefault();
   var formdata = $('form#foo').serialize();
})

工作片段：-

$('.submit-form').on('click', function(e) {
   e.preventDefault();
   var formdata = $('form#foo').serialize();
   console.log(formdata);
   //or you can use below too
   //var formdata1 = $('form#foo').serializeArray();
   //console.log(formdata);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="foo">    
    <div class="g1">
     <input type="radio" data-next="2" name="op1[]" value="1">
     <input type="radio" data-next="2" name="op1[]" value="2">
     <input type="radio" data-next="2" name="op1[]" value="3">
    </div>
    <div class="g2">
     <input type="radio" data-next="3" name="op2[]" value="1">
     <input type="radio" data-next="3" name="op2[]" value="5">
     <input type="radio" data-next="3" name="op2[]" value="3">
    </div>
    <div class="g3">
     <input type="radio" class="submit-form" data-send="1" name="op3[]" value="6">
     <input type="radio" class="submit-form" data-send="1" name="op3[]" value="5">
     <input type="radio" class="submit-form" data-send="1" name="op3[]" value="3">
    </div>
 </form>

注意： -您可以使用op1[], op2[],op3[]代替op[1],op[2],op[3]或最好是op[]。它将使索引本身。（0 =>第一个div单选按钮，1 =>第二个div单选按钮等）

Ajax表单提交两次或一次，但是缺少最后一个值没有提交按钮

2 个答案: