Can't get Ajax to show thank you message #183

New issue

Closed

opened 2025-10-14 16:34:06 -06:00 by navan · 0 comments

navan commented

2025-10-14 16:34:06 -06:00

Owner

Originally created by @kimflow1 on 8/27/2018

I believe I may have the JAVA script in the wrong place, but I'm not sure since I am inexperienced with JAVA or AJAX

Here is a copy of my contact page

<!DOCTYPE html>
<html lang="en">
<head>
<title>Mama Gina's | Contacts</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/reset.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/layout.css" type="text/css" media="screen">
<link href='http://fonts.googleapis.com/css?family=Adamina' rel='stylesheet' type='text/css'>
<script src="js/jquery-1.6.3.min.js" type="text/javascript"></script>
<script src="js/cufon-yui.js" type="text/javascript"></script>
<script src="js/cufon-replace.js" type="text/javascript"></script>
<script src="js/Lobster_13_400.font.js" type="text/javascript"></script>
<script src="js/NewsGoth_BT_400.font.js" type="text/javascript"></script>
<script src="js/FF-cash.js" type="text/javascript"></script>
<script src="js/easyTooltip.js" type="text/javascript"></script>
<script src="js/script.js" type="text/javascript"></script>
<script src="js/bgSlider.js" type="text/javascript"></script>
<!--[if lt IE 9]>
<script type="text/javascript" src="js/html5.js"></script>
<link rel="stylesheet" href="css/ie.css" type="text/css" media="screen">
<![endif]-->
</head>
<body id="page6">
    <div id="bgSlider"></div>
    <div class="bg_spinner"></div>
    <div class="extra">
        <!--==============================header=================================-->
        <header>
            <div class="top-row">
                <div class="main">
                    <div class="wrapper">
                        <h1><a href="index.html">Mama Gina's</a></h1>
                        <ul class="pagination">
                            <li class="current"><a href="images/bg-img1.jpg">1</a></li>
                            <li><a href="images/bg-img2.jpg">2</a></li>
                            <li><a href="images/bg-img3.jpg">3</a></li>
                        </ul>
                        <strong class="bg-text">Background:</strong>
                    </div>
                </div>
            </div>
            <div class="menu-row">
                <div class="menu-border">
                    <div class="main">
                        <nav>
                            <ul class="menu">
                                <li><a href="index.html">Main</a></li>
                                <li><a href="about.html">About Us</a></li>
                                <li><a href="order.html">Order</a></li>
                                <li><a href="services.html">Services</a></li>
                                <li><a href="blog.html">Blog</a></li>
                                <li class="last"><a class="active" href="contacts.html">Contacts</a></li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        </header>
        <!--==============================content================================-->
        <div class="inner">
            <div class="main">
                <section id="content">
                    <div class="indent">
                        <div class="wrapper">
                            <article class="col-1">
                                <div class="indent-left">
                                    <h3>Contact Form</h3>
                                    <div class="p3">
                                        <form class="gform" data-email="regina.smith@mamaginas.biz" method="post" enctype="multipart/form-data" action="https://script.google.com/macros/s/AKfycbwA99DAoedqxZzJTOzyS-2-o1EcXVkjy-X0yenXpTNIiJgUBA/exec">
                                            <fieldset>
                                                <label>
                                                    <span class="text-form">Full Name:</span>
                                                    <input name="p1" type="text" /> <br />
                                                </label>

                                                <label>
                                                    <span class="text-form">E-mail:</span>
                                                    <input name="p2" type="text" />
                                                </label>
                                                <div class="wrapper">
                                                    <div class="text-form">Message:</div>
                                                    <div class="extra-wrap">
                                                        <textarea></textarea>
                                                        <div class="clear"></div>
                                                        <div class="buttons">
                                                            <!--<a class="button-2" href="#">Clear</a> <a class="button-2" href="#">Send</a>-->
                                                            <input type="submit" value="Contact Us">
                                                        </div>
                                                    </div>
                                                </div>
                                            </fieldset>
                                        </form>
                                    </div>
                                </div>
                                <div class="bg">
                                    <div class="padding">
                                        <h3>We would love to hear from you</h3>
                                        Mama Gina’s will respond to your email within 24 hours, if you would like a phone call please include your number and the best time to call.
                                    </div>
                                </div>
                            </article>
                            <article class="col-2">
                                <h3 class="border-bot indent-bot">Our Contacts</h3>
                                <div class="img-indent-bot">
                                    <h6>USA</h6>
                                    <dl>
                                        <dt>PO Box 170862, Arlington, TX 76003</dt>
                                        <dd><span>Telephone:</span> +1 682 360 3755</dd>
                                        <dd><span>E-mail:</span><a href="regina.smith@mamaginas.biz">regina.smith@mamaginas.biz</a></dd>
                                    </dl>
                                </div>
                                <!--<div class="img-indent-bot">
                                  <h6>Hello</h6>
                                  <dl>
                                    <dt></dt>
                                    <dd><span></span></dd>
                                    <dd><span></span> </dd>
                                    <dd><span></span><a href="#"></a></dd>
                                  </dl>
                                </div>
                                <div class="img-indent-bot">
                                  <h6></h6>
                                  <dl>
                                    <dt></dt>
                                    <dd><span></span></dd>
                                    <dd><span></span> </dd>
                                    <dd><span></span><a href="#"></a></dd>
                                  </dl>
                                </div>
                                <h6></h6>
                                <dl>
                                  <dt></dt>
                                  <dd><span></span></dd>
                                  <dd><span></span></dd>
                                  <dd><span></span><a href="#"></a></dd>
                                </dl>-->
                            </article>
                        </div>
                    </div>
                </section>
                <div class="block"></div>
            </div>
        </div>
    </div>
    <!--==============================footer=================================-->
    <footer>
        <div class="padding">
            <div class="main">
                <div class="wrapper">
                    <div class="fleft footer-text"> Copyright &copy; <a href="#">Domain Name</a> All Rights Reserved <strong> Design by Flowers<a target="_blank" href="kimflow3@hotmail.com"></a></strong> </div>
                    <ul class="list-services">
                        <li>Link to Us:</li>
                        <li><a class="tooltips" href="https://www.facebook.com/mamaginas.biz/"></a></li>
                        <li class="item-1"><a class="tooltips" href="#"></a></li>
                        <li class="item-2"><a class="tooltips" href="#"></a></li>
                    </ul>
                </div>
            </div>
        </div>
    </footer>
    <script type="text/javascript">Cufon.now();</script>
    (function() {
    function validEmail(email) {
    var re = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
    return re.test(email);
    }

    function validateHuman(honeypot) {
    if (honeypot) {  //if hidden form filled up
    console.log("Robot Detected!");
    return true;
    } else {
    console.log("Welcome Human!");
    }
    }

    // get all data in form and return object
    function getFormData(form) {
    var elements = form.elements;

    var fields = Object.keys(elements).filter(function(k) {
    return (elements[k].name !== "honeypot");
    }).map(function(k) {
    if(elements[k].name !== undefined) {
    return elements[k].name;
    // special case for Edge's html collection
    }else if(elements[k].length > 0){
    return elements[k].item(0).name;
    }
    }).filter(function(item, pos, self) {
    return self.indexOf(item) == pos && item;
    });

    var formData = {};
    fields.forEach(function(name){
    var element = elements[name];

    // singular form elements just have one value
    formData[name] = element.value;

    // when our element has multiple items, get their values
    if (element.length) {
    var data = [];
    for (var i = 0; i < element.length; i++) {
    var item = element.item(i);
    if (item.checked || item.selected) {
    data.push(item.value);
    }
    }
    formData[name] = data.join(', ');
    }
    });

    // add form-specific values into the data
    formData.formDataNameOrder = JSON.stringify(fields);
    formData.formGoogleSheetName = form.dataset.sheet || "responses"; // default sheet name
    formData.formGoogleSendEmail = form.dataset.email || ""; // no email by default

    console.log(formData);
    return formData;
    }

    function handleFormSubmit(event) {  // handles form submit without any jquery
    event.preventDefault();           // we are submitting via xhr below
    var form = event.target;
    var data = getFormData(form);         // get the values submitted in the form

    /* OPTION: Remove this comment to enable SPAM prevention, see README.md
    if (validateHuman(data.honeypot)) {  //if form is filled, form will not be submitted
    return false;
    }
    */

    if( data.email && !validEmail(data.email) ) {   // if email is not valid show error
    var invalidEmail = form.querySelector(".email-invalid");
    if (invalidEmail) {
    invalidEmail.style.display = "block";
    return false;
    }
    } else {
    disableAllButtons(form);
    var url = form.action;
    var xhr = new XMLHttpRequest();
    xhr.open('POST', url);
    // xhr.withCredentials = true;
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhr.onreadystatechange = function() {
    console.log(xhr.status, xhr.statusText);
    console.log(xhr.responseText);
    var formElements = form.querySelector(".form-elements")
    if (formElements) {
    formElements.style.display = "none"; // hide form
    }
    var thankYouMessage = form.querySelector(".thankyou_message");
    if (thankYouMessage) {
    thankYouMessage.style.display = "block";
    }
    return;
    };
    // url encode form data for sending as post data
    var encoded = Object.keys(data).map(function(k) {
    return encodeURIComponent(k) + "=" + encodeURIComponent(data[k]);
    }).join('&');
    xhr.send(encoded);
    }
    }

    function loaded() {
    console.log("Contact form submission handler loaded successfully.");
    // bind to the submit event of our form
    var forms = document.querySelectorAll("form.gform");
    for (var i = 0; i < forms.length; i++) {
    forms[i].addEventListener("submit", handleFormSubmit, false);
    }
    };
    document.addEventListener("DOMContentLoaded", loaded, false);

    function disableAllButtons(form) {
    var buttons = form.querySelectorAll("button");
    for (var i = 0; i < buttons.length; i++) {
    buttons[i].disabled = true;
    }
    }
    })();
