循环并提交表单jquery

时间:2016-06-14 16:57:38

标签: javascript jquery forms

我有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>

1 个答案:

答案 0 :(得分:0)

这里的问题是您的第一个表单正在提交,因此您的页面将被重新加载,并且脚本的第二部分不会被执行。为了防止你使用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