How to submit a form using AJAX
For this example we're going to use jQuery. So make sure you've loaded that on your page.
Let's go ahead and look at the form we'll be using. This is your own HTML - and the only thing you need to do to make use of Formbackend. Is to create an account with us, create a new form and use that unique form URL as the value of the action parameter of your form (abcd1234 is the unique identifier for your form - so use whatever you have):
<form action="https://www.formbackend.com/f/acd123" method="post" id="form-signup">
<label>Name</label>
<input type="text" name="name">
<label>Email</label>
<input type="text" name="email">
<button type="submit">Submit</button>
</form>
(make sure you change "abc123" in the above with the unique identifier for your specific form)
Let's take a look at the javascript:
<script>
$(function() {
var $form = $('#form-signup');
$form.on("submit", function(e) {
var formUrl = $(this).attr('action');
// We don't want the page to submit and refresh
e.preventDefault();
// POST the request to Formbackend (the formUrl value)
$.ajax({
url: formUrl,
type: 'POST',
headers : {
'accept' : 'application/javascript',
},
// We serialize the form fields
data: $form.serialize()
}).done(function(submissionMessage) {
// Happens when success!
// submissionMessage is the "Submission Text" you set in
// Formbackend - default: "We received your submission"
}).fail(function() {
// Happens when something goes wrong
}).always(function() {
// This always happens
});
});
});
</script>
If you add the above javascript inside of a script
tag on your website - and the form is similar to what we have in the above example. Then things should just work.
I assume you know the basic of jQuery, but will walk you quickly through it just in case.
First we make sure that the page is in a state where it's ready to be manipulated with the $(function() {..
line.
We then target our form by using the unique id
attribute of the form and assign it to the $form
variable. We get the URL of the form by taking the value of the action
attribute and assigning that to the formUrl
variable.
We then initiate an ajax POST request with the serialized form data and the correct accept header - the accept header pretty much just specifies that we don't want the full HTML response back, but instead we'll just get the successful submission message of the form in the response.
The final HTML looks something like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Formbackend Test</title>
</head>
<body>
<form action="https://www.formbackend.com/f/kcsfk4qr" method="post" id="form-signup">
<label>Name</label>
<input type="text" name="name">
<label>Email</label>
<input type="text" name="email">
<button type="submit">Submit</button>
</form>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script>
$(function() {
var $form = $('#form-signup');
$form.on("submit", function(e) {
var formUrl = $(this).attr('action');
// We don't want the page to submit and refresh
e.preventDefault();
// POST the request to Formbackend (the formUrl value)
$.ajax({
url: formUrl,
type: 'POST',
headers : {
'accept' : 'application/javascript',
},
// We serialize the form fields
data: $form.serialize()
}).done(function(submissionMessage) {
// Happens when success!
// submissionMessage is the "Submission Text" you set in
// Formbackend - default: "We received your submission"
}).fail(function() {
// Happens when something goes wrong
}).always(function() {
// This always happens
});
});
});
</script>
</body>
</html>
Last updated
Was this helpful?