Unable to print success message on the HTML page using Jquery Ajax
Question
I created aa contact form through which I'm going to post this data and return the success message. I'm able to successfully post the data but not able to display the success or failure message on the form.
Below is my code : Contact.php :
<?php
ini_set('display_errors','On');
error_reporting(E_ALL);
$name=$_POST['name'];
$phone=chop($_POST['element_4_1']);
$phone.=chop($_POST['element_4_2']);
$phone.=chop($_POST['element_4_3']);
$email=chop($_POST['email']);
$message1=chop($_POST['input4']);
if ($name && $phone && $email) {
$headers = "MIME-Version: 1.0\r\n";
$headers .= "Content-type: text/plain; charset=iso-8859-1\r\n";
$headers .= "From: sales@test.in \n";
$recipient= "test@test.in";
$subject="Online Enquiry ";
$message.="\nName : $name\n";
$message.="\nPhone : $phone\n";
$message.="\nEmail ID : $email\n";
$message.="\nMessage : $message1\n";
//send auto-reply
$subject_reply="Thank you for contacting Rugs of India";
$message_reply="Thank you for contacting us. We will get back to you shortly.";
mail($email, $subject_reply, $message_reply, $headers);
//Send Mail
//===========
if(mail($recipient, $subject, $message, $headers)) {
echo $message_reply;
} else {
echo "There was an error. Please try again.";
}
}
?>
Contactus.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="css/coder.css"/>
<style type="text/css">
.bg-color{
background-color:#F9F1E4;
border-radius:5px;
margin:5px;
}
.row_color{
border:2px solid #A40F17;
margin:0px;
}
.footer_class{
background-color:#A40F17;
height:40px;
}
.font_color{
color:#fff;
margin-top:5px;
}
.navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:hover, .navbar-inverse .navbar-nav > .active > a:focus {
background-color: #A40F17;
color: #FFFFFF;
}
.h_color{
background-color:#FFFFFF;
}
.danger{
color:#A40F17;
}
.h_top{
margin-top:30px;
}
.h_height{
height:173px;
}
input.text:focus {
border-color: #66afe9 !important;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
}
input.text:required {
box-shadow: none; /* Firefox (tested v6) adds red shadow by default */
}
</style>
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.3.2.min.js">
</script>
<script>
$(document).ready(function(){
console.log( "ready!" );
$("#button").click(function(){
console.log("ready2");
$.ajax({
url: './contact.php',
type: "POST",
data: {
"name": $("#name").val(),
"element_4_1": $("#element_4_1").val(),
"element_4_2": $("#element_4_2").val(),
"element_4_3": $("#element_4_3").val(),
"email": $("#email").val(),
"input4": $("#input4").val(),
},
success: function(data){
$("#stage").text(data);
}
});
});
});
</script>
</head>
<body>
<header>
<div class="row h_color h_height">
<div class="container">
</div>
<nav class="navbar navbar-inverse">
<div class="container">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navHeader">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse navHeader">
<ul class="nav navbar-nav navbar-right">
<li><a href="index.html">Home</a></li>
<li><a href="aboutus.html">About Us</a></li>
<li><a href="products.html">Products</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li class="active"><a href="contactus.html">Contact Us</a></li>
</ul>
</div>
</div>
</nav>
</header>
<div class="container" style="background-color:#fff;">
<div class="row">
<div class="col-lg-12">
<div id="stage">
</div>
<h3>Contact Us</h3>
<div class="col-lg-7 well">
<form class="contact-form">
<h4 style="padding-top:8px;">Your email address will not be published. Required fields are marked <font color="red">*</font></h4>
<label>Name<font color="red">*</font></label><br>
<input class="form-control" style="height:35px;width:230px;border-radius:4px;" required type="text" name="name" id="name"/><br>
<label>Phone<font color="red">*</font></label><br>
<span>
<input id="element_4_1" name="element_4_1" class="element text" size="3" maxlength="3" value="" type="text"> -
</span>
<span>
<input id="element_4_2" name="element_4_2" class="element text" size="4" maxlength="4" value="" type="text"> -
</span>
<span>
<input id="element_4_3" name="element_4_3" class="element text" size="10" maxlength="10" value="" type="text" required >
</span>
<br><br>
<label>Email<font color="red">*</font></label><br>
<input id="email" class="form-control" style="height:35px;width:230px;border-radius:4px;" required type="email" name="text"/><br>
<label for="input4">Message</label>
<textarea name="contact_message" class="form-control" rows="4" id="input4"></textarea>
<p> </p>
<button type="submit" style="margin-left:65px;"class="btn btn-large btn-info" id="button">Submit</button>
</form>
</div>
</div>
</div>
</div>
<footer>
<div class="row footer_class">
<div class="container">
</div>
</div>
</footer>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>
When I submit the form, the page gets refreshed without showing the success message.How can I correct this.
2 answers
solution1
1 2014-02-07 02:12:53
Looks like you're setting your AJAX success callback to $("#stage").text(data); but you have no DIV with the ID stage. Add
<div id="stage"></div>
where you want the message to appear.
solution2
0 2014-02-07 03:23:36
There was a small mistake in your code. I did the rectification...
<?php
ini_set('display_errors','On');
error_reporting(E_ALL);
$name=$_POST['name'];
$phone=chop($_POST['element_4_1']);
$phone.=chop($_POST['element_4_2']);
$phone.=chop($_POST['element_4_3']);
$email=chop($_POST['email']);
$message1=chop($_POST['input4']);
if ($name && $phone && $email) {
$headers = "MIME-Version: 1.0\r\n";
$headers .= "Content-type: text/plain; charset=iso-8859-1\r\n";
$headers .= "From: sales@test.in \n";
$recipient= "test@test.in";
$subject="Online Enquiry ";
$message ="\nName : $name\n";
$message.="\nPhone : $phone\n";
$message.="\nEmail ID : $email\n";
$message.="\nMessage : $message1\n";
//send auto-reply
$subject_reply="Thank you for contacting Rugs of India";
$message_reply="Thank you for contacting us. We will get back to you shortly.";
mail($email, $subject_reply, $message_reply, $headers);
//Send Mail
//===========
if(mail($recipient, $subject, $message, $headers)) {
echo $message_reply;
} else {
echo "There was an error. Please try again.";
}
}
?>
error was in the $message variable. It was not defined.
and one more thing your form click executes breaking your validation. It is not validating your form. Please make your validation correct. You can replace the above code.
Made some changes in your script...
<script>
$(document).ready(function(){
console.log( "ready!" );
$("#button").click(function(e){
e.preventDefault();
console.log("ready2");
$.ajax({
url: './contact.php',
type: "POST",
data: {
"name": $("#name").val(),
"element_4_1": $("#element_4_1").val(),
"element_4_2": $("#element_4_2").val(),
"element_4_3": $("#element_4_3").val(),
"email": $("#email").val(),
"input4": $("#input4").val(),
},
success: function(data){
$("#stage").text(data);
}
});
});
});
</script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How to print success message in the client page from the server side using Jquery Ajax
How do I print my postman returned JSON array on my html using jQuery Ajax success?
Unable to print JSON response in HTML page AJAX
unable to show success message after submitting a form using ajax
Jquery Ajax form no success message
JQuery AJAX Always Success message -
struts2 file upload success message on same page using ajax
jQuery Ajax = success return page
using $.each jquery to create html select option in ajax success
Ajax / JQuery - Displaying flash message on success
Related Tags