循環並提交表格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。