0

似乎被问了几次，但我找不到解决方案。

<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;结果与preventDefault();

4

2 回答 2

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
于 2019-05-29T05:18:37.640 回答
0

$('[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 单选按钮等）

于 2019-05-29T05:46:19.993 回答