How many times have you encountered that you entered incorrect data, which is why the page reloaded and completely deleted the characters entered in the fields. To fix this, there is a fairly popular approach to building a user interface, and its name is ajax. It is found in many projects and is used in many ways.
Submit ajax form: connecting libraries
Connect the jquery library to index.php.
<head> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> </head>
There is another way to include jquery in a document. You need to download the library from the official jquery website, put it in the desired folder and insert the link to it in a similar way:
<head> <sctipt type="text/javascript" src="/js/jquery.js"></script> </head>
Connection and setup of documents
1. Create a .php format document with any name convenient for you in the folder with the site - this will be the submission of the ajax php form. In it you can write what format the text with the message will be displayed. For example, form1.php.
2. In the javascript folder, create a .js file with any convenient name. For example, form.js.
3. Connect this folder to your document.
<head> <script type="text/javascript" src="/js/form.js"></script> </head>
4. Create a form with the following parameters:
<form action="form1.php" method="post"> <p><input type="text" name="login"></p> <p><input type="password" name="pass"></p> <p><input type="submit" value=""></p> </form>
In it, do not forget to create fields for entering your data.
5. Go to the form1.php file in the directory with the site, in which write:
<? var_dump($_POST); ?>
Now, when submitting the form, information about the data will be displayed in the browser.
In the same file, you can write what exactly will be displayed or how. You can also write loops or algorithms here.
Submit ajax jquery form
1. In the created form.js file, you need to write code that is responsible for ensuring that the file works after the site page is fully loaded.
$(document).ready(function(){
2. Then you need to configure the submit button. Do it all in the same file.
$("form").submit(function(event) { event.preventDefault();
The first part of the code is responsible for selecting an element on the page, and the second is for preventing the default action.
3. Then, for example, take the submission of the ajax form when sending the data successfully.
$.ajax({ type: $(this).attr('method'), url: $(this).attr('action'), data: new FormData(this), contentType: false, cache: false, processData: false, success: function(result){ alert(result); } });
Each setting is described in detail below.
- type is the type of request that is sent on the form; since it costs POST, the type of request will be appropriate;
- this - select an element inside the construct;
- attr - abbreviated from attraction (attraction), that is, a certain parameter of the selected target (form) is involved;
- url - parameter responsible for where the request will be sent; in this case, what is written in the form parameters (form1.php);
- data - indicates the form data;
- contentType - responsible for sending headers to the server; in this case it is not necessary;
- cache - is responsible for maintaining the cache at the user;
- processData - responsible for converting data to a string;
- success - displays the result of successful data sending; therefore, if the sending of data is successful, then the actions of the function are performed.
4. Done, now when you submit the ajax form, you will receive data without refreshing the page.
The result can be changed using the form1.php file, where you can specify what exactly will be displayed as a result. For instance,
<? echo ": $_POST[login]"; ?>
You can experiment and create a check for the correctness of the input of certain data: if the data is not correct, then the desired message is displayed, otherwise it redirects to the desired page. It is also possible much more that only your soul desires.
There is also sending data to the server asynchronously. This is when the user enters text, and he immediately lights up in red, indicating that the data entered is incorrect. There are many manuals about this on the Internet, where everything is clearly explained and shown by examples.
Conclusion
Undoubtedly, ajax is a useful tool in creating sites. To make quality pages and interfaces, it is simply necessary. It is worth noting that it is very important to know jquery to fully understand the picture and what is written in the code, because simple copy-paste can not always help and educate you in understanding the code. It is always worth remembering that language versions are updated, and some functions may simply disappear. Therefore, not all solutions can be relevant, often the written code just does not work or does not produce the result that I would like to see on my screen.