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

Question

I have an html form on my site, so that users can subscribe to my mailing list. I'm using getResponse to build my list and send out automated emails. To do this, I put " https://app.getresponse.com/add_subscriber.html " into the action attribute of my form. Here is a simplified version of my form:

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

I also have a send.php file to insert user information into a MySQL database on my server. But since I can only specify one file in the action attribute, I don't know have to execute both getResponse script and my own script when the user clicks on Subscribe.

Basically I want to achieve the following behavior: When somebody clicks on "Subscribe", their information should get send to getResponse into my mailing list AND into the MySQL DB on my server.

I have spend hours looking online, I haven't found anything that works. Thank you in advance.

Answer 1

Give your form an id say myForm

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

Then intercept the form's submit event and prevent the submission to app.getresponse.com, instead call ajax to your send.php passing the form data and once send.php returns submit the form to 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>