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">-->

Javascript - one button call ajax and one button submit form using html5 form validation

I have a form that I want to use the required attribute, which I believe is from html5 to make sure the user puts in a name before running the ajax to send and email and stays on this page (index.php). The form below works. My problem is that I can't figure out how to a a button called pay that submits the form to pay.php like a regular form submit so the user ends up on pay.php when they click "pay" and I want the form validation to still occur when they click pay and on pay.php I can grab the contactName from the post.
<form id="contactForm" method="post" class="tm-contact-form">
Name: <input type="text" id="contactName" name="contactName" class="form-control" placeholder="Name" required/>
<button type="submit" id="inquire-button" class="btn btn-primary">Inquire</button>
<div id="mail-status"> </div>
</form>
<script type="text/javascript">
$("inquire-button").on('click',function(e){
e.preventDefault();
});
$("#contactForm").on('submit',function(e){
sendContact();
e.preventDefault();
});
function sendContact() {
jQuery.ajax({
url: "mailer.php",
data:'contactName='+$("#contactName").val(),
type: "POST",
success:function(data){
$("#mail-status").html(data);
},
error:function (){}
});
}
</script>

EITHER don't use the click, but only the submit event
$("#contactForm").on('submit', function(e) {
const $btn = $(document.activeElement);
if ($btn.is("#inquire")) {
console.log("Inquire clicked")
e.preventDefault();
jQuery.ajax({
url: "mailer.php",
data: 'contactName=' + $("#contactName").val(),
type: "POST",
success: function(data) {
$("#mail-status").html(data);
},
error: function() {}
});
}
else console.log("Pay clicked")
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="contactForm" method="post" class="tm-contact-form">
Name: <input type="text" id="contactName" name="contactName" class="form-control" placeholder="Name" required/>
<button type="submit" id="inquire-button" class="btn btn-primary">Inquire</button>
<button type="submit" id="pay" class="btn btn-primary">Pay</button>
<div id="mail-status"> </div>
</form>
OR use a button
$("#contactForm").on('submit', function(e) {
console.log("Submitted (pay)")
})
$("#inquire-button").on("click", function() {
if (!this.form.checkValidity()) {
this.form.reportValidity()
return
}
console.log("Inquire clicked")
jQuery.ajax({
url: "mailer.php",
data: 'contactName=' + $("#contactName").val(),
type: "POST",
success: function(data) {
$("#mail-status").html(data);
},
error: function() {}
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="contactForm" method="post" class="tm-contact-form">
Name: <input type="text" id="contactName" name="contactName" class="form-control" placeholder="Name" required/>
<button type="button" id="inquire-button" class="btn btn-primary">Inquire</button>
<button type="submit" id="pay" class="btn btn-primary">Pay</button>
<div id="mail-status"> </div>
</form>

Avoid Refreshing page submiting the form

Whenever using this form that I made (in Portuguese), refreshing removes all previously entered data from the page. Why does this happen, and how can I fix it? Thank you for your time.
<script type="text/javascript">
function submitForm(){
// Initiate Variables With Form Content
var nome = $("#nome").val();
var email = $("#email").val();
var telefone = $("#telefone").val();
var assunto = $("#assunto").val();
var mensagem = $("#mensagem").val();
$.ajax({
type: "POST",
url: "send-contact2.php",
data: "nome=" + nome + "&email=" + email + "&telefone=" + telefone + "&assunto=" + assunto + "&mensagem=" + mensagem,
cache:false,
success: function (data) {
alert(data);
}
});
}
</script>
<form id="myForm">
<div class="col col-md-6">
<input type="text" name="nome" id="nome" required value="" tabindex="1" placeholder="Nome">
<input type="text" name="email" id="email" required value="" tabindex="2" placeholder="E-mail">
<input type="text" name="telefone" id="telefone" required value="" tabindex="2" placeholder="Telefone">
<select id="assunto" name="assunto" required>
<option value="outros">Outros assuntos</option>
<option value="encomendas">Encomendas</option>
</select>
</div>
<div class="col col-md-6">
<textarea name="mensagem" id="mensagem" cols="29" rows="8" placeholder="Mensagem"></textarea>
</div>
<div class="col col-md-12 ">
<button name ="submit" type="submit" onclick="return submitForm();">Enviar</button>
</div>
</form>

Your function also needs to return false to stop the click event behaviour from submitting the form:
function submitForm(){
// your code...
return false;
}
Better still, hook to the submit event of the form directly and do away with the clunky onclick handlers, and use serialize() to gather the form data for you:
<button name="submit" type="submit">Enviar</button>
<script type="text/javascript">
$(function() {
$('#myForm').submit(function(e) {
e.preventDefault(); // stop form submission
$.ajax({
type: "POST",
url: "send-contact2.php",
data: $(this).serialize(),
cache: false,
success: function (data) {
alert(data);
}
});
}
});
</script>

Try to change onClick action to onSubmit and add return false after method. Like this:
<button name ="submit" type="submit" onsubmit="submitForm(); return false;">Enviar</button>
Good practice will be add method="POST" to your form attributes.

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