We Keep Coding

How to submit form using AJAX without having to leave the page HTML Formsubmit

I'm using Formsubmit to send contact us form to my email and so far it's working.
But I would like when user send the form it does not redirect it to the source thank you page instead I'd like to display just thank you text on the same page. I'd like to use my own.
So I followed the documentation and I came up with the following :
Unfortunately when I try validate the form button it does not work
<form id="contactForm" action="https://formsubmit.co/el/myemail" method="POST">
<input type="text" name="name">
<input type="phone" name="phone" inputmode="tel">
<input type="hidden" name="_subject" value="Partenaires">
<input type="email" name="email" >
<input type="text" name="message" >
<button class="btn btn-primary border rounded-0 shadow-lg d-lg-flex justify-content-lg-center"
type="submit" name="sendData">Send</button>
<!-- <input type="hidden" name="_next" value="thanks.html">-->
<script type="text/javascript">
var frm = $('#contactForm');
var msg_res ='';
frm.submit(function (e) {
e.preventDefault();
$.ajax({
type: frm.attr('method'),
method: "POST",
url: "https://formsubmit.co/el/vupawa",
dataType: 'html',
accepts: 'application/json',
data: frm.serialize(),
success: function (response) {
$("#message").html(response);
if(response != msg_res){
msg_res = response; //store new response
alert('New message received');
}
},
error: function (response) {
console.log('An error occurred.');
console.log(response);
}
complete: function(response){
setTimeout(ajax,1000);
}
});
});
});
</script>
Note : that uncommenting this line <input type="hidden" name="_next" value="thanks.html"> will take validate the form and go through another page which is not what I want here.
Any ideas ?

To Prevent Submission You should return false in
frm.submit(function (e) {
return false;
})
Or in form tag
<form onSubmit="return false">
var frm = $('#contactForm');
var msg_res ='';
frm.submit(function (e) {
e.preventDefault();
$.ajax({
type: frm.attr('method'),
method: "POST",
url: "https://formsubmit.co/el/vupawa",
dataType: 'html',
accepts: 'application/json',
data: frm.serialize(),
success: function (response) {
$("#message").html(response);
if(response != msg_res){
msg_res = response; //store new response
alert('New message received');
}
},
error: function (data) {
console.log('An error occurred.');
console.log(data);
}
});
return false; // here a change
});
<form id="contactForm" action="https://formsubmit.co/el/myemail" method="POST">
<input type="text" name="name">
<input type="phone" name="phone" inputmode="tel">
<input type="hidden" name="_subject" value="Partenaires">
<input type="email" name="email" >
<input type="text" name="message" >
<button class="btn btn-primary border rounded-0 shadow-lg d-lg-flex justify-content-lg-center"
type="submit" name="sendData">Send</button>
<!-- <input type="hidden" name="_next" value="thanks.html">-->

Dynamically Pass Form ID Into Function

I have several forms on a page and i want to utilize the same ajax function. It works great for one form since I am grabbing the id with getElementById and then passing it to my ajax function. What I am trying to do is pass down the id of the form onSubmit dynamically.
form
<form id="postData" name="business" method="post" action="{{ path('location_graph', {'location_id': location.getId }) }}"
class="m-form m-form--fit m-form--label-align-right">
<div class="form-group m-form__group row">
<label class="col-2 col-form-label required" for="description">Business
Description</label>
<div class="col-7">
<input type="text" class="form-control m-input" id="description"
name="extra[description]">
</div>
</div>
...
<div class="form-group m-form__group row">
<button type="submit" class="btn m-btn--square btn-outline-primary">
Submit
</button>
</div>
</form>
script
document.getElementById('postData').addEventListener('submit', postData);
function postData(event) {
event.preventDefault();
$.ajax({
type: $(this).attr("method"),
url: $(this).attr("action"),
data: $(this).serialize(),
success: function (data) {
console.log(data);
$('#success__para').html("You data was saved");
}
});
}

You can attach a submit event handler to each of the forms and pass event and this.id (the id of the form element) as arguments.
Javascript:
function postData(event, id) {
event.preventDefault();
var elem = $('#'+id);
$.ajax({
type: elem.attr("method"),
url: elem.attr("action"),
data: elem.serialize(),
success: function (data) {
console.log(data);
$('#success__para').html("You data was saved");
}
});
}
HTML:
<form id="someid" onsubmit="postData(event, this.id)">

