How to pass form data from javascript to php

How to pass form data from javascript to php javascript

How to pass data between Javascript and php seems to be necessary, but there are probably many people who don’t know how to do it. However, if you know how to do this, there is no doubt that you can do more, right?
As you know, Javascript and php are two completely different languages. javascript is used for dynamic actions on websites, such as issuing alerts or running slideshows, while php allows you to run processes in the background without being seen by a third party. In this article, I’d like to explain how to pass data between these two different languages, especially focusing on how to pass “form data”.

By the way, the models used in this explanation are extracted from projects that I have actually taken on, so the system is designed to help you learn more practical methods.

Data transfer model between Javascript and php

The model we will use this time is a “mail form that works without page transitions”.
First, let’s briefly describe the main behavior.

Javascript receives the form data, passes it to php, and alerts you to answers such as “error” or “submission complete” that come back from php.On the other hand, php judges the data received from Javascript and returns it to Javascript, if the data is not incomplete, it sends an email.
This is the sequence of operations of the sample.

Let’s start with the code for the sample model.

html

php

As you can see, the form has a simple structure with only your name, inquiry details, and e-mail address. Also, as you can see, I have omitted some parts that are not really related to the theme of this article. Let’s start with the explanation.

Explanation

This time, we used the Javascript library jQuery, and Ajax to pass the data to php. The model “html” from line 21 is an example of Ajax usage.
First, we want to do POST sending, so we specify [type:] as [post]. The following example shows how to do this.
Next, specify the destination php address for the data in [url:]. In the sample, it is [send.php], but of course you can use any file name.
Next, the content to be sent is specified in [data:]. In the sample, the data stored in the variable [data] is specified in advance, but you can of course also place the data directly after [data:].
If the POST transmission is successful, the process in [success:] will be executed, and if the transmission fails , the process in [error:] will be set.

Next, let’s talk about “php“. This part is not the subject of this article, so I will skip the detailed explanation.
First, the order from the top, receiving the post value [line 3~], checking the received value [line 7~], sending the error details if there is an error [line 22~], submitting the form if there is no error, and notifying the user that the submission is complete [line 29~].
The contents of the email sent are omitted. The result of the “echo” in “php” is sent to Javascript again and processed in [success:].

As you can see above, it is possible to send data from Javascript and receive data from php using this method. This model was used for form submission, but it can be applied to other fields as well, so please make use of it.