How to Read All the Form Elements on a Post Php Page

Read Time: ix mins Languages:

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

In this tutorial, I'll prove you how like shooting fish in a barrel it is to do simply that—validate and submit a contact form without page refresh using jQuery! Allow'due south become started.

What Nosotros're Building

In this example, we have a unproblematic contact class with proper name, email, and phone number. The grade submits all the fields to a PHP script without any page refresh, using native jQuery functions.

1. Build the HTML Class

Allow'due south take a expect at our HTML markup. We begin with our basic HTML course:

          <div id="contact_form">   <class name="contact" activity="">     <fieldset>       <div class="input-box">       <label for="name" id="name_label">Proper noun</label>       <input blazon="text" proper noun="name" id="name" minlength="3" placeholder="Monty" class="text-input" required/>       </div>              <div class="input-box">       <label for="email" id="email_label">Electronic mail</label>       <input type="email" name="email" id="email" placeholder="example@tutsplus.com" class="text-input"/>       </div>              <div class="input-box">       <label for="telephone" id="phone_label">Phone</label>       <input type="tel" name="telephone" id="telephone" class="text-input" placeholder="856-261-9988"/>       </div>              <input type="submit" name="submit" class="button" id="submit_btn" value="Ship" />     </fieldset>   </form>     <div class="greetings">     <h1>Contact US</h1>       <p>We are waiting to hear from y'all!</p>     </div>   </div>

You might observe that I have included adiv with idcontact_form that wraps effectually the entire form.

Be sure to not miss thatdiv in your own form as nosotros volition be needing this wrapperdiv afterward on. Yous might also notice that I have left both the action and the method parts of the form tag blank. We actually don't need either of these hither, because jQuery takes care of it all later on.

Another of import matter is to exist certain to include theid values for each input field. Theid values are what your jQuery script will exist looking for to procedure the form with.

We are also doing some very basic customer-side validation using HTML5 attributes likerequired andminlength. Theminlength attribute will brand sure that users supply a name that is at least three characters long. Similarly, therequired attribute makes certain that users fill up out all the form values you need.

Y'all can read more about these attributes in our tutorial on validating form inputs using only HTML5 and Regex.

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

