babusi babusi -4 years ago 91
Ajax Question

Stop form from redirecting on submit

I'm very aware that this question has been asked several times but I have tried at least 6 solutions and it has not worked. I'm collecting data to send to a google form but on form submission the browser redirects to a success page. I'd like for it to all happen using AJAX but my code isn't working.

HTML:

<form id="userinfo" method="get" action="https://script.google.com/macros/s/xxx/exec" accept-charset="UTF-8" onsubmit="return false">
<input type="text" name="name" id="formname" placeholder="Name">
<input type="text" name="email" id="formemail" placeholder="Email">placeholder="Game Days">
<input type="submit" value="submit" id="upload_data"/>
</form>


JS:

$("#userinfo").submit(function(e) {

var urll = "https://script.google.com/macros/s/xxx/exec"; // the script where you handle the form input.

$.ajax({
type: "GET",
url: urll,
data: $("#userinfo").serialize(), // serializes the form's elements.
success: function(data)
{
alert(data); // show response from the php script.
}
});

e.preventDefault(); // avoid to execute the actual submit of the form.
});

Answer Source

You could use the jQuery Form Plugin to send the form without doing a submit.

Your code should look kinda like this:

$("#userInfo").ajaxSubmit({
   success: function(data)
   {
       alert(data); // show response from the php script.
   }
});
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download