简体   繁体   中英

Personal HTML Form to Google Sheets

I was looking into the webpage ( http://ordrespontane.blogspot.com/2018/01/html-form-to-google-sheet.html ) about how to connect google sheets to a web form not made by google. I followed the instructions, however, it seems to be to no avail to me. Has anyone else used it and become successful? I also notice that my name and info, once inserted into the form, does not go away. Is that normal?

 <!DOCTYPE html> <head><script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script></head> <body> <form id="myForm" action="https://script.google.com/macros/s/AKfycbxRtG9fv7vE14yZR8_46YQrqC76wkDvHqT88ArBmeriPlPc4aB6/exec"> First Name:<br> <input type="text" name="firstname" style="width:200px"><br> Last Name:<br> <input type="text" name="lastname" style="width:200px"><br> <br> <input type="submit" id="mySubmit" value="Submit"> </form> <p><span id="myConf">This is where the confirmation message will appear after submission.</span></p> <script type="text/javascript"> $(document).ready(function(){ // References: var $form = $('#myForm'); var $conf = $('#myConf'); var $subm = $('#mySubmit'); var $impt = $form.find(':input').not(':button, :submit, :reset, :hidden'); // Submit function: $form.submit(function(){ $.post($(this).attr('action'), $(this).serialize(), function(response){ // On success, clear all inputs; $impt.val('').attr('value','').removeAttr('checked').removeAttr('selected'); // Write a confirmation message: $conf.html("Submitted!"); // Disable the submit button: $subm.prop('disabled', true); },'json'); return false; }); }); </script> </body> </html> 

Cross-Origin Resource Sharing (CORS) is mechanism preventing your form from being sent. Browser won't let you do HTTP request to other site than the one the site was loaded from. I'm guessing you are testing it on html page on your PC.

To allow request to script you have to add HTTP header webserver for this particular page

Access-Control-Allow-Origin: https://script.google.com

or

Access-Control-Allow-Origin: *

Or you can use browser plugin to do this for you (like this one ).

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM