CODEWITHSUNDEEP
javascripthtmlformsevent-tracking
Ryan Thames
Ryan Thames

Reputation: 45

Call Javascript Function On Form Submit

I have an email signup form that I need to call a javascript function to track conversions back to google AdWords. I'm having trouble adding the call into the form without breaking it.

Here is the javascript function that needs to be called:

<script>
function gtag_report_conversion(url) {
  var callback = function () {
    if (typeof(url) != 'undefined') {
      window.location = url;
    }
  };
  gtag('event', 'conversion', {
      'send_to': 'AW-XXXXXXX/XXXXXXXXX_XXXID',
      'event_callback': callback
  });
  return false;
}
</script>

Here is the form, I can't figure out where to put the call in a way that won't break the form or interfere with any data that needs to be transferred.

<form method="post" class="af-form-wrapper" accept-charset="UTF-8" action="https://www.aweber.com/scripts/addlead.pl" >
<div style="display: none;">
<input type="hidden" name="meta_web_form_id" value="YYYYYYY" />
<input type="hidden" name="meta_split_id" value="" />
<input type="hidden" name="listname" value="awlistXXXXX" />
<input id="redirect_XXXXXXXXX" type="hidden" name="redirect" value="http://go.pinn.pub/XXXXXXXXXXXXXXXXXXXXXX?campaignid={campaignid}&adgroupid={adgroupid}&creative={creative}&placement={placement}&target={target}&adposition={adposition}&keyword={keyword}&targetid={targetid}&feeditemid={feeditemid}&gclid={gclid}" />
<input type="hidden" name="meta_adtracking" value="Auto_Insurance_Form" />
<input type="hidden" name="meta_message" value="1" />
<input type="hidden" name="meta_required" value="email" />

<input type="hidden" name="meta_tooltip" value="" />
</div>
<div id="af-form-YYYYYYY" class="af-form"><div id="af-header-YYYYYYY" class="af-header"><div class="bodyText"><p>&nbsp;</p></div></div>
<div id="af-body-YYYYYYY" class="af-body af-standards">
<div class="af-element">
<label class="previewLabel" for="awf_field-ZZZZZZZZZ"><h3 style="color: white">Are you ready for great rates?</h3></label>
<div class="af-textWrap"><input class="text" id="awf_field-ZZZZZZZZZ" type="text" name="email" value="" placeholder=" Email" tabindex="500" onfocus=" if (this.value == '') { this.value = ''; }" onblur="if (this.value == '') { this.value='';} " />
</div><div class="af-clear"></div>
</div><br>
<div class="af-element buttonContainer">
<button name="submit" id="af-submit-image-YYYYYYY" value="Get Started" class="btn btn-orange" alt="Submit Form" tabindex="501" type="submit">Get Started</button><div class="af-clear"></div>
</div>
<div class="af-element privacyPolicy" style="text-align: center"><p style="color: white">We respect your <a title="Privacy Policy" href="https://www.XXXXXXX.com/privacy-policy.html" target="_blank" rel="nofollow">email privacy</a></p>
<div class="af-clear"></div>
</div>
</div>
<div id="af-footer-YYYYYYY" class="af-footer"><div class="bodyText"></div></div>
</div>
<div style="display: none;"><img src="https://forms.aweber.com/form/displays.htm" alt="" /></div>
</form>
<script type="text/javascript">
    <!--
    (function() {
        var IE = /*@cc_on!@*/false;
        if (!IE) { return; }
        if (document.compatMode && document.compatMode == 'BackCompat') {
            if (document.getElementById("af-form-YYYYYYY")) {
                document.getElementById("af-form-YYYYYYY").className = 'af-form af-quirksMode';
            }
            if (document.getElementById("af-body-YYYYYYY")) {
                document.getElementById("af-body-YYYYYYY").className = "af-body inline af-quirksMode";
            }
            if (document.getElementById("af-header-YYYYYYY")) {
                document.getElementById("af-header-YYYYYYY").className = "af-header af-quirksMode";
            }
            if (document.getElementById("af-footer-YYYYYYY")) {
                document.getElementById("af-footer-YYYYYYY").className = "af-footer af-quirksMode";
            }
        }
    })();
    -->
</script>

Any help would be greatly appreciated!

Upvotes: 2

Views: 4027

Answers (3)

user9818446
user9818446

Reputation:

You can use it in html like :

<element onsubmit="myScript">

And in javascript you have 2 way :

object.onsubmit = function(){myScript};

Or :

object.addEventListener("submit", myScript);

Upvotes: 0

Faraz Babakhel
Faraz Babakhel

Reputation: 664

The best and easiest way is $("form").submit(function(){}). This will work with <input type"submit" /> and <button type="submit" />. The <button type="button" /> will not call $("form").submit(function(){}).

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("form").submit(function(){
        alert("Submitted");
    });
});
</script>
</head>
<body>

<form action="">
  First name: <input type="text" name="FirstName" value="Mickey"><br>
  Last name: <input type="text" name="LastName" value="Mouse"><br>
  <input type="submit" value="Submit">
</form> 

</body>
</html>


$(document).ready(function(){
    $("form").submit(function(){
        alert("Submitted");
    });
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</head>
<body>

<form action="">
  First name: <input type="text" name="FirstName" value="Mickey"><br>
  Last name: <input type="text" name="LastName" value="Mouse"><br>
  <input type="submit" value="Submit">
</form> 

</body>
</html>

$("form").submit(function(){})

Upvotes: 3

Luka Čelebić
Luka Čelebić

Reputation: 1093

You can add the onsubmit attribute to the form tag.

If you also require to do something before the the form is submitted you can use the jQuery .submit method to do so:

$('#myform').submit(function() {
    // DO STUFF...
    return true; // return false to cancel form action
});

Upvotes: 1

Related Questions