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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <title>example</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script> $(document).ready(function() { $('#send').click(function() { //Define the data to be sent by the post method var data = {parameter name : value}; var data = { namae : $('#namae').val(), email : $('#email').val(), ask : $('#ask').val() }; $.ajax({ type: "post", url: "send.php", data: data, //If Ajax communication succeeds success: function(data, dataType) { //Displaying the data returned from PHP alert(data); //Reset the form content after submission. if(data == "Transmission complete."){ document.forms[0].elements[0].value=""; document.forms[0].elements[1].value=""; document.forms[0].elements[2].value=""; } }, //Message when Ajax communication fails error: function() { alert('Failed to send email.'); } }); return false; }); }); </script> </head> <body> <form id="contactForm" name="contactForm" method="post" > <ul> <li><input type="text" id="namae" name="namae" placeholder="Name"></li> <li><input type="email" id="email" name="email" placeholder="E-mail" ></li> <li><textarea name="ask" id="ask" placeholder="Details of inquiry" ></textarea></li> </ul> <p class="more"><input id="send" type="submit" value="Send"></p> </form> </body> </html> |
php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<?php header("Content-type: text/plain; charset=UTF-8"); $sender_name = $_POST['namae']; $sender_mail_address = $_POST['email']; $contact_body = $_POST['ask']; //blank check $errorflag = 0; if ($sender_name == null) { $error_name = "Your name has not been entered."; $errorflag = 1; }else{$error_name = "";} if ($sender_mail_address == null) { $error_mail = "Email address not entered."; $errorflag = 1; }else{$error_mail = "";} if ($contact_body == null) { $error_ask = "Your inquiry has not been entered."; $errorflag = 1; }else{$error_ask = "";} if ($errorflag == 1) { if($error_name != ""){ echo $error_name."\n";} if($error_mail != ""){ echo $error_mail."\n";} if($error_ask != ""){ echo $error_ask."\n";} } else { //Here are the settings for sending email echo "Transmission complete."; } ?> |
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.
