Search code examples
javascriptjqueryformsgoogle-docsgoogle-docs-api

Custom made google form opens another tab on submit


I have made a custom google form and using google spreadsheet as my database. But on clicking the submit button on the form the same page opens in a new tab and the previous page text boxes have the data that the user has entered .

The custom form code is :

<form action="" target="hidden_iframe" method="POST" id="mG61Hd" onsubmit="submitted=true;">     
<h5>Name</h5>
<input type="text" id ="_name" name="name">
<h5>emailaddress</h5>
<input type="text" id="_email" name="email">
<h5>message</h5>
<textarea name="entry.839337160" id ="_message"></textarea>
<button class="btn btn-lg btn-warning"       onclick="postContactToGoogle()">Send</button>
</form>

The JavaScript code is :

function postContactToGoogle() {

    var name = $('#_name').val();

    var email = $('#_email').val();
    var message = $('#_message').val();

    validate();


        if(validate=true)
    {
        $.ajax({
            url: "https://docs.google.com/forms/d/1sKGYnZfwEC_3sQvsjjx57swxLxdHMHPBC89s5C72x5s/formResponse",
            data: { "entry.2005620554": name,
            "entry.1045781291": email, "entry.839337160": message },
            type: "POST",
            dataType: "xml",
            statusCode: {
                0: function () {
                  swal("Heyy there","Thank You for your feedback!","success");
                  $('#_name').val('');

                    $('#_email').val('');
                    $('#_message').val('');
                     window.setTimeout(function(){location.reload()},4000)

                },
                200: function () {
                    swal("Heyy there","Thank You for your feedback!","success");
                  $('#_name').val('');

                    $('#_email').val('');
                    $('#_message').val('');
                     window.setTimeout(function(){location.reload()},4000)

                }
            }
        });

    }

}

function validateEmail(email) {
var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)
(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA
Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(email);
}
function validate() {
var email = $('#_email').val();
if (validateEmail(email)) {


} else {
swal('Oops!','The email '+email+' is not valid','error');



return false;
}

}

Solution

  • I myself solved the above issue by keeping the target of the form to a hidden iframe and creating a hidden iframe on the same page.