DescriptionInstead of utilizing a document.on(submit) event to refresh the page for all forms on page, this method only attaches the .on(submit) event to a certain form. Solution created for this forum question: https://forum.webflow.com/t/quick-js-question/95045 Show
Table of Contents
Feeling inspired?If this Made In Webflow site sparked some inspo, why not get started on a project of your own? Clone a site, purchase a template or start building from scratch. We miss comments too! As always, we'd love to hear your feedback! Click the link below to take a short survey about Made in Webflow. In JavaScript, you refresh the page using This code can be called automatically upon an event or simply when the user clicks on a link. Example JavaScript Refresh CodeClicking the above button will refresh the page/frame. Auto-RefreshYou can also use JavaScript to refresh the page automatically after a given time period. Here, we are refreshing the page 5 seconds after the page loads. This results in the page continuously refreshing every 5 seconds. You can achieve the same effect using the HTML meta tag. Other Refresh TricksBy including your refresh code in a function, you can have complete control over when the page is refreshed. Example 1Instead of having the "page refresh" function called automatically when the page loads, you can call it only when the user performs some action - such as clicking on a link. Example 2You can use conditional statements to determine whether or not to refresh the page. Here's a basic example of using a "confirm" box to ask the user if it's OK to refresh the page. By incorporating refresh code with a JavaScript function, you can trigger a refresh at any time that makes sense to your web application. HTML RefreshThe above examples will only work as long as the user has JavaScript enabled on their browser. You can also use HTML to refresh a page automatically once the page has loaded. This is achieved by using the HTML meta tag. A great way to improve the user experience of your website is to validate and submit forms without a page refresh. In this tutorial, I'll show you how easy it is to do just that—validate and submit a contact form without page refresh using jQuery! Let's get started. What We're BuildingIn this example, we have a simple contact form with name, email, and phone number. The form submits all the fields to a PHP script without any page refresh, using native jQuery functions. 1. Build the HTML FormLet's take a look at our HTML markup. We begin with our basic HTML form: <div id="contact_form"> <form name="contact" action=""> <fieldset> <div class="input-box"> <label for="name" id="name_label">Name</label> <input type="text" name="name" id="name" minlength="3" placeholder="Monty" class="text-input" required/> </div> <div class="input-box"> <label for="email" id="email_label">Email</label> <input type="email" name="email" id="email" placeholder="" class="text-input"/> </div> <div class="input-box"> <label for="phone" id="phone_label">Phone</label> <input type="tel" name="phone" id="phone" class="text-input" placeholder="856-261-9988"/> </div> <input type="submit" name="submit" class="button" id="submit_btn" value="Send" /> </fieldset> </form> <div class="greetings"> <h2>Contact US</h2> <p>We are waiting to hear from you!</p> </div> </div> You might notice that I have included a Be sure to not miss that Another important thing is to be sure to include the We are also doing some very basic client-side validation using HTML5 attributes like You 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 following form: * { 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; border: 2px solid black; padding: 10px; } div.input-box { display: flex; margin: 10px 0; flex-wrap: wrap; } div.input-box label { display: inline-block; margin: 10px 10px 10px 0; width: 20%; } div.input-box input { font-size: 1.5rem; border: 1px solid #ccc; padding: 4px 8px; flex: 1; } input.button { font-size: 1.5rem; background: black; color: white; border: 1px solid black; margin: 10px; padding: 4px 40px; } h2 { font-size: 5rem; text-transform: uppercase; font-family: 'Passion One'; font-weight: 400; letter-spacing: 2px; line-height: 0.8; } div.greetings { text-align: center; font-size: 1.2rem; background-color: #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.error { color: red; font-size: 1rem; text-align: right; width: 100%; margin: 10px 0; } 2. Begin Adding jQueryThe next 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 up another new JavaScript file, reference it in your HTML as you would any normal JavaScript file, and add the following: $(function() { // set up form validation here }); This function runs as soon as the HTML document is ready. If you have done any 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 ValidationWe will now write some basic form validation using jQuery. This will improve upon the validation we have so far. Using a validation library gives us more control over the error messages that are shown to users. It also requires minimal or no changes in the markup of the form. Starting by loading the jQuery Validation library on your webpage. Now, just add the following code: $(function () { $("form").validate(); }); Make sure you pass the right selector when calling the Using the validation library also allows you to add conditional validation logic to your forms. For example, 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 Form Submission With the jQuery AJAX FunctionNow we get to the heart of the tutorial—submitting our form without page refresh, which sends the form values to a PHP script in the background. Let's take a look at all the code first, and then I will break it down into more detail next. Add the following code just below the validation snippet we added previously: $( "form" ).on( "submit", function(e) { var dataString = $(this).serialize(); // alert(dataString); return false; $.ajax({ type: "POST", url: "bin/process.php", data: dataString, success: function () { $("#contact_form").html("<div id='message'></div>"); $("#message") .html("<h2>Contact Form Submitted!</h2>") .append("<p>We 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's break it all down—it's so simple and so easy to use once you understand the process. We first create a string of values, which are all the form values that we want to pass along to the script that sends the email. This can be achieved pretty easily using the built-in I've commented out an alert that I sometimes use to be sure I am grabbing the right values, which you may find helpful in the process. If you uncomment that alert and test your form, assuming everything has gone right so far, you should get a message similar to the following: Now we get to our main AJAX function, the star of today's show. This is where all the action happens, so pay close attention! $("form").on("submit", function (e) { var dataString = $(this).serialize(); $.ajax({ type: "POST", url: "bin/process.php", data: dataString, success: function () { // Display message back to the user here } }); e.preventDefault(); }); Basically, what's going on in the code is this: The There are more advanced things you can do here, other than giving a success message. For example, you could send your values to a database, process them, and then display the results back to the user. So if you posted a poll to users, you could process their vote, and then return the voting results, all without any page 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
the var dataString = $(this).serialize(); Then we used jQuery's $.ajax({ type: "POST", url: "bin/process.php", data: dataString, success: function() { $('#contact_form').html("<div id='message'></div>"); $('#message').html("<h2>Contact Form Submitted!</h2>") .append("<p>We will be in touch soon.</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 can be displayed back to the user. But as far as our AJAX functionality goes,
that's all there is to it. For more options and settings, be sure to check out jQuery's documentation on the 5. Display a Message Back to the UserLet's briefly look at the part of the code that displays our message back to the user, to finish out the tutorial. First, we change the
entire contents of the $('#contact_form').html("<div id='message'></div>"); This replaces all the content inside the contact form, using jQuery's $('#message').html("<h2>Contact Form Submitted!</h2>") We'll add even more
content to the message with jQuery's .append("<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: ConclusionBy now, I think you will have to agree that it's incredibly easy to submit forms without page refresh using jQuery's powerful So if you have 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 can do it all easily and efficiently with AJAX. Learn JavaScript With a Free CourseIf you want to master JavaScript, be sure to check out our free 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 start with the very fundamentals of the language: variables and datatypes. Then in each lesson you'll build knowledge, from data structures like arrays and maps to loops, control structures, and functions. Along with the basics of the language, you'll also learn some key built-in APIs for manipulating data, AJAX, and working with the web browser DOM. Finally, you'll get a look at some of the most powerful and widely used web APIs that are supported by all modern browsers. Did you find this post useful? Eric is a Freelance Web Developer, Oil Pastels Artist, and committed coffee drinker. :D Can JavaScript refresh a page?You can use the location. reload() JavaScript method to reload the current URL. This method functions similarly to the browser's Refresh button. The reload() method is the main method responsible for page reloading. How do I refresh a form after submitting?Step 3: Enable Automatic Reload. Go to Form Settings.. Scroll to the bottom of the page.. Check the box for “Automatically reload the form”. Set your desired seconds until reload.. Click Save Settings.. Do not refresh page after form submit?Use the preventDefault() method on the event object to prevent a page refresh on form submit in React, e.g. event. preventDefault() . The preventDefault method prevents the browser from issuing the default action which in the case of a form submission is to refresh the page. How do you refresh the page after submit in react JS?If set to true, the browser will do a complete page refresh from the server and not from the cached version of the page. import React from 'react'; function App() { function refreshPage() { window. location. reload(false); } return ( <div> <button onClick={refreshPage}>Click to reload! |