</body>
</html>

*Originally created by @kimflow1 on 8/27/2018* I believe I may have the JAVA script in the wrong place, but I'm not sure since I am inexperienced with JAVA or AJAX Here is a copy of my contact page ``` html <!DOCTYPE html> <html lang="en"> <head> <title>Mama Gina's | Contacts</title> <meta charset="utf-8"> <link rel="stylesheet" href="css/reset.css" type="text/css" media="screen"> <link rel="stylesheet" href="css/style.css" type="text/css" media="screen"> <link rel="stylesheet" href="css/layout.css" type="text/css" media="screen"> <link href='http://fonts.googleapis.com/css?family=Adamina' rel='stylesheet' type='text/css'> <script src="js/jquery-1.6.3.min.js" type="text/javascript"></script> <script src="js/cufon-yui.js" type="text/javascript"></script> <script src="js/cufon-replace.js" type="text/javascript"></script> <script src="js/Lobster_13_400.font.js" type="text/javascript"></script> <script src="js/NewsGoth_BT_400.font.js" type="text/javascript"></script> <script src="js/FF-cash.js" type="text/javascript"></script> <script src="js/easyTooltip.js" type="text/javascript"></script> <script src="js/script.js" type="text/javascript"></script> <script src="js/bgSlider.js" type="text/javascript"></script>  </head> <body id="page6"> <div id="bgSlider"></div> <div class="bg_spinner"></div> <div class="extra">  <header> <div class="top-row"> <div class="main"> <div class="wrapper"> <h1><a href="index.html">Mama Gina's</a></h1> <ul class="pagination"> <li class="current"><a href="images/bg-img1.jpg">1</a></li> <li><a href="images/bg-img2.jpg">2</a></li> <li><a href="images/bg-img3.jpg">3</a></li> </ul> <strong class="bg-text">Background:</strong> </div> </div> </div> <div class="menu-row"> <div class="menu-border"> <div class="main"> <nav> <ul class="menu"> <li><a href="index.html">Main</a></li> <li><a href="about.html">About Us</a></li> <li><a href="order.html">Order</a></li> <li><a href="services.html">Services</a></li> <li><a href="blog.html">Blog</a></li> <li class="last"><a class="active" href="contacts.html">Contacts</a></li> </ul> </nav> </div> </div> </div> </header>  <div class="inner"> <div class="main"> <section id="content"> <div class="indent"> <div class="wrapper"> <article class="col-1"> <div class="indent-left"> <h3>Contact Form</h3> <div class="p3"> <form class="gform" data-email="regina.smith@mamaginas.biz" method="post" enctype="multipart/form-data" action="https://script.google.com/macros/s/AKfycbwA99DAoedqxZzJTOzyS-2-o1EcXVkjy-X0yenXpTNIiJgUBA/exec"> <fieldset> <label> <span class="text-form">Full Name:</span> <input name="p1" type="text" /> <br /> </label> <label> <span class="text-form">E-mail:</span> <input name="p2" type="text" /> </label> <div class="wrapper"> <div class="text-form">Message:</div> <div class="extra-wrap"> <textarea></textarea> <div class="clear"></div> <div class="buttons">  <input type="submit" value="Contact Us"> </div> </div> </div> </fieldset> </form> </div> </div> <div class="bg"> <div class="padding"> <h3>We would love to hear from you</h3> Mama Gina’s will respond to your email within 24 hours, if you would like a phone call please include your number and the best time to call. </div> </div> </article> <article class="col-2"> <h3 class="border-bot indent-bot">Our Contacts</h3> <div class="img-indent-bot"> <h6>USA</h6> <dl> <dt>PO Box 170862, Arlington, TX 76003</dt> <dd><span>Telephone:</span> +1 682 360 3755</dd> <dd><span>E-mail:</span><a href="regina.smith@mamaginas.biz">regina.smith@mamaginas.biz</a></dd> </dl> </div>  </article> </div> </div> </section> <div class="block"></div> </div> </div> </div>  <footer> <div class="padding"> <div class="main"> <div class="wrapper"> <div class="fleft footer-text"> Copyright © <a href="#">Domain Name</a> All Rights Reserved <strong> Design by Flowers<a target="_blank" href="kimflow3@hotmail.com"></a></strong> </div> <ul class="list-services"> <li>Link to Us:</li> <li><a class="tooltips" href="https://www.facebook.com/mamaginas.biz/"></a></li> <li class="item-1"><a class="tooltips" href="#"></a></li> <li class="item-2"><a class="tooltips" href="#"></a></li> </ul> </div> </div> </div> </footer> <script type="text/javascript">Cufon.now();</script> (function() { function validEmail(email) { var re = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i; return re.test(email); } function validateHuman(honeypot) { if (honeypot) { //if hidden form filled up console.log("Robot Detected!"); return true; } else { console.log("Welcome Human!"); } } // get all data in form and return object function getFormData(form) { var elements = form.elements; var fields = Object.keys(elements).filter(function(k) { return (elements[k].name !== "honeypot"); }).map(function(k) { if(elements[k].name !== undefined) { return elements[k].name; // special case for Edge's html collection }else if(elements[k].length > 0){ return elements[k].item(0).name; } }).filter(function(item, pos, self) { return self.indexOf(item) == pos && item; }); var formData = {}; fields.forEach(function(name){ var element = elements[name]; // singular form elements just have one value formData[name] = element.value; // when our element has multiple items, get their values if (element.length) { var data = []; for (var i = 0; i < element.length; i++) { var item = element.item(i); if (item.checked || item.selected) { data.push(item.value); } } formData[name] = data.join(', '); } }); // add form-specific values into the data formData.formDataNameOrder = JSON.stringify(fields); formData.formGoogleSheetName = form.dataset.sheet || "responses"; // default sheet name formData.formGoogleSendEmail = form.dataset.email || ""; // no email by default console.log(formData); return formData; } function handleFormSubmit(event) { // handles form submit without any jquery event.preventDefault(); // we are submitting via xhr below var form = event.target; var data = getFormData(form); // get the values submitted in the form /* OPTION: Remove this comment to enable SPAM prevention, see README.md if (validateHuman(data.honeypot)) { //if form is filled, form will not be submitted return false; } */ if( data.email && !validEmail(data.email) ) { // if email is not valid show error var invalidEmail = form.querySelector(".email-invalid"); if (invalidEmail) { invalidEmail.style.display = "block"; return false; } } else { disableAllButtons(form); var url = form.action; var xhr = new XMLHttpRequest(); xhr.open('POST', url); // xhr.withCredentials = true; xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xhr.onreadystatechange = function() { console.log(xhr.status, xhr.statusText); console.log(xhr.responseText); var formElements = form.querySelector(".form-elements") if (formElements) { formElements.style.display = "none"; // hide form } var thankYouMessage = form.querySelector(".thankyou_message"); if (thankYouMessage) { thankYouMessage.style.display = "block"; } return; }; // url encode form data for sending as post data var encoded = Object.keys(data).map(function(k) { return encodeURIComponent(k) + "=" + encodeURIComponent(data[k]); }).join('&'); xhr.send(encoded); } } function loaded() { console.log("Contact form submission handler loaded successfully."); // bind to the submit event of our form var forms = document.querySelectorAll("form.gform"); for (var i = 0; i < forms.length; i++) { forms[i].addEventListener("submit", handleFormSubmit, false); } }; document.addEventListener("DOMContentLoaded", loaded, false); function disableAllButtons(form) { var buttons = form.querySelectorAll("button"); for (var i = 0; i < buttons.length; i++) { buttons[i].disabled = true; } } })(); </body> </html> ```