循环并提交表格jquery

Question

我有2个表格。当我提交frm1时，我有一些检查选项并使用变量checkedValues来存储它。

我在每个选中的选项中循环，将值更改为frm2，提交并在3秒后打开弹出窗口。但它不适用于提交表单2和setTimeout函数。

有没有人有任何想法来解决这个问题？

<form action="" method="post" name='frm1'> 
    <input type="checkbox" name="1" id="1" value="1" class="checkbox"> 
    <input type="checkbox" name="2" id="2" value="1" class="checkbox"> 
    <input type="checkbox" name="3" id="3" value="0" class="checkbox"> 
    <input type="checkbox" name="4" id="4" value="0" class="checkbox"> 
    <input type="submit" value='add'> 
</form> 

<form action='http://example.com' method='post' name='frm2' target="_blank"> 
    <input type="text" name="fname" class="form-control" value=''> 
    <input type="text" name="fvalue"class="form-control" value=''> 
</form> 

<script> 
$('#add').click(function(){ 
    var store= <?php echo json_encode($store)?>; 
    var checkedValues = $('input:checkbox:checked').map(function() { 
      return this.id; 
     }).get(); 

    $.each(checkedValues, function(index,val) { 

     document.frm2.fname.value = store[val]['name']; 
     document.frm2.fvalue.value = store[val]['value']; 

     document.frm2.submit(); // not working 

     setTimeout(function() {  // not working 
      window.open("http://example.com/client, "_blank"), 3000); 
     }); 
    }); 
}); 
</script> 

Answer 1

这里的问题是，您的第一个表单正在被提交，所以您的页面被重新加载并且脚本的第二部分未被执行。为了防止你应该使用AJAX。

<input type="checkbox" name="1" id="1" value="1" class="checkbox"> 
<input type="checkbox" name="2" id="2" value="1" class="checkbox"> 
<input type="checkbox" name="3" id="3" value="0" class="checkbox"> 
<input type="checkbox" name="4" id="4" value="0" class="checkbox"> 
<button id="bt-add">add</button> 

<form action='http://example.com' method='post' id="second-form" name='frm2' target="_blank"> 
    <input type="text" name="name" class="form-control" value=''> 
    <input type="text" name="value" class="form-control" value=''> 
</form> 

<script> 
$('#bt-add').click(function(){ 
    var store= <?php echo json_encode($store)?>; 
    var checkedValues = $('input:checkbox:checked').map(function() { 
     return this.id; 
    }).get(); 

    $.each(checkedValues, function(index,val) { 
     $("#second-form").find("input[name='name']").val(store[val]['name']); 
     $("#second-form").find("input[name='value']").val(store[val]['value']); 

     $.ajax({ 
      url: "http://example.com", 
      type:'GET', 
      data: $("#second-form").serialize() 
     }); 

    }); 

    setTimeout(function() { 
     window.open("http://example.com/client", "_blank"); 
    }, 3000); 
}); 

</script> 

小提琴here。