Validation does not work with PHP - php

I am having problem to see the problem with a pre-scripted template.
There are 3 files as follows,
/contact.php
/forms/contact.php
/js/forms.js
So when a visitor fills up the contact.php in root directory it redirects to /forms/contact.php and forms.js checks the form and if there is no problem sends an email.
Here is my /contact.php which includes the form,
<form id="contactform" method="post" action="forms/contact.php">
<div class="divide10"></div>
<input id="name" name="name" value="Your Name" type="text" class="prepared-input">
<div class="divide15"></div>
<input id="email" name="email" value="Your Email" type="text" class="prepared-input">
<div class="divide15"></div>
<textarea id="contactmessage" name="message" rows="3" class="prepared-input">Your Message</textarea>
<div class="divide15"></div>
<input type="submit" id="From_Comment_Go" value="Send Message " class="btn maincolor small">
<span class="errormessage hiddenatstart">Error! Please correct marked fields.</span>
<span class="successmessage hiddenatstart">Message send successfully!</span>
<span class="sendingmessage hiddenatstart">Sending...</span>
</form>
Here is my /forms/contact.php
<?php
$to = 'example#mail.com';
//Language Options
$contact_labelmailhead = 'Contact Form Email';
$contact_labelmailsubject = 'Contact Form Email from';
$contact_labelname = 'Name';
$contact_labelemail = 'Email';
$contact_labelmessage = 'Message';
$name = trim($_POST['name']);
$email = trim($_POST['email']);
$message = str_replace(chr(10), "<br>", $_POST['message']);
$body = "<html><head><title>$contact_labelmailhead</title></head><body><br>";
$body .= "$contact_labelname: <b>" . $name . "</b><br>";
$body .= "$contact_labelemail <b>" . $email . "</b><br>";
$body .= "$contact_labelmessage:<br><hr><br><b>" . $message . "</b><br>";
$body .= "<br></body></html>";
$subject = $contact_labelmailsubject.' ' . $name;
$header = "From: $email\n" . "MIME-Version: 1.0\n" . "Content-type: text/html; charset=utf-8\n";
mail($to, $subject, $body, $header);
?>
and lastly forms.js is here,
jQuery(document).ready(function() {
/* Contact Form */
if(jQuery('#contactform').length != 0){
addForm('#contactform');
}
/* Quick Contact */
if(jQuery('#quickcontact').length != 0){
addForm('#quickcontact');
}
/* Blog Comments */
if(jQuery('#replyform').length != 0){
addForm('#replyform');
}
});
function addForm(formtype) {
var formid = jQuery(formtype);
var emailsend = false;
formid.find("input[type=submit]").click(sendemail);
function validator() {
var emailcheck = /^([\w-]+(?:\.[\w-]+)*)#((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
var othercheck = /.{4}/;
var noerror = true;
formid.find(".requiredfield").each(function () {
var fieldname = jQuery(this).attr('name');
var value = jQuery(this).val();
if(value == "Name *" || value == "Email *" || value == "Message *"){
value = "";
}
if(fieldname == "email"){
if (!emailcheck.test(value)) {
jQuery(this).addClass("formerror");
noerror = false;
} else {
jQuery(this).removeClass("formerror");
}
}else{
if (!othercheck.test(value)) {
jQuery(this).addClass("formerror");
noerror = false;
} else {
jQuery(this).removeClass("formerror");
}
}
})
if(!noerror){
formid.find(".errormessage").fadeIn();
}
return noerror;
}
function resetform() {
formid.find("input").each(function () {
if(!jQuery(this).hasClass("button")) jQuery(this).val("");
})
formid.find("textarea").val("");
emailsend = false;
}
function sendemail() {
formid.find(".successmessage").hide();
var phpfile = "";
if(formtype=="#contactform"){
phpfile = "forms/contact.php";
}else if(formtype.lastIndexOf("c_")){
phpfile = "forms/quickcontact.php";
}else{
phpfile = "";
}
if (validator()) {
if(!emailsend){
emailsend = true;
formid.find(".errormessage").hide();
formid.find(".sendingmessage").show();
jQuery.post(phpfile, formid.serialize(), function() {
formid.find(".sendingmessage").hide();
formid.find(".successmessage").fadeIn();
if(!formtype.lastIndexOf("c_"))resetform();
});
}
}
return false
}
}
So, leaving the form sends Values :S and does not check anything. Shall I try to fix this or try to implement something else? I am not that into jQuery and cannot say if there is something wrong with validation script.
Some advice would be great!
Thank you!

