This is not that easy for beginners actually. One way to do this is by using AJAX (a request made by JavaScript clientside to the server).
I have written an AJAX function a while back that handles the execution of the AJAX call with the desired parameters sent to the server. The request is received by a PHP file that will return data. This data can then be used by JavaScript in a callback function.
This following function runs an AJAX call using GET, allowing us to send parameters (object) to a file (string) and launch a callback (function) when the request has been ended.
function ajax(file, params, callback) {
var url = file + '?';
// loop through object and assemble the url
var notFirst = false;
for (var key in params) {
if (params.hasOwnProperty(key)) {
url += (notFirst ? '&' : '') + key + "=" + params[key];
}
notFirst = true;
}
// create a AJAX call with url as parameter
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
callback(xmlhttp.responseText);
}
};
xmlhttp.open('GET', url, true);
xmlhttp.send();
}
Here's how we use it in your case:
function sendData() {
parameters = {
name: document.querySelector('#contact_form_name').value,
email: document.querySelector('#contact_form_email').value,
subject: document.querySelector('#contact_form_subject').value,
message: document.querySelector('#contact_form_message').value
};
ajax('send.php', parameters, function(response) {
// add here the code to be executed when data comes back to client side
// e.g. console.log(response) will show the AJAX response in the console
});
}
Then in your file send.php you may put the following code to handle the url parameters sent by the AJAX call.
if (isset($_REQUEST['name'], $_REQUEST['email'], $_REQUEST['subject'], $_REQUEST['message'])) {
// they are set, you can use them by accessing $_REQUEST
// return the desired output with `echo` not `return`!
echo $_REQUEST['name'] . ', you have sent a message.';
}
Using the above process, you are not required to use a form in your HTML. You can simply have the input tags, and of course, a button to launch the function sendData(). Use the attribute onclick in the button's tag to specify the action to be executed when the button is clicked.
<!-- Contact Us Form -->
<div class="contact_form_container">
<input id="contact_form_name" class="input_field contact_form_name" type="text" name="name" placeholder="Name" required="required" data-error="Name is required.">
<input id="contact_form_email" class="input_field contact_form_email" type="email" name="email" placeholder="E-mail" required="required" data-error="Valid email is required.">
<input id="contact_form_subject" class="input_field contact_form_subject" type="text" name="subject" placeholder="Subject" required="required" data-error="Subject is required.">
<textarea id="contact_form_message" class="text_field contact_form_message" name="message" placeholder="Message" rows="4" required data-error="Please, write us a message."></textarea>
</div>
<div>
<button onclick="sendData()" id="contact_form_submit" type="submit" class="contact_submit_btn trans_300" value="Submit">
send<img src="images/arrow_right.svg" alt="">
</button>
</div>
Returning an object instead of a string:
You can even play around with PHP so that it returns an actual Javascript object in the callback instead of just a string. This can be very helpful if you would like to return various information back to client side.
You have to use the built-in json_encode() function to get the JSON representation of a PHP array. For example:
$array = array({
'name' => $_REQUEST['name'],
'subject' => $_REQUEST['subject']
});
echo json_encode($array);
Then in JavaScript inside the callback function use:
let obj = JSON.parse(response);
You have essentially converted the response into a Javascript object (not sure if it's a JSON object..., but it's JavaScript object, that is what matters). This means you can access obj's properties: for instance, obj.name will have the name of the user, obj.subject the subject of the message, etc...
Note: in this example, I have just returned the information that was sent to the server in the first place, but you can return whatever you wish. You could have a process in the PHP file to save the data to a database and return some other kind of information. The possibilities are countless with AJAX!
