How to run php script while adding text to same html page? - php

Question

So basically, I want to have someone complete a form, run a php script, and instead of pulling up the php file's web page, I want to append text at the end of the form.
Currently, I have a form:
<form action="scripts/email.php" method="POST">
<p>Name: <input type="text" name="name" placeholder="Name"></p>
<p>Email: <input type="text" name="email" placeholder="Email"></p>
<p>Subject: <input type="text" name="subject" placeholder="Subject"></p>
<p>Message: </p>
<p><textarea name="message"></textarea></p>
which looks like this:
When 'Submit' is clicked, it leads to my PHP script:
<?php
$from = $_POST['email'];
$to = "comp#c0mp.org";
$subject = $_POST['subject'];
$name = $_POST['name'];
$message = $_POST['message'];
mail($to, $subject, "Name: " . $name . "\nMessage: " . $message, "From:" . $from);
print "Your message has been sent!";
?>
which leads to a blank web page that just says this in plain text:
"Your message has been sent!"
Basically, what I want is text added onto the submit form after the script is ran, such as:
http://i.stack.imgur.com/zha4d.png
How can I achieve running a PHP script on a web page, and instead of loading a new web page of the PHP script's path, but append text on the current HTML web page?

Answer 1

TRY THIS : WRITE THIS CODE INTO A SINGLE PAGE.
<form action="<?php $PHP_SELF ;?>" method="POST">
<p>Name: <input type="text" name="name" placeholder="Name"></p>
<p>Email: <input type="text" name="email" placeholder="Email"></p>
<p>Subject: <input type="text" name="subject" placeholder="Subject"></p>
<p>Message: </p>
<p><textarea name="message"></textarea></p>
<input type="submit" name="submit" value="Submit">
</form>
<?php
if (isset($_POST['submit'] ))
{
$from = $_POST['email'];
$to = "comp#c0mp.org";
$subject = $_POST['subject'];
$name = $_POST['name'];
$message = $_POST['message'];
mail($to, $subject, "Name: " . $name . "\nMessage: " . $message, "From:" . $from);
echo "Your message has been sent";
}
?>

Answer 2

you can use ajax for acheive more secure and fast execution of script.
HTML code:
<form method="POST">
<p>Name: <input type="text" id="name" name="name" placeholder="Name"></p>
<p>Email: <input type="text" id="email" name="email" placeholder="Email"></p>
<p>Subject: <input type="text" id="subject" name="subject" placeholder="Subject"></p>
<p>Message: </p>
<p><textarea id="area" name="message"></textarea></p>
<input type="submit" name="submit" value="Submit" onclick="mail_js();">
</form>
<div id="success_msg" style="display:none;"></div>
Just give proper style to this div.
JS code:
function mail_js()
{
var input_val=$('#name').val();
var email_val=$('#email').val();
var subject_val=$('#subject').val();
var message_val=$('#area').val();
jQuery.ajax({
type: 'post',
data:{
'input_val':input_val,
'email_val':email_val,
'subject_val':subject_val,
'message_val':message_val
},
url: 'email.php',
success:function(response){
$("#success_msg").append(response).show();
},
error: function(errorThrown){
alert('error');
console.log(errorThrown);
}
});
}
PHP script:
$from = $_POST['email_val'];
$to = "comp#c0mp.org";
$subject = $_POST['subject_val'];
$name = $_POST['input_val'];
$message = $_POST['message_val'];
mail($to, $subject, "Name: " . $name . "\nMessage: " . $message, "From:" . $from);
echo "Your message has been sent";