Are You Sure You Want to Submit This Form Again Lost

Read Time: 9 mins Languages:

A great fashion to improve the user experience of your website is to validate and submit forms without a folio refresh.

In this tutorial, I'll prove you how like shooting fish in a barrel information technology is to do just that—validate and submit a contact class without page refresh using jQuery! Let'due south get started.

What We're Edifice

In this example, nosotros have a simple contact form with proper name, e-mail, and telephone number. The form submits all the fields to a PHP script without any folio refresh, using native jQuery functions.

1. Build the HTML Course

Let's have a look at our HTML markup. We begin with our bones HTML form:

          <div id="contact_form">   <class proper noun="contact" action="">     <fieldset>       <div form="input-box">       <label for="name" id="name_label">Proper name</label>       <input type="text" name="proper name" id="name" minlength="iii" placeholder="Monty" grade="text-input" required/>       </div>              <div grade="input-box">       <label for="email" id="email_label">E-mail</label>       <input type="email" name="email" id="email" placeholder="instance@tutsplus.com" grade="text-input"/>       </div>              <div class="input-box">       <characterization for="phone" id="phone_label">Phone</label>       <input type="tel" name="phone" id="telephone" course="text-input" placeholder="856-261-9988"/>       </div>              <input type="submit" name="submit" class="push button" id="submit_btn" value="Ship" />     </fieldset>   </form>     <div class="greetings">     <h1>Contact US</h1>       <p>We are waiting to hear from you!</p>     </div>   </div>

You lot might observe that I accept included adiv with idcontact_form that wraps around the entire form.

Be sure to not miss thatdiv in your own form as we will be needing this wrapperdiv after on. You might also detect that I have left both the action and the method parts of the form tag blank. Nosotros actually don't need either of these here, because jQuery takes care of it all afterwards on.

Some other important affair is to be sure to include theid values for each input field. Theid values are what your jQuery script will exist looking for to process the course with.

We are also doing some very basic client-side validation using HTML5 attributes similarrequired andminlength. Theminlength attribute volition make certain that users supply a name that is at least 3 characters long. Similarly, therequired attribute makes certain that users make full out all the form values you need.

You can read more about these attributes in our tutorial on validating grade inputs using only HTML5 and Regex.

I've added some CSS styles to produce the post-obit form:

* {   box-sizing: edge-box; }  body {   font-family: 'Roboto Slab';   font-size: 1.5rem;   font-weight: 300; }  div#contact_form {   width: 800px;   display: flex;   align-items: stretch;   justify-content: space-evenly;   border: 2px solid blackness;   padding: 10px; }  div.input-box {   display: flex;   margin: 10px 0;   flex-wrap: wrap; }  div.input-box characterization {   display: inline-cake;   margin: 10px 10px 10px 0;   width: xx%; }  div.input-box input {   font-size: 1.5rem;   border: 1px solid #ccc;   padding: 4px 8px;   flex: i; }  input.button {   font-size: 1.5rem;   background: black;   colour: white;   border: 1px solid black;   margin: 10px;   padding: 4px 40px; }  h1 {   font-size: 5rem;   text-transform: uppercase;   font-family: 'Passion One';   font-weight: 400;   letter-spacing: 2px;   line-tiptop: 0.8; }  div.greetings {   text-align: center;   font-size: 1.2rem;   groundwork-color: #d3d3d3;   background-prototype: linear-slope(15deg, transparent 28%, rgba(255, 255, 255, 0.5) 28%);   groundwork-size: 50px; }  div.input-box input.mistake {     edge: 2px dashed blood-red;     background: #fee; }  div.input-box characterization.error {     color: blood-red;     font-size: 1rem;     text-align: correct;     width: 100%;     margin: 10px 0; }

2. Begin Adding jQuery

The next step in the process is to add some jQuery code. I'm going to presume that you take downloaded jQuery, uploaded to your server, and are referencing information technology in your webpage.

