如何通过单击按钮将表单发布到两个不同的页面？答案

【问题标题】：How to post form to two different pages with a single button click?如何通过单击按钮将表单发布到两个不同的页面？
【发布时间】：2015-11-18 18:39:09
【问题描述】：

我有一个带有单个按钮的表单，如下所示：

<form name="sampleForm" id="sampleForm" method="post" action="" enctype="multipart/form-data">
<input type="text" id="biosample" name="biosample" class="sample"/>
<input type="text" id="library" name="library" class="sample"/>
<input type="submit" name="btnAdd" id="btnAdd" class="buttonsub" value="NEXT>>">
</form>

Ajax 代码是：

<script>
$(document).ready(function(){
    var encoded_project_id = $('#encoded_project_id').val();
    $('#sampleForm').on('submit', function(){
    var target = 'windowFormTarget';
    window.open('', target, 'width=500,height=300');
    this.setAttribute('target', target);
    $.post('postdata.php', $(this).serialize(), function(){
      window.location.href = 'phases.php?edit='+encoded_project_id;
    }).fail(function(){
    window.location.href = 'sample.php?edit='+encoded_project_id;
    });
  });
});
</script>

现在当点击按钮时，我想将上述表单中的数据发布到 2 个页面中 - handler.php 和 postdata.php

Handler.php 应该在一个新的 javascript 窗口中打开，而 postdata.php 应该在同一个选项卡和同一个窗口中打开。

如何实现？

【问题讨论】：

对不同的页面使用相同的数据进行 2 次 ajax 调用，并使用 $.when 方法来处理这两个 ajax 调用回调
你能解释一下吗？

标签： javascript php jquery forms

【解决方案1】：

编辑：看起来你正在使用 jQuery，所以改变这个：

$(document).ready(function () {
    document.getElementById('sampleForm').onsubmit = function (e) {
        var req = new XMLHttpRequest();
        req.open('POST', 'test.php', true);
        req.send();
    }
});

到这里：

$(document).ready(function(){
  $('#sampleForm').on('submit', function(){
    $.post('postdata.php', $(this).serialize(), function(){
      console.log('success');
    }).fail(function(){
      console.log('error');
    });
  });
});

你应该做两件事。先添加

<form target="_blank" action="handler.php"></form>

这将确保在单击提交按钮时表单将打开一个新窗口。

然后你需要像这样拦截提交：

document.getElementById('sampleForm').onsubmit = function(e){
  //xmlHTTPRequest function
  //This is where you send your form to postdata.php
}

上面的代码将首先被调用，您可以将带有异步 XMLHTTPRequest 对象的表单发送到 postdata.php 。该函数结束后，form 的默认行为将开始，您的handler.php 将收到表单。

【讨论】：

添加了问题。请检查。
@D.k 将您的 ajax 代码添加到您的问题中。你在使用 jQuery 吗？
Thanku..this 工作 :) 如果我需要在新的 js 窗口中打开该 handler.php，还有一件事要做。目前它在新选项卡中打开它，因为我们使用了 _blank 属性
@D.k 新的 js 窗口是什么意思？
检查我更新的 js 代码以打开窗口。感谢您的帮助:)

【解决方案2】：

你只需要两个 ajax 调用。做这样的事情

$(document).ready(function(){
    // if want to stop default submission
    $("#sampleForm").submit(function(e){
    e.preventDefault();
    });

    $(document).on('click','#btnAdd',function(){
        send('page1.php',{'data1':'value'});
        send('page2.php',{'data1':'value'});
    });


});


function send(url,data)
{
    $.ajax({
        url: url,
        type: 'POST',
        datatype: 'json',
        data: data,
        success: function(data) {
            // success
        },

        error: function(data) {
            alert("There may an error on uploading. Try again later");
        },

    });


}

【讨论】：