* {   box-sizing: border-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;   edge: 2px solid black;   padding: 10px; }  div.input-box {   display: flex;   margin: 10px 0;   flex-wrap: wrap; }  div.input-box characterization {   display: inline-block;   margin: 10px 10px 10px 0;   width: 20%; }  div.input-box input {   font-size: one.5rem;   border: 1px solid #ccc;   padding: 4px 8px;   flex: ane; }  input.button {   font-size: 1.5rem;   background: blackness;   color: white;   border: 1px solid black;   margin: 10px;   padding: 4px 40px; }  h1 {   font-size: 5rem;   text-transform: uppercase;   font-family: 'Passion Ane';   font-weight: 400;   alphabetic character-spacing: 2px;   line-height: 0.8; }  div.greetings {   text-align: center;   font-size: 1.2rem;   background-colour: #d3d3d3;   background-image: linear-gradient(15deg, transparent 28%, rgba(255, 255, 255, 0.5) 28%);   background-size: 50px; }  div.input-box input.error {     border: 2px dashed red;     background: #fee; }  div.input-box label.fault {     colour: red;     font-size: 1rem;     text-align: right;     width: 100%;     margin: 10px 0; }

2. Begin Calculation jQuery

The side by side step in the process is to add some jQuery code. I'm going to assume that you have downloaded jQuery, uploaded to your server, and are referencing it in your webpage.

Next, open another new JavaScript file, reference it in your HTML as you would any normal JavaScript file, and add the following:

          $(part() {      // set up grade validation here   });

This office runs equally soon every bit the HTML document is ready. If you have washed any work in jQuery previously, this function is the same as jQuery's certificate.set part. Inside, we will set up our validation code.

iii. Write Some Form Validation

We will now write some basic grade validation using jQuery. This will better upon the validation we accept so far. Using a validation library gives us more command over the error messages that are shown to users. It too requires minimal or no changes in the markup of the course.

Starting past loading the jQuery Validation library on your webpage. Now, just add the following lawmaking:

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

Make sure you pass the correct selector when calling thevalidate() method. This will validate the form without requiring y'all to write any fault messages in the HTML or the logic to brandish and hibernate different mistake messages in JavaScript. Endeavor submitting the form without filling in whatever values or by knowingly adding wrong input. The form will display a nice error message like the post-obit image.

Using the validation library also allows you to add conditional validation logic to your forms. For instance, you will be able to add code that requires a phone number only when the email address has not been provided. I have covered this in more detail in the jQuery form validation tutorial.

4. Process Class Submission With the jQuery AJAX Role

At present we go to the heart of the tutorial—submitting our form without page refresh, which sends the form values to a PHP script in the background. Allow'southward take a look at all the code first, and so I will break it down into more than particular next. Add the following code just below the validation snippet nosotros added previously:

$( "course" ).on( "submit", function(e) {      var dataString = $(this).serialize();          // warning(dataString); return faux;      $.ajax({       blazon: "Postal service",       url: "bin/process.php",       data: dataString,       success: part () {         $("#contact_form").html("<div id='message'></div>");         $("#message")           .html("<h2>Contact Form Submitted!</h2>")           .suspend("<p>We will be in touch soon.</p>")           .hibernate()           .fadeIn(1500, role () {             $("#message").append(               "<img id='checkmark' src='images/check.png' />"             );           });       }     });      e.preventDefault();   }); });

In that location's a lot going on here! Let's break it all down—it'south then unproblematic and so easy to use once you understand the process.

We kickoff create a cord of values, which are all the form values that we want to pass forth to the script that sends the email. This tin can exist achieved pretty easily using the bornserialize() 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 employ to be certain I am grabbing the correct values, which yous may find helpful in the process. If you uncomment that alert and test your course, assuming everything has gone right and so far, y'all should become a bulletin similar to the following:

Now we get to our chief AJAX office, the star of today's show. This is where all the activeness happens, so pay close attention!

$("form").on("submit", function (east) {     var dataString = $(this).serialize();          $.ajax({       type: "Postal service",       url: "bin/process.php",       data: dataString,       success: function () {         // Display bulletin dorsum to the user here       }     });      e.preventDefault(); });

Basically, what's going on in the code is this: The.ajax() function processes the values from our string calleddataString with a PHP script calledbin/procedure. php, using the HTTP Postal service method blazon. If our script candy successfully, we can then brandish a message back to the user, and finallyreturn imitation so the page does not reload. That's it! The entire process is handled right in that location in these few lines!

There are more advanced things you can practise here, other than giving a success message. For instance, you could send your values to a database, process them, and then display the results back to the user. So if y'all posted a poll to users, you could procedure their vote, and then return the voting results, all without whatsoever folio refresh required.

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

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

And so nosotros used jQuery'sajax() function to process the values in thedataString. After that process finishes successfully, we display a message dorsum to the user andreturn simulated so that our page does non refresh:

          $.ajax({       type: "Post",       url: "bin/process.php",       information: dataString,       success: role() {         $('#contact_form').html("<div id='bulletin'></div>");         $('#message').html("<h2>Contact Form Submitted!</h2>")         .append("<p>We will exist in touch shortly.</p>")         .hide()         .fadeIn(1500, function() {           $('#message').append("<img id='checkmark' src='images/check.png' />");         });       }     });     return false;

The success part of the script has been filled in with some specific content that tin can be displayed dorsum to the user. But as far as our AJAX functionality goes, that'southward all there is to it. For more options and settings, exist sure to check out jQuery'south documentation on theajax office. The example here is one of the simpler implementations, but fifty-fifty so, it is very powerful, every bit you tin can run into.

v. Display a Message Back to the User

Let's briefly look at the part of the code that displays our message dorsum to the user, to finish out the tutorial.

Showtime, nosotros change 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 course, using jQuery'shtml() function. And then instead of a grade, nosotros now take a newdiv with an id ofmessage. Next, we fill that div with an bodily message: anh2 maximContact Form Submitted:

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

Nosotros'll add together fifty-fifty more content to the message with jQuery'due southappend() part, and to top everything off, we add a absurd effect by hiding the bulletin div with the jQueryhide() function, and then fade it in with thefadeIn() function:

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

So the user ends up seeing the following after they submit the form:

Conclusion

Past now, I think you will accept to agree that it's incredibly easy to submit forms without page refresh using jQuery'southward powerfulajax() function. Just get the values in your JavaScript file, process them with theajax() function, and renderfalse. Y'all can procedure the values in your PHP script only like yous would any other PHP file, the just difference being that the user does not have to wait for a folio refresh—it all happens silently in the background.

So if you accept a contact course on your website, a login course, or even more than advanced forms that process values through a database and recall the results, yous can exercise it all easily and efficiently with AJAX.

Learn JavaScript With a Costless Course

If y'all want to master JavaScript, exist sure to check out our gratis course to learn the complete A-Z of modern JavaScript fundamentals.

In this course, you'll learn all of the essential concepts of the JavaScript language. 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 first with the very fundamentals of the language: variables and datatypes. Then in each lesson y'all'll build knowledge, from data structures like arrays and maps to loops, control structures, and functions. Along with the nuts of the language, yous'll also learn some key congenital-in APIs for manipulating data, AJAX, and working with the web browser DOM. Finally, you'll get a look at some of the nigh powerful and widely used web APIs that are supported by all modernistic browsers.

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

dillmanhaterand.blogspot.com

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

Share this post