Last updated on January 10th, 2023 at 11:08 am
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> </td>
<td> </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
admin