loop and submit form jquery

Question

I have 2 form. When I submit frm1, i have some checked option and use variable checkedValues to store it.

I loop in each checked option, change value to frm2, submit it and open a popup after 3 second. But it not work with submit form 2 and setTimeout function.

Does anyone have any ideas to solve this?

<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

The problem here is that your first form is being submitted, so your page gets reloaded and the second part of the script isn't executed. To prevent that you should use 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>

Fiddle here .