在表单上调用Javascript函数

Question

我有一封电子邮件注册表格，我需要调用一个JavaScript函数来将转化跟踪回Google AdWords。 我在将通话添加到表单而不中断它时遇到了麻烦。

这是需要调用的javascript函数：

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

这是表格，我想不出将呼叫放置在何处，不会破坏表格或干扰任何需要传输的数据。

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

任何帮助将不胜感激！

Answer 1

您可以将onsubmit属性添加到表单标签。

如果您还需要在提交表单之前执行某些操作，则可以使用jQuery .submit方法执行此操作：

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

Answer 2

最好和最简单的方法是$("form").submit(function(){}) 。 这将与<input type"submit" />和<button type="submit" /> 。 <button type="button" />将不会调用$("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(){})

Answer 3

您可以像这样在html中使用它：

<element onsubmit="myScript">

在javascript中，您有2种方式 ：

object.onsubmit = function(){myScript};

要么：

object.addEventListener("submit", myScript);

在表单上调用Javascript函数

问题描述

3 个解决方案

解决方案1
1 2018-05-22 04:55:17

解决方案2
1 2018-05-22 05:13:45

解决方案3
0

在表单上调用Javascript函数

问题描述

3 个解决方案

解决方案1 1 2018-05-22 04:55:17

解决方案2 1 2018-05-22 05:13:45

解决方案3 0

解决方案1
1 2018-05-22 04:55:17

解决方案2
1 2018-05-22 05:13:45

解决方案3
0