Staying on same page after the form is submitted and then process the form again

Question

I'm integrating Marketo (3rd party marketing software) with one of our tools on our website.

There is a form that calls an action "http://info.a10networks.com/index.php/leadCapture/save" after it is submitted and the form data is saved into Marketo:

<form
    class="lpeRegForm formNotEmpty"
    method="post"
    enctype="application/x-www-form-urlencoded"
    action="http://info.a10networks.com/index.php/leadCapture/save"
    id="mktForm_1225"
    name="mktForm_1225">

I want to use the same form data to store it in local database(MySQL) too. Ideally, I'd like to load the same page after the form data is sent and also store this form data locally.

Is there a way to perform the following actions:

1. the form action is called and the data is sent to an external database
2. load back the same page and store this form data locally into the database (be able to use $_POST)

I'm using PHP and plain javascript for this integration. Please advise.

Answer 1

You can do this using an ajax call to your own scripts, then submitting the form to marketo.

Essentially if you want to capture the data before its sent off to a remote server for processing you'll capture the data first then allow the form to submit and do its intended processing afterwards.

Here we capture the click of the form, then make sure to disable the button by adding a class to it. So that it won't let the user do multiple clicks before the processing is done. When its done gathering the information and sending if off to your php page it submits the form it its action property.

In this example I grab the value from an input that has the name property set to firstName, this value will be sent over to my PHP script and because I chose a type of POST i can see it in my as

$_POST['firstName']

to debug your post paramters to see what the data looks like so this in your receiving PHP script

echo '<pre>', print_r($_POST, true), '</pre>';

this will give you a display of the data captured.

<script type="text/javascript">

$(document).ready(function() {


  $('.formSubmitButton').on('click', function(e) {

    e.preventDefault();
    if (!$('.formSubmitButton').hasClass('submitted'))
      {
        // disable the form to prevent multple clicks
        $('.formSubmitButton').addClass('submitted');

        $.ajax('/path/to/my/db/script', {

          type: 'post',
          data:{
             firstName: $('[name="firstName"]).val(),
             lastName: $('[name="lastName"]).val()
          }     
        }).done(function(data) {

            $('.parentForm').submit();

            // enable the form
            $('.formSubmitButton').removeClass('submitted');
        });
      }
      return false;
  });
});

</script>