javascript - Jquery not functioning properly in Google Apps Script -
i have code:
index.html
<!doctype html> <html> <div> <form id="email_subscribe"> <input type="email" name="email" id="email" placeholder="enter email"> <input type="submit" value="subscribe"> </form> <span id="thank_you" hidden="true">thank you!</span> </div> <?!= htmlservice.createhtmloutputfromfile('css').getcontent(); ?> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script> $( document ).ready(function() { $( "#email_subscribe" ).submit(function() { google.script.run.withsuccesshandler(function(ret){ $("#email_subscribe").slideup(); $( "#thank_you" ).show("slow"); console.log(ret); }).addemail(this); //"this" form element }); }); </script> </html> and one:
code.gs
function doget() { var html = htmlservice.createtemplatefromfile('index').evaluate() .settitle("web app 2").setsandboxmode(htmlservice.sandboxmode.native); return html; } function addemail(form){ logger.log(form.email); return 200; } the "thank message" not showing upon submitting form. can please tell me doing wrong. thank you.
with iframe mode html forms allowed submit, , if form element has no action attribute specified submit blank page. — offical documentation
the solution add return false; or event.preventdefault() @ end of submit function tell browser cancel event, code should this:
$( "#email_subscribe" ).submit(function() { google.script.run.withsuccesshandler(function(ret){ $("#email_subscribe").slideup(); $( "#thank_you" ).show("slow"); console.log(ret); }).addemail(this); //"this" form element return false; }); you can implement solution suggested in docs, create eventlistener prevent form submitions on load code:
<script> // prevent forms submitting. function preventformsubmit() { var forms = document.queryselectorall('form'); (var = 0; < forms.length; i++) { forms[i].addeventlistener('submit', function(event) { event.preventdefault(); }); } } window.addeventlistener('load', preventformsubmit); </script> 
Comments
Post a Comment