There are errors on .js syntax, this could stop some js code from being called. First of all, fix these errors in js like this:
formid.find("input").each(function ()
{
if(!jQuery(this).hasClass("button")) jQuery(this).val("");
})//this is missing a ;
After that you can think properly on post method like Kevin Schmid said..

The validator function check each input with ".requiredfield" class.
Sample Code :
formid.find(".requiredfield").each(function () {

Related

PHP Multiple Validations

I'm trying to make $name, $email, and $message validate in one script without making them all look like a error (make them all a red color) rather than the one that is actually incorrect.
Her is the code I'm using:
PHP:
<?php
$name = $_POST['name'];
$email = $_POST['email'];
$phone = $_POST['phone'];
$visitors_site = $_POST['site'];
$message = $_POST['message'];
$email_from = 'mattmowen1#gmail.com';
$email_subject = 'New Contact Submission';
$to = 'matt.owen#example.com';
$headers = "From:" . $email;
$headers = "Contact Submission From: " . $email;
$message1 = "Name: " . $name;
$message2 = "\n\nEmail: " . $email;
$message3 = "\n\nPhone: " . $phone;
$message4 = "\n\nTheir Site: " . $visitors_site;
$message5 = "\n\nMessage: " . $message;
$email_body = $message1 . $message2 . $message3 . $message4 . $message5;
if (!filter_var($email, FILTER_VALIDATE_EMAIL) === false) {
mail($to, $email_subject, $email_body,$headers);
exit(json_encode(array('error' => 0)));
} else {
exit(json_encode(array('error' => 1)));
}
if ($name == "") {
exit(json_encode(array('error' => 1)));
} else {
mail($to, $email_subject, $email_body,$headers);
exit(json_encode(array('error' => 0)));
}
?>
AJAX Script:
var sendEmail = function(){
var url = 'main.php';
$.ajax({
url : url,
type : "POST",
dataType : "JSON",
data : $('#contact-form').serialize(),
success : function(response) {
if (response.error == 0) {
$('#contact-form')[0].reset();
alert('Form submitted successfully. We will contact you asap.');
} else {
$('#email-input').css('color', 'red');
alert('ERROR MESSAGE');
}
}
})
return false;
}
HTML:
<div id="contact">
<div class="container">
<form id="contact-form" method="post" onsubmit="return sendEmail()">
<h1>Contact Form</h1>
<fieldset>
<input placeholder="Your Name" type="text" name="name" id="name-input" required value="<?php echo isset($_POST['name']) ? $_POST['name'] : ''; ?>">
</fieldset>
<fieldset>
<input placeholder="Your Email Address" type="email" name="email" id="email-input" required value="<?php echo isset($_POST['email']) ? $_POST['email'] : ''; ?>">
</fieldset>
<fieldset>
<input placeholder="Your Phone Number (optional)" type="tel" name="phone" required>
</fieldset>
<fieldset>
<input placeholder="Your Web Site (optional)" type="url" name="site" required>
</fieldset>
<fieldset>
<textarea placeholder="Type your message here...." name="message" required value="<?php echo isset($_POST['email']) ? $_POST['email'] : ''; ?>"></textarea>
</fieldset>
<fieldset>
<button type="submit" id="contact-submit" name="submit">Submit</button>
</fieldset>
</form>
</div>
</div>
Just send back a list of bad elements, instead of a blanket error statement
<?php
// ...
$errors = [];
if (!filter_var($email, FILTER_VALIDATE_EMAIL) === false) {
$errors[] = "email";
}
if ($name == "") {
$errors[] = "name";
}
if ($message == "") {
$errors[] = "message";
}
if (count($errors) === 0) {
mail($to, $email_subject, $email_body,$headers);
}
echo json_encode($errors);
//...
Then in your JS:
success : function(response) {
if (response.length == 0) {
$('#contact-form')[0].reset();
alert('Form submitted successfully. We will contact you asap.');
} else {
for (var i = 0; i < response.length; i++) {
$('#' + response[i] + '-input').css('color', 'red');
alert('ERROR MESSAGE');
}
}
}
My Javascript is a bit rusty but that should do the trick.
Note that <textarea> doesn't have a value attribute, contents are added as a child text node. You should also use htmlspecialchars() on all output from PHP to prevent XSS problems.
in your js:
$erro = 0;
if(document.getElementById("name-input").value == null or document.getElementById("name-input").value == ""){
$erro = 1;
document.getElementById("name-input").style.borderColor = "red";
}
if(document.getElementById("email-input").value == null or document.getElementById("email-input").value == ""){
$erro = 1;
document.getElementById("email-input").style.borderColor = "red";
}
...
if($erro == 0){
//run ajax
}
You can put a bit more html code to make a hidden textbox appear using.
if(document.getElementById("email-input").value == null or document.getElementById("email-input").value == ""){
$erro = 1;
document.getElementById("email-input").style.borderColor = "red";
document.getElementById("id_erro1").style.visibility = "visible";
}
create in your html:
<fieldset>
<input placeholder="Your Email Address" type="email" name="email" id="email-input" required value="<?php echo isset($_POST['email']) ? $_POST['email'] : ''; ?>">
<input type="hidden" name="error_mensage1" id="id_erro1" value="Required field" >
</fieldset>
Use css to Spice up.

HTML Contactform Security

I'm trying to send an E-Mail via HTML-Contactform.
Therefore I created this html:
<form id="contact_form" action="sendMail.php" method="post">
<input id="firstname" name="firstname" type="text" placeholder="Vorname" value="Firstname">
<input id="lastname" name="lastname" type="text" placeholder="Nachname" value="Lastname">
<input id="mail" name="mail" type="text" placeholder="E-Mail" value="firstname.lastname#web.de">
<textarea id="msg" name="msg" placeholder="Ihre Nachricht..." >Hallo</textarea>
<p id="error_print" class="hidden"></p>
<input id="contact_submit" type="submit" title="Senden">
</form>
I am checking the inputs via jQuery and sending it via Ajax to the PHP-File and print my errors to html.
$('#contact_submit').click(function(){
var that = $('#contact_form');
var first_name = $('#firstname').val();
var last_name = $('#lastname').val();
var mail = $('#mail').val();
var msg = $('msg').val();
if(first_name == "" || last_name == "" || mail == "" || msg == "")
{
$('#error_print').removeClass("hidden");
$('#error_print').text("Bitte füllen Sie alle Felder aus");
}
else
{
if( !isValidEmailAddress(mail) )
{
$('#error_print').removeClass("hidden");
$('#error_print').text("Keine korrekte Mail");
}
else
{
if( !$('#error_print').hasClass( "hidden" ) )
{
$('#error_print').addClass("hidden");
}
var url = that.attr('action'),
method = that.attr('method'),
data = {};
that.find('[name]').each(function(index, value)
{
var name = $(this).attr('name')
value = $(this).val();
data[name] = value;
});
//console.log(data);
$.ajax({
url: url,
type: method,
data: data,
success: function(response)
{
$('#error_print').removeClass("hidden");
$('#error_print').text("Mail wurde versendet");
},
error: function(error)
{
$('#error_print').removeClass("hidden");
$('#error_print').text("Fehler - Bitte erneut versuchen");
}
});
}
}
return false;
});
In my PHP I am sending the mail like this:
<?php
if(isset($_POST['firstname'], $_POST['lastname'], $_POST['mail'], $_POST['msg']))
{
$mail = htmlentities($_POST['mail'], ENT_QUOTES);
$firstname = htmlentities($_POST['firstname'], ENT_QUOTES);
$lastname = htmlentities($_POST['lastname'], ENT_QUOTES);
$msg = htmlentities($_POST['msg'], ENT_QUOTES);
$empfaenger = "empf#mydomain.de";
$betreff = "Kontaktaufname";
$from = "From: $fistname $lastname <$mail>";
$text = $msg;
//print_r($_POST);
mail($empfaenger, $betreff, $text, $from)
}?>
I do not know if this is the best way to do it. For that I read a lo about injection in mails. But I am not sure if my script is safe enough.
to send the mail you can try this below
<?php
ini_set("SMTP", "smtp.your_internet_service_provider.com");
ini_set("smtp_port", 25 );
ini_set("sendmail_from", "your_mail#example.com");
ini_set("auth_username", "your_mail#example.com");
ini_set("auth_password", "pwd_of_your_mail");
// For the fields $sender / $copy / $receiver, comma separated if there are multiple addresses
$sender = 'your_mail#example.com';
$receiver = 'receiver_mail#example.com';
$object = 'test msg';
$headers = 'MIME-Version: 1.0' . "\n"; // Version MIME
$headers .= 'Content-type: text/html; charset=ISO-8859-1'."\n"; // the Content-type head for the HTML format
$headers .= 'Reply-To: '.$sender."\n"; // Mail reply
$headers .= 'From: "name_of_sender"<'.$sender.'>'."\n";
$headers .= 'Delivered-to: '.$receiver."\n";
$message = 'Hello from Aotoki !';
if (mail($receiver, $object, $message, $headers)) // Send message
{
echo 'Your message has been sent ';
}
else // error
{
echo "Your message could not be sent";
}
?>

PHP mail() sends 2 copies

I have this problem with my contact form. When I submit the form I receive 2 identical emails in my box.
Im using JS to check the form for errors and then simple PHP mail() function to send the email.
Here is the PHP code:
<?php
$from = Trim(stripslashes($_POST['email']));
$to = "myemail#gmail.com";
$subject = "Contact Form";
$name = Trim(stripslashes($_POST['name']));
$email = Trim(stripslashes($_POST['email']));
$number = Trim(stripslashes($_POST['number']));
$message = Trim(stripslashes($_POST['message']));
$body = "";
$body .= "Name: ";
$body .= $name;
$body .= "\n\n";
$body .= "E-mail: ";
$body .= $email;
$body .= "\n\n";
$body .= "Telephone Number: ";
$body .= $number;
$body .= "\n\n";
$body .= "Message: ";
$body .= $message;
$body .= "\n\n";
$success = mail($to, $subject, $body, "From: <$from>" . "\r\n" . "Reply-to: <$from>" . "\r\n" . "Content-type: text; charset=utf-8");
?>
And here is the JS:
$(".submit").click(function() {
var name = $("input[name=name]").val();
var email = $("input[name=email]").val();
var number = $("input[name=number]").val();
var message = $("textarea[name=message]").val();
if (defaults['name'] == name || name == "") {
$(".error").text("Please enter your name!");
return false;
} else if (defaults['email'] == email || email == "") {
$(".error").text("Please enter your email!");
return false;
} else if (defaults['number'] == number || number == "") {
$(".error").text("Please enter your number!");
return false;
} else if (defaults['message'] == message || message == "") {
$(".error").text("Plese enter your message!");
return false;
}
var dataString = 'name=' + name + '&email=' + email + '&number=' + number + '&message=' + message;
$(".error").text("Please wait...").hide().fadeIn("fast");
$.ajax({
type: "POST",
url: "contact.php",
data: dataString,
success: function() {
$('#form form').html("");
$('#form form').append("<div id='success'>Your message has been sent! Thank you</div>");
}
});
return false;
});
And here is the HTML form:
<form id="contact" method="post" action="#">
<label for="name">Name:</label>
<input type="text" name="name" required tabindex="1">
<label for="email">Email adress:</label>
<input type="text" name="email" required tabindex="2">
<label for="number">Tel. number:</label>
<input type="text" name="number" tabindex="3">
<label for="message">Your message:</label>
<textarea name="message" rows="10" cols="70" required tabindex="4"></textarea>
<input type="checkbox" id="terms" name="terms" value="terms">I agree to the terms
<input type="submit" name="submit" class="submit more-info" tabindex="5" value="Send">
<span class="error"></span>
</form>
I have been using the same code for all of my contact forms and it worked all right. Could it be hosting/server related issue?
replace your click event
$(".submit").click(function() {
with
$('.submit').unbind('click').click(function() {
code.
What I can assume your click event is binding two times may be due to a lot of the mess in the code
also use this line in the end of the click event function
$('.submit').unbind('click').click(function() {
// your stuff
event.stopImmediatePropagation(); // as long as not bubbling up the DOM is ok?
});
for reference have a look at the link: https://forum.jquery.com/topic/jquery-executes-twice-after-ajax
$(".submit").click(function(e) { ... }) POSTS to your server for the first time.
Because this is a <submit> button, the form will still submit. The form POSTS to your server for the second time.
The solution would be adding a e.preventDefault() at the bottom inside the $(".submit").click function...
$(".submit").click(function(e) {
// ^ add this e
var name = ...;
$.ajax({
...
});
e.preventDefault();
return false;
});
Try removing the jQuery animations:
$(".error").text("Please wait...").hide().fadeIn("fast");
They can sometimes cause problems.

How to make this php script send in ajax instead

i have a contact form and it sends just with php atm, i want to send it with ajax?
whats the easiest way?
<?php
//If the form is submitted
if(isset($_POST['submit'])) {
//Check to make sure that the name field is not empty
if(trim($_POST['contactname']) == '') {
$hasError = true;
} else {
$name = trim($_POST['contactname']);
}
//Check to make sure that the subject field is not empty
if(trim($_POST['subject']) == '') {
$hasError = true;
} else {
$subject = trim($_POST['subject']);
}
//Check to make sure sure that a valid email address is submitted
if(trim($_POST['email']) == '') {
$hasError = true;
} else if (!eregi("^[A-Z0-9._%-]+#[A-Z0-9._%-]+\.[A-Z]{2,4}$", trim($_POST['email']))) {
$hasError = true;
} else {
$email = trim($_POST['email']);
}
//Check to make sure comments were entered
if(trim($_POST['message']) == '') {
$hasError = true;
} else {
if(function_exists('stripslashes')) {
$comments = stripslashes(trim($_POST['message']));
} else {
$comments = trim($_POST['message']);
}
}
//If there is no error, send the email
if(!$hasError) {
$emailTo = '123#gmail.com'; // Put your own email address here
$body = "Name: $name \n\nEmail: $email \n\nSubject: $subject \n\nComments:\n $comments";
$headers = 'From: My Site <'.$emailTo.'>' . "\r\n" . 'Reply-To: ' . $email;
if(wp_mail($emailTo, $subject, $body, $headers)) {
$emailSent = true;
}else{
echo '<p class="alert-message error">Error sending mail.</p>';
}
}
}
?>
Please maybe give pointers on also improving the send function.
Any help really appreciated.
if you need to see the form let me know and i will edit and put it in
You can modify your code as follows.
Below is a stand-alone example (untested) of exactly what you requested.
Simply copy/paste the two code blocks into two files:
contacttest.php (or whatever you wish to call it)
yourphpprocessor.php (if change name, must also change it in AJAX code block)
Note that:
1. Each form element now has an ID attr
2. <form> functionality is no longer used at all, and is in fact prevented via e.preventDefault()
HTML: contacttest.php
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
<style>
</style>
<script type="text/javascript">
$(document).ready(function() {
//If you want the output from php side in a lightbox...
$('#alertmsg').dialog({
autoOpen: false,
modal: true,
width: 400,
buttons: {
Thanks: function() {
$(this).dialog('close');
}
}
});
$('#contactform').submit(function(e) {
e.preventDefault();
var frm = $('#cname').val();
var eml = $('#cemail').val();
var sub = $('#subj').val();
var msg = $('#msg').val();
//validation goes here, for eg.
if (frm == '' || eml==''){
alert('All fields must be completed');
return false;
}
$.ajax({
type: "POST",
url: "yourphpprocessor.php",
data: 'f=' +frm+ '&e=' +eml+ '&s=' +sub+ '&m=' +msg,
success: function(recd) {
$('#alertmsg').html(recd);
$('#alertmsg').dialog('open'); //Uses lightbox to display message
}
});
}); //END AJAX
}); //END $(document).ready()
</script>
</head>
<body>
<form id="contactform" action="" method="POST">
From: <input type="text" name="contactname" id="cname"><br />
Email: <input type="text" name="email" id="cemail"><br />
Subject: <input type="text" name="subject" id="subj"><br />
Message: <textarea name="message" id="msg"></textarea><br /><br />
<input type="submit" id="mysubmit" value="Submit">
</form>
<div id="alertmsg"></div>
</body>
</html>
PHP Side: yourphpprocessor.php
<?php
$name = $_POST['f'];
$email = $_POST['e'];
$subject = $_POST['s'];
$comments = $_POST['m'];
$emailTo = '123#gmail.com'; // Put your own email address here
$body = "Name: $name \n\nEmail: $email \n\nSubject: $subject \n\nComments:\n $comments";
$headers = 'From: My Site <'.$emailTo.'>' . "\r\n" . 'Reply-To: ' . $email;
if(wp_mail($emailTo, $subject, $body, $headers)) {
$emailSent = true;
}else{
echo '<p class="alert-message error">Error sending mail.</p>';
}
?>
You need to do this on the client side
Just use this plugin http://jquery.malsup.com/form/

Jquery PHP form submit - How to get form inputs to display?

I have a contact form > www.bgv.co.za/testspace/contact_3.php
it uses jquery validate and PHP. I have some add/ remove class bits to hide or reveal a Thank you title and some php if isset to echo back the successful form submission inputs.
My problem is that on submission you see the thank you page but the div> sadhu is not showing the data that the user input... infact its not displaying as a div - please help
Here is my Jquery:
$(document).ready(function(){
$('#contactform').validate({
showErrors: function(errorMap, errorList) {
//restore the normal look
$('#contactform div.xrequired').removeClass('xrequired').addClass('_required');
//stop if everything is ok
if (errorList.length == 0) return;
//Iterate over the errors
for(var i = 0;i < errorList.length; i++)
$(errorList[i].element).parent().removeClass('_required').addClass('xrequired');
},
submitHandler: function(form) {
$('h1.success_').removeClass('success_').addClass('success_form');
$("#content").empty();
$("#content").append('#sadhu');
$('#contactform').hide();
var usr = document.getElementById('contactname').value;
var eml = document.getElementById('email').value;
var msg = document.getElementById('message').value;
document.getElementById('out').innerHTML = usr + " " + eml + msg;
document.getElementById('out').style.display = "block";
form.submit();
}
});
});
Here is my PHP:
$subject = "Website Contact Form Enquiry";
//If the form is submitted
if(isset($_POST['submit'])) {
//Check to make sure that the name field is not empty
if(trim($_POST['contactname']) == '') {
$hasError = true;
} else {
$name = trim($_POST['contactname']);
}
//Check to make sure sure that a valid email address is submitted
if(trim($_POST['email']) == '') {
$hasError = true;
} else if (!eregi("^[A-Z0-9._%-]+#[A-Z0-9._%-]+\.[A-Z]{2,4}$", trim($_POST['email']))) {
$hasError = true;
} else {
$email = trim($_POST['email']);
}
//Check to make sure comments were entered
if(trim($_POST['message']) == '') {
$hasError = true;
} else {
if(function_exists('stripslashes')) {
$comments = stripslashes(trim($_POST['message']));
} else {
$comments = trim($_POST['message']);
}
}
//If there is no error, send the email
if(!isset($hasError)) {
$emailTo = 'info#bgv.co.za'; //Put your own email address here
$body = "Name: $name \n\nEmail: $email \n\nComments:\n $comments";
$headers = 'From: My Site <'.$emailTo.'>' . "\r\n" . 'Reply-To: ' . $email;
mail($emailTo, $subject, $body, $headers);
$emailSent = true;
}
}
And here is my FORM:
<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" id="contactform" >
<div class="_required"><p class="label_left">Name*</p><input type="text" size="50" name="contactname" id="contactname" value="" class="required" /></div><br/><br/>
<div class="_required"><p class="label_left">E-mail address*</p><input type="text" size="50" name="email" id="email" value="" class="required email" /></div><br/><br/>
<p class="label_left">Message</p><textarea rows="5" cols="50" name="message" id="message" class="required"></textarea><br/>
<input type="submit" value="submit" name="submit" id="submit" />
</form>
The <div id='sadhu'> is not defined anywhere. You're appending it to #content with Javascript code, but it doesn't exist.
$("#content").append('#sadhu');
You might want something like
$("#content").append("<div id='sadhu'>stuff in here...</div>");
You have placed the form entries into something with the id out. If that stuff should also be in <div id='sadhu'>, then you can just place the .html() of out into it:
document.getElementById('out').innerHTML = usr + " " + eml + msg;
document.getElementById('out').style.display = "block";
$("#content").append("<div id='sadhu'>" + $("#out").html() + "</div>");

Categories