使用一个提交按钮对表单提交执行两个操作

Question

我的站点上有一个 html 表单，这样用户就可以订阅我的邮件列表。 我正在使用 getResponse 来构建我的列表并发送自动电子邮件。 为此，我将“ https://app.getresponse.com/add_subscriber.html ”放入表单的 action 属性中。 这是我的表格的简化版本：

<form action="https://app.getresponse.com/add_subscriber.html" method="post">
    <input type="text" name="name" id="name" class="required">
    <input type="email" name="email" id="email">
    <input type="submit" name="submitBtn" value=“Subscribe”>
</form> 

我还有一个 send.php 文件，用于将用户信息插入到我服务器上的 MySQL 数据库中。 但是由于我只能在 action 属性中指定一个文件，所以当用户单击订阅时，我不知道必须同时执行 getResponse 脚本和我自己的脚本。

基本上我想实现以下行为：当有人点击“订阅”时，他们的信息应该发送到 getResponse 到我的邮件列表和我服务器上的 MySQL 数据库中。

我花了几个小时在网上看，我还没有找到任何有用的东西。 先感谢您。

Answer 1

给你的表格一个 id 说myForm

<form action="https://app.getresponse.com/add_subscriber.html" method="post" id="myForm">

然后拦截表单的提交事件并阻止提交到 app.getresponse.com，而是调用 ajax 到你的send.php传递表单数据，一旦send.php返回提交表单到 app.getresponse.com

<script>
$(document).ready(function(){ 

    $("#myForm").submit(function(e){
      e.preventDefault();
      e.stopPropagation();
      //don't submit now

      //do ajax first
      $.ajax({url: '/send.php', method: $("#myForm").attr('method'), data: $("#myForm").serialize() , success: function(){
        $("#myForm").submit(); //now submit to app.getresponse.com
      }});
    });

});
</script>