Question

我有一个电子邮件注册表单，我需要调用javascript函数来跟踪转换回Google AdWords。我在将表单中的调用添加到表单时遇到问题。

以下是需要调用的javascript函数：

＆＃13;

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

＆＃13;

以下是表单，我无法确定以不会破坏表单或干扰任何需要转移的数据的方式拨打电话的位置。

＆＃13;

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

＆＃13;

非常感谢任何帮助！

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 个答案: