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;
}
}
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.