Update php script without reloading the page. AJAX form without page reload

Hi all. Today I decided to take on the task of revising an article about, which opened in a modal window. The article was quite popular, but had some problems. The fact is that after sending the data, a message about successful sending was displayed and did not allow sending any more letters until the page was reloaded. Many of you have asked how to make sure the message doesn't replace the form and allows you to resend emails. In this article we will fix this and more.

Also, the previous article probably had a drawback in that it was difficult to connect several forms, namely, it was necessary to duplicate the script that processes the form, which is not very nice. In this article we will correct this point. In addition, the form will work without a modal window.

Oh yes, I’ll put the ID books and classes in order so that it’s easier to understand what and why. I'll change the design of the form, it's more interesting. In one of the following articles, perhaps we will connect reCapthсa from Google to this form, and set up an “Event” goal upon successful submission, so that a whole series of articles is being prepared.

How to make a feedback form in a modal window

Let's get started. Since the modal window will be called using the jQuery plugin Remodal, before the closing tag we will connect jQuery itself and the Remodal plugin. Below we will add a script that will be responsible for submitting the form without reloading the page. It looks like this:

Pay attention to the path to the files. I decided to put almost all the files in the modalform folder to make it easier to connect to the project.

Before moving on to the form markup, let's include the css files of the modal window. I do this between head tags:

So, now let's move on to the markup of the form itself and the button that calls it. Let's start with the button.

Submit your application

Everything is simple here. A regular link with a custom class. Data-remodal-target is used to bring up the modal window, similar to using an href with a link to the id. But why do we need this garbage in the address bar? In turn, the modal window with the form looks like this:

Request a call back and our consultant will contact you

Enter your name Enter your phone number

website

Although at first glance there is a lot of code, in reality everything is not so complicated. The entire form is wrapped in a div with the remodal class. It has data-remodal-id with the same parameter as the button. That is, firstForm. It is thanks to them that when you click on the button, the desired window opens if there are several of them on the page.

Data-remodal-options is one way to set or disable some script options for a modal window. You can read more on the official website. I already provided the link above. In my case. I disabled the appearance of the anchor in the address bar and prevented the window from closing after clicking the "send" button.

Inside is the form itself with fieldset(s). It is important to pay attention here to the paragraph with the “msgs” class. This is where the message about successful sending or error will be displayed. Previously, the message was displayed directly inside the form, replacing all the content inside.

One more thing. Hidden field with class formInfo. It is needed in order to distinguish applications and understand which form the user filled out, if there are several different ones. Simply fill in the value with the required text.

At the end of the article, I will show you how to make it so that you can call a window from different places on the site and understand which button the user clicked on.

Now let's look at a script that will help us submit the form without reloading the page. I called it form.js:

$(document).ready(function () ( $("form").submit(function () ( // Get the form ID var formID = $(this).attr("id"); // Add a hash to the name ID var formNm = $("#" + formID); var message = $(formNm).find(".msgs"); // Searches for class.msgs in the current form and writes it to the variable var formTitle = $(formNm). find(".formTitle"); // Searches for the class.formtitle in the current form and writes it to the variable $.ajax(( type: "POST", url: "modalform/mail.php", data: formNm.serialize(), success: function (data) ( // Display a message about successful sending message.html(data); formTitle.css("display","none"); setTimeout(function())( //$(formNm).css(" display","block"); $(".formTitle").css("display","block"); $(".msgs").html(""); $("input").not( ":input, :input").val(""); ), 3000); ), error: function (jqXHR, text, error) ( // Display a sending error message message.html(error); formTitle.css ("display","none"); // $(formNm).css("display","none"); setTimeout(function())( //$(formNm).css("display","block" ); $(".formTitle").css("display","block"); $(".msgs").html(""); $("input").not(":input, :input").val(""); ), 3000); ) )); return false; )); //for form styles var $input = $(".form-fieldset > input"); $input.blur(function (e) ( $(this).toggleClass("filled", !!$(this).val()); )); ));

Let me explain a little what's going on here. We call the function when the form's submit event occurs (submit is clicked). Then we get the form id and save it to the formNm variable. Now, the id of our form is in it. In the previous article, this is where the message was displayed. And it was precisely this moment that I wrote so often in the comments. You just need to specify a different location for the output. In our case, we will output all messages to a pre-prepared location. This is a "p" tag with a class of "msgs".

In the script, we say that while the message about successful or unsuccessful sending is displayed, we will hide the header. And after 3 seconds, we’ll return everything to its place and clear the form fields along with the message.

The file that will send the received data is mail.php. Here is his code: