lizyjeywin lizyjeywin - 1 month ago 10
Ajax Question

call ajax on Marketo submit

My Requirement


  • In wordpress plugin I need to include a Marketo script

  • On Submit of Marketo Form I need to do some calculation using Marketo Form elements

  • Display the results on page



Please suggest a solution to implement this.

What I have tried

For this I am trying to use ajax on click of Marketo submit but it isn't working,
it stops abrubtly and doesn't even return to the ReturnURL specified in Marketo. The code I have tried:

<script src="//xxxxx.marketo.com/js/forms2/js/forms2.min.js"></script>
<form id="mktoForm_1"></form>
<script>
MktoForms2.loadForm("//aqq-abc.marketo.com", "xxx-XXX-xxx", id1, function(form) {
form.onSubmit(function(e) {e.preventDefault();

var vals = form.vals();

$.ajax({
type: "POST",
url: "http://localhost:3422/wordpress/plugin/calculationFILE.php",
data: {Value1:val["Email"],Value2: vals["Phone"]},
success: function( data ) { alert(data); },
error: function( err ) {alert("Some thing went wrong! Please try again with your values.");}
}); //ajax call end

alert("OK after ajax"); //========>THIS IS NOT CALLED-but if ajax statement removed this alert fires.
});//OnSubmit end
});//loadForm End



  • where I have all calculation to be placed in the file calculationFILE.php

  • alert("OK after ajax"); //===>THIS IS NOT CALLED-but if ajax statement removed this alert fires.



Edit

I have included e.preventDefault() as now in the above code.I still not able to see ajax call executing.
Do I need to include jQuery to make this work?
What is that I am missing here.
Your suggestion for solution would of great help to move forward.

Answer

I had to include the jQuery lib to make the ajax call. After that it recognized the ajax call. The complete working snippet is

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//xxxxx.marketo.com/js/forms2/js/forms2.min.js"></script>
<form id="mktoForm_1"></form>
<script>
MktoForms2.loadForm("//aqq-abc.marketo.com", "xxx-XXX-xxx", id1, function(form) {
    form.onSubmit(function() {

        var vals = form.vals();

        $.ajax({
                    type: "POST", 
                    url: "http://localhost:3422/wordpress/wp-content/plugins/calM/new_generate.php",
                data: {Value1:vals.Email,Value2: vals.Phone},
        success: function( data ) {
                    alert(data);

        },
        error:  function( err ) {alert("Some thing went wrong! Please try again with your values.");}
        });

      });
});
Comments