How to pass PHP Variable To Javascript

Last updated on January 26th, 2022 at 07:36 am

Click to rate this tutorial!
[Total: 1 Average: 5]

In this tutorial we will learn more about passing values from server side language PHP to client side using Javascript.

It is pretty straight forward. We just have 2 files. I am taking an example of form submission here.

contact.html and send.php, in that you can see the values which we enter in contact.html will be send to the text fields of send.php. Basically it auto populates the next page input fields. That way from send.php file you can process those details in the backend using PHP and at the same time display it on a different form to continue execution.

Let us start with contact.html code. It is just a form with basic html ids .

<table width="400" border="0" align="center" cellpadding="3" cellspacing="1">
<tr>
<td><strong>Contact Form </strong></td>
</tr>
</table>
<table width="400" border="0" align="center" cellpadding="0" cellspacing="1">
<tr>
<td><form name="form1" method="post" action="send.php">
<table width="100%" border="0" cellspacing="1" cellpadding="3">
<tr>
<td width="16%">Subject</td>
<td width="2%">:</td>
<td width="82%"><input name="subject" type="text" id="subject" size="50"></td>
</tr>
<tr>
<td>Detail</td>
<td>:</td>
<td><textarea name="detail" cols="50" rows="4" id="detail"></textarea></td>
</tr>
<tr>
<td>Name</td>
<td>:</td>
<td><input name="name" type="text" id="name" size="50"></td>
</tr>
<tr>
<td>Email</td>
<td>:</td>
<td><input name="customer_mail" type="text" id="customer_mail" size="50"></td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td><input type="submit" name="Submit" value="Submit"> <input type="reset" name="Submit2" value="Reset"></td>
</tr>
</table>
</form>
</td>
</tr>
</table>

Next will be the send.php code that takes all the values from the contact form and auto populate all the fields .

<?php
//code by mistonline.in
$mail_from=$_POST['customer_mail'];
$subject=$_POST['subject'];
$detail=$_POST['detail'];
$name=$_POST['name'];

echo "Mail: <input id='mail' type='text' name='recipient' value='".$mail_from."'>";

echo "<br>Details: <input id='detail' type='text' name='recipient2' value='".$detail."'>";

echo "<br>Name: <input id='name' type='text' name='recipient3' value='".$name."'>";

echo "<br>Subject: <input id='subject' type='text' name='recipient4' value='".$subject."'>";

?>
<script language="javascript" type="text/javascript">

mail1 = document.getElementById('mail').value

name = document.getElementById('name').value

subject = document.getElementById('subject').value

detail = document.getElementById('detail').value

alert("The Mail You Entered Is" +mail1)
alert("The name You Entered Is" +name)
alert("The Subject You Entered Is"+ subject)
alert("The detail You Entered Is"+ detail)
//code by Mistonline.in
</script>

That is all. You are all set. Take a look at this Demo

Click to rate this tutorial!
[Total: 1 Average: 5]

Leave a Reply

Your email address will not be published.