Вызовите функцию Javascript при отправке формы - PullRequest
Новая
       21

Вызовите функцию Javascript при отправке формы

0 голосов
/ 22 мая 2018

У меня есть форма регистрации по электронной почте, в которой мне нужно вызвать функцию 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>

Любая помощь будет принята с благодарностью!

Ответы [ 3 ]

0 голосов
/ 22 мая 2018

Лучший и самый простой способ - $("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(){})
0 голосов
/ 22 мая 2018

Вы можете использовать его в html как: 

<element onsubmit="myScript">

И в javascript у вас есть 2 пути : 

object.onsubmit = function(){myScript};

Или: 

object.addEventListener("submit", myScript);
0 голосов
/ 22 мая 2018

Вы можете добавить атрибут onsubmit к тегу формы.

Если вам также требуется что-то сделать перед отправкой формы, вы можете использовать jQuery .submit метод для этого: 

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