Next, open up another new JavaScript file, reference it in your HTML every bit you would any normal JavaScript file, and add together the post-obit:

          $(function() {      // set upwardly form validation here   });

This office runs every bit soon as the HTML document is ready. If yous have done whatsoever work in jQuery previously, this function is the same as jQuery's document.ready function. Inside, we will set up our validation code.

3. Write Some Form Validation

We will now write some basic course validation using jQuery. This will improve upon the validation we have so far. Using a validation library gives united states of america more than control over the mistake letters that are shown to users. It as well requires minimal or no changes in the markup of the class.

Starting by loading the jQuery Validation library on your webpage. At present, simply add the following code:

$(office () {   $("class").validate(); });

Make sure you pass the right selector when calling thevalidate() method. This will validate the form without requiring yous to write any error messages in the HTML or the logic to display and hide different fault letters in JavaScript. Endeavor submitting the form without filling in whatsoever values or past knowingly adding incorrect input. The form will brandish a nice error message like the following image.

Using the validation library also allows you to add provisional validation logic to your forms. For case, you will be able to add code that requires a phone number only when the email address has non been provided. I take covered this in more than particular in the jQuery form validation tutorial.

4. Process Course Submission With the jQuery AJAX Function

Now nosotros get to the heart of the tutorial—submitting our form without page refresh, which sends the form values to a PHP script in the groundwork. Permit's have a look at all the code first, and then I will break information technology down into more than item adjacent. Add the post-obit code just beneath the validation snippet nosotros added previously:

$( "form" ).on( "submit", function(due east) {      var dataString = $(this).serialize();          // alarm(dataString); return false;      $.ajax({       type: "POST",       url: "bin/procedure.php",       data: dataString,       success: function () {         $("#contact_form").html("<div id='message'></div>");         $("#message")           .html("<h2>Contact Form Submitted!</h2>")           .suspend("<p>Nosotros will be in touch soon.</p>")           .hide()           .fadeIn(1500, function () {             $("#message").append(               "<img id='checkmark' src='images/check.png' />"             );           });       }     });      e.preventDefault();   }); });

There's a lot going on here! Let'southward interruption it all down—it's so simple and so like shooting fish in a barrel to use once you sympathise the process.

We commencement create a string of values, which are all the form values that nosotros want to laissez passer along to the script that sends the e-mail. This tin can be achieved pretty easily using the built-inserialize() method in jQuery. This way you don't have to worry about getting and concatenating the values of different valid user inputs yourself.

I've commented out an alert that I sometimes use to be sure I am grabbing the right values, which yous may observe helpful in the process. If yous uncomment that alarm and exam your form, assuming everything has gone right so far, you lot should get a bulletin similar to the following:

Now we get to our main AJAX part, the star of today's show. This is where all the action happens, so pay shut attention!

$("grade").on("submit", office (e) {     var dataString = $(this).serialize();          $.ajax({       type: "POST",       url: "bin/procedure.php",       data: dataString,       success: function () {         // Display message dorsum to the user here       }     });      due east.preventDefault(); });

Basically, what's going on in the code is this: The.ajax() office processes the values from our string chosendataString with a PHP script calledbin/procedure. php, using the HTTP Mail service method type. If our script processed successfully, we tin and then display a bulletin back to the user, and finallyreturn fake so the page does not reload. That'south it! The unabridged process is handled right there in these few lines!

At that place are more than advanced things you can practice here, other than giving a success message. For example, you could send your values to a database, process them, and then display the results dorsum to the user. And then if you posted a poll to users, you could process their vote, and then render the voting results, all without whatever page refresh required.

Let's summarize what happened in our example, to be certain we have covered everything. We grabbed our class values with jQuery using theserialize() method, and then placed those into a string like this:

var dataString = $(this).serialize();

So we used jQuery'sajax() function to procedure the values in thedataString. After that process finishes successfully, we brandish a message back to the user andreturn false so that our page does not refresh:

          $.ajax({       blazon: "Post",       url: "bin/process.php",       information: dataString,       success: function() {         $('#contact_form').html("<div id='message'></div>");         $('#message').html("<h2>Contact Form Submitted!</h2>")         .suspend("<p>We volition be in touch soon.</p>")         .hide()         .fadeIn(1500, function() {           $('#message').append("<img id='checkmark' src='images/check.png' />");         });       }     });     render false;

The success office of the script has been filled in with some specific content that tin exist displayed back to the user. But every bit far as our AJAX functionality goes, that's all there is to information technology. For more than options and settings, be sure to check out jQuery's documentation on theajax role. The instance here is one of the simpler implementations, merely even so, it is very powerful, equally y'all can see.

5. Display a Bulletin Back to the User

Let's briefly look at the part of the lawmaking that displays our message back to the user, to cease out the tutorial.

Offset, we alter the entire contents of the#contact_formdiv (call back I said we would be needing that div) with the following line:

          $('#contact_form').html("<div id='message'></div>");

This replaces all the content inside the contact class, using jQuery'southwardhtml() part. So instead of a class, we now take a newdiv with an id ofmessage. Next, we fill up that div with an actual bulletin: anh2 sayingContact Course Submitted:

          $('#message').html("<h2>Contact Form Submitted!</h2>")

We'll add even more than content to the message with jQuery'southappend() function, and to superlative everything off, we add a cool effect by hiding the message div with the jQueryhide() function, and and then fade it in with thefadeIn() function:

          .suspend("<p>We will be in impact presently.</p>")   .hide()   .fadeIn(1500, function() {     $('#message').append("<img id='checkmark' src='images/cheque.png' />");   });

So the user ends up seeing the post-obit after they submit the grade:

Conclusion

By now, I think you will accept to agree that it's incredibly piece of cake to submit forms without page refresh using jQuery's powerfulajax() part. Just get the values in your JavaScript file, process them with theajax() role, and returnfalse. You can process the values in your PHP script just like you would any other PHP file, the but deviation being that the user does not accept to wait for a page refresh—information technology all happens silently in the background.

So if you take a contact form on your website, a login form, or even more advanced forms that process values through a database and retrieve the results, you lot tin practice it all hands and efficiently with AJAX.

Larn JavaScript With a Free Course

If you lot want to principal JavaScript, be sure to check out our free course to learn the complete A-Z of modern JavaScript fundamentals.

In this grade, you lot'll learn all of the essential concepts of the JavaScript linguistic communication. That's right: all of them! Including the most important recent improvements to the language, in JavaScript ES6 (ECMAScript 2015) and JavaScript ES7 (ECMAScript 2016).

You'll start with the very fundamentals of the language: variables and datatypes. Then in each lesson you'll build knowledge, from data structures similar arrays and maps to loops, command structures, and functions. Along with the basics of the language, you'll as well learn some key built-in APIs for manipulating data, AJAX, and working with the spider web browser DOM. Finally, you'll become a look at some of the most powerful and widely used web APIs that are supported by all modern browsers.

Did you lot find this post useful?

Eric is a Freelance Spider web Developer, Oil Pastels Creative person, and committed coffee drinker. :D

jonespulds1941.blogspot.com

Source: https://code.tutsplus.com/tutorials/submit-a-form-without-page-refresh-using-jquery--net-59

Share this post