Posting data from webpage using JavaScript PHP jQuery to Google Sheet -
before duplicate, hear me out. followed answer (jquery ajax post example php), trying send data google sheet. have got code working on google sheet, can add data running code directly sheet.
however, getting work webpage apparently problem. though have followed answer question posted above, think there more @ play here has lack of experience working in area.
the code below floating footer , contained within code of whole webpage (where jquery-1.11.0.min.js , jquery-migrate-1.2.1.min.js have been called). when click on submit button, page looks processes request, nothing ever appears on google sheet, sheet1 (https://docs.google.com/spreadsheets/d/19l2kshdbkewtifx44fxlbdvcokjy7vqpf4iw6c1xazc/edit?usp=sharing).
#document <html> <body> <div class="floater-footer" id="the-floater-footer"> <span id="mytestspan"></span> <div class="row"> <div class="col-md-1 col-sm-2 col-xs-3"><p>newsletter</p></div> <div class="col-md-8 col-sm-7 col-xs-9"> <form id="floater_footer" class="validate subscribe_form"> <div id="subscrive_group wow fadeinup"> <!-- <input type="email" value="" name="email" class="form-control subscribe_mail" id="mce-email" placeholder="email address" required /> --> <input type="text" class="form-control subscribe_mail" id="bar" name="bar" value="" placeholder="email address" required /> <!-- <input type="submit" value="subscribe" name="subscribe" id="mc-embedded-subscribe" class="subscr_btn subscribe_btn"> --> <input type="submit" value="subscribe" class="subscr_btn subscribe_btn" /> </div> </form> </div> <div class="col-md-3 col-sm-3 hidden-xs"> <div class="pull-right"> <!-- social media icons here --> </div> </div> </div> </div> <script type="text/javascipt"> jquery( document ).ready(function( $ ) { // variable hold request var request; // bind submit event of our form $("#floater_footer").submit(function(event){ // abort pending request if (request) { request.abort(); } // setup local variables var $form = $(this); // let's select , cache fields var $inputs = $form.find("input, select, button, textarea"); // serialize data in form var serializeddata = $form.serialize(); // let's disable inputs duration of ajax request // note: disable elements after form data has been serialized. // disabled form elements not serialized. $inputs.prop("disabled", true); //$('#result').text('sending data...'); // fire off request /form.php request = $.ajax({ url: "https://script.google.com/macros/s/akfycbyqidmsinumcrnmu4zxia4pv8tiln3a9zx5l5o1hh4qndp9ndw/exec", type: "post", data: serializeddata }); // callback handler called on success request.done(function (response, textstatus, jqxhr){ // log message console //$('#result').html('<a href="https://docs.google.com/spreadsheets/d/10tt64tialyhpmqr2fh9jzkuhxw7oc0rxxpb_pmj7hay/edit?usp=sharing" target="_blank">success - see google sheet</a>'); console.log("hooray, worked!"); }); // callback handler called on failure request.fail(function (jqxhr, textstatus, errorthrown){ // log error console console.error( "the following error occured: "+ textstatus, errorthrown ); }); // callback handler called regardless // if request failed or succeeded request.always(function () { // reenable inputs $inputs.prop("disabled", false); }); // prevent default posting of form event.preventdefault(); }); }); </script> </body> </html> any suggestions on going wrong? quite inexperienced when comes web development, compared on site. i'm sure it's simple missing!
i don't understand why worked, taking out script , putting in head of page html seemed work! perhaps because having script come after elements issue, or perhaps having $(document).ready() inside of html inside page's main html caused issue, or perhaps else! no matter 1 is, following solved problem.
up @ top of code in head of page's html (but after jquery.js files declared), placed script saw already, cosmetic changes. i'll put here in event did indeed change important didn't realize. show 2 jquery files included before script:
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script> <script type="text/javascript"> //this writing newsletter signup out spreadsheet floating footer $( document ).ready(function( $ ) { // variable hold request var request; // bind submit event of our form $("#floater_footer").submit(function(event){ // abort pending request if (request) { request.abort(); } // setup local variables var $form = $(this); // let's select , cache fields var $inputs = $form.find("input, select, button, textarea"); // serialize data in form var serializeddata = $form.serialize(); // let's disable inputs duration of ajax request // note: disable elements after form data has been serialized. // disabled form elements not serialized. $inputs.prop("disabled", true); //$('#result').text('sending data...'); if( $('#email1').val() == "email received!" ) { //do nothing //basically, pressed button again on accident } else { // fire off request google sheet script request = $.ajax({ url: "https://script.google.com/macros/s/akfycbyqidmsinumcrnmu4zxia4pv8tiln3a9zx5l5o1hh4qndp9ndw/exec", type: "post", data: serializeddata }); } // callback handler called on success request.done(function (response, textstatus, jqxhr){ // log message console //$('#result').html('<a href="https://docs.google.com/spreadsheets/d/10tt64tialyhpmqr2fh9jzkuhxw7oc0rxxpb_pmj7hay/edit?usp=sharing" target="_blank">success - see google sheet</a>'); $('#email1').val('email received!'); console.log("newsletter signup complete!"); }); // callback handler called on failure request.fail(function (jqxhr, textstatus, errorthrown){ // log error console console.error( "the following error occured: "+ textstatus, errorthrown ); }); // callback handler called regardless // if request failed or succeeded request.always(function () { // reenable inputs $inputs.prop("disabled", false); }); // prevent default posting of form event.preventdefault(); }); }); </script> further down body of html code footer placed:
#document <html> <body> <div class="floater-footer" id="the-floater-footer"> <span id="mytestspan"></span> <div class="row"> <div class="col-md-1 col-sm-2 col-xs-3"><p>newsletter</p></div> <div class="col-md-8 col-sm-7 col-xs-9"> <form id="floater_footer" class="validate subscribe_form"> <div id="subscrive_group wow fadeinup"> <input type="text" class="form-control subscribe_mail" id="email1" name="emailsignup" value="" placeholder="email address" required /> <input type="submit" value="subscribe" class="subscr_btn subscribe_btn" /> </div> </form> </div> <div class="col-md-3 col-sm-3 hidden-xs"> <div class="pull-right"> <!-- bunch of social media links/icons --> </div> </div> </div> </div> </body> </html> hopefully has problem in future. may see reason worked not.
big jay blanchard making me question if script triggering @ all, inspired me pull script out , put somewhere else! script wasn't firing @ all, , root of problem. why was, don't know. hope helps else!
Comments
Post a Comment