Ajax to send form to server, fails at serialize?

It seems like i cant get to serialize my form. I do get the first alert with lol, but not the second alert with pdata. Does anyone see whats wrong? Im trying to use ajax to send the data in the form. Down below is the script and the html code.
<html>
<head>
<script>
function dologin(event) {
event.preventDefault();
alert("lol");
var pdata = $('#form').serialize();
alert(pdata);
$.ajax({
type: 'POST',
data: pdata,
url: 'LINK',
success: function(data) {
//console.log(data);
alert("YAY");
},
error: function() {
//console.log(data);
alert("NAY");
}
});
};
</script>
</head>
<body>
<h1>Logg inn</h1>
<form id="form" onsubmit="dologin()">
<div class="form-group">
<label for="email">Epost</label>
<input type="email" class="form-control" name="login" value="" placeholder="Epost">
</div>
<div class="form-group">
<label for="password">Passord</label>
<input type="password" class="form-control" name="password" value="" placeholder="Passord">
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="remember_me">
Husk meg
</label>
</div>
<button type="submit" class="btn btn-default">Logg inn</button>
</form>
<div class="login-help">
<p>Glemt passordet? Trykk her for å endre det.</p>
</div>
</body>
</html>

The problem with your code is, you are accessing event argument wheres there is no parameter passed to the function, so its triggering an error and submitting the form as normal form submission.
If you like to keep your implementation u can modify your code like bellow:
function dologin() {
alert("lol");
var pdata = $('#form').serialize();
alert(pdata);
$.ajax({
type: 'POST',
data: pdata,
url: 'LINK',
success: function(data) {
//console.log(data);
alert("YAY");
},
error: function() {
//console.log(data);
alert("NAY");
}
});
return false;
};
and modify this line
<form id="form" onsubmit="dologin()">
to
<form id="form" onsubmit="return dologin()">
or can use the following way
$(document).ready(function() {
$('#form').submit(function(e){
e.preventDefault();
$.ajax({
type: 'POST',
data: $(this).serialize(),
url: 'LINK',
success: function(data) {
//console.log(data);
alert("YAY");
},
error: function() {
//console.log(data);
alert("NAY");
}
});
});
});
And form tag should be then:
<form id="form">

Form Submission does not work

My form submission does not work . Nothing happens when i submit the form. I tried everything but no result.
I have looked at everything on here that I can find and I just can't figure out why I cannot perfect this code.
My code
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(function () {
$('contact_queryf').bind('click', function (event) {
event.preventDefault();
$.ajax({
type: 'POST',
url: 'Views/query_send.php',
data: $('contact_queryf').serialize(),
success: function () {
alert('form was submitted');
}
});
});
});
</script>
my form code
<form role="form" method="post" id="contact_queryf" name="contact_queryf">
<div class="form-group">
<input type="text" class="form-control" id="name" name="name" placeholder="Name" required>
</div>
<div class="form-group">
<input type="email" class="form-control" id="email" name="email" placeholder="Email" required>
</div>
<div class="form-group">
<div class="radio-inline">
<label class="radio-inline">
<input type="radio" name="qtype" id="qtype" value="Android" required>Android
</label>
<label class="radio-inline">
<input type="radio" name="qtype" id="qtype" value="iOS" required>iOS
</label>
<label class="radio-inline">
<input type="radio" name="qtype" id="qtype" value="Web" required>Web
</label>
<label class="radio-inline">
<input type="radio" name="qtype" id="qtype" value="other" required>Other
</label>
</div>
</div>
<div class="form-group">
<textarea class="form-control" rows="3" name="text" id="text" required></textarea>
</div>
<button type="submit" class="btn btn-custom bleft" id="contact_query" name="contact_query">Submit</button>

First thing to try:
data: $('#contact_queryf').serialize()
instead of
data: $('contact_queryf').serialize()
(you were missing the #)
Also, you want to bind the click event to "#contact_query" (the submit button), not to the form itself, so
$('#contact_query').bind(...
instead of
$('contact_queryf').bind(...

$(function () {
$('#contact_queryf').on('click', function (event) {
event.preventDefault();
$.ajax({
type: 'POST',
url: 'Views/query_send.php',
data: $(this).serialize(),
success: function (response) {
// response
alert('form was submitted');
}
});
});
});
Take a look on the documentation - .on()

You are missing the # in your jquery selector
$('contact_queryf').bind('click', function (event) {
Should be
$('#contact_queryf').bind('click', function (event) {

The selector is incorrect, change the selector's
$(function () {
$('#contact_query').bind('click', function (event) {
event.preventDefault();
$.ajax({
type: 'POST',
url: 'Views/query_send.php',
data: $('#contact_queryf').serialize(),
success: function () {
alert('form was submitted');
}
});
});
});
OR
$(function () {
$('#contact_queryf').submit(function (event) {
$.ajax({
type: 'POST',
url: 'Views/query_send.php',
data: $(event.target).serialize(),
success: function () {
alert('form was submitted');
}
});
return false;
});
});
And in HTML, form close </form> tag is missing

If you're using the <button type="submit" to submit the form you do not need the AJAX.
Or am I missing something?
Right now you're submitting the form when a user clicks the form.
Here you go cat daddy
This can get you jump started in submitting a form via AJAX but at a lower level.
This is really what you're attempting to do.
<button type="submit" class="btn btn-custom bleft" id="contact_query" name="contact_query" onclick="btnSubmitForm(event)">Submit</button>
var btnSubmitForm = function (event) {
event.preventDefault();
var newForm = new FormData(document.forms[0]),
xhr = new XMLHttpRequest(),
that = this;
xhr.onload = function () { /*do something when response is back from server*/ };
xhr.open('GET|POST|PUT|DELETE', 'YOUR URL', true);
xhr.send(newForm);
return false;
};

Form serialize issue

Here is my form's markup
<form name="contactForm" id="contactForm" role="form">
<div style="width: 190px">
<div class="form-group">
<input type="text" placeholder="fullname" name="fullname" id="formFullname" class="form-control">
</div>
<div class="form-group">
<input type="email" placeholder="email" name="email" id="fromEmail" class="form-control">
</div>
<div class="form-group">
<input type="text" placeholder="company" name="company" id="fromCompany" class="form-control">
</div>
</div>
<div class="clear"></div>
<div class="form-group">
<textarea placeholder="message" name="message" id="formMessage" rows="3" class="form-control"></textarea>
</div>
<button class="btn btn-success" type="submit" name="submit" id="formSubmit">send</button>
</form>
Using jquery 1.10.2
And here is JS
var form = $('#contactForm');
form.submit(function () {
console.log("form ", $(this).serialize());
$.ajax({
type: "POST",
url: url + "ajax/sendmail",
data: $(this).serialize(),
success: function (response) {
console.log(response);
}
});
return false;
});
I know that function fires, tested with alert. But console.log doesnt return anything, and during ajax call I don't see anything in POST (Watching with firebug's XHR).
BTW: role="form" is because i'm using Twitter Bootstrap framework
What am I doing wrong?
UPDATE
data: $(form).serialize() didn't help also

If you try this :
form.submit(function () {
console.log("form ", $(this).serialize());
return false;
});
it works just fine. So I think the problem
form.on('submit',function () {
event.preventDefault();
console.log("form ", $(this).serialize());
$.ajax({
type: "POST",
url: url + "ajax/sendmail",
data: $("form").serialize(),
success: function (response) {
console.log(response);
}
});
return false;
});
Because $(this) in your code doesn't refer to the form but instead refers to jQuery on which the ajax method is called

Try the following code, but first modify your form HTML so that is has an "action" attribute. The nice thing about this code is that it can be used on any form which has a submit button and an action attribute. (i.e. it is not coupled to any specific IDs)
$(function() {
$('input[type="submit"]').click(function(event) {
event.preventDefault();
var form = $(this).closest('form');
var url = form.attr('action');
var data = form.serialize();
$.post(url, data)
.done(function() {
alert('Yay! your form was submitted');
})
.fail(function() {
alert('Uh oh, something went wrong. Please try again');
});
});
Cheers.