How to Get the Sucess Message in the Same Page After Submitting the Contact Form

How to get the sucess message in the same page after submitting the contact form?

try this way . try to send mail from an ajax . Please write your code like below

javascript

    <script type="text/javascript">
function sendEnquiryform(){
var name=$('#name').val();
var email=$('#email').val();
var message=$('#message').val();
$.post("send_mail.php",'name='+name+'&email='+email'&message='+message,function(result,status,xhr) {
if( status.toLowerCase()=="error".toLowerCase() )
{ alert("An Error Occurred.."); }
else {
//alert(result);
$('#sucessMessage').html(result);
}
})
.fail(function(){ alert("something went wrong. Please try again") });
}
</script>

Your html

<form method="post" name="FrmEnquiry" id="FrmEnquiry" action="" onsubmit="sendEnquiryform();">
<input name="name" id="name" required="required" placeholder="Your Name">
<input name="email" id="email" type="email" required="required" placeholder="Your Email">

<div class="clearfix"> </div>
<textarea name="message" id="message" cols="20" rows="5" required="required" placeholder="Message"></textarea>
<div class="submit">
<input id="submit" name="submit" type="submit" value="Submit">
</div>
</form>

<span id="sucessMessage"> </span>

send_mail.php

<?php
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$from = 'From: agriindiaexp.com';
$to = 'shridhar.kagi@gmail.com';
$subject = 'Email Inquiry';

$body = "From: $name\n E-Mail: $email\n Message:\n $message";

if ($_POST['submit']) {
if (mail ($to, $subject, $body, $from)) {
$success = "Message successfully sent";
} else {
$success = "Message Sending Failed, try again";
}
}
?>

this will display your message in your page.Please try this. This is working fine in my case.

How to get the success message in the same page after submitting the form?

what happened to your code is when your try to run the form validation it get always true because you set a condition where not executing if the result is true or false.

if ($this->form_validation->run() == TRUE)  { //you should change it to this   
$this->registration_model->update_church();
$data['success'] = 1;
} else { //if the form validation run false it will display the error.
$data['error'] = validation_errors();
}
echo json_encode($data);

And if you are going to send back a message to your AJAX code you should encode it first using JSON.

To display it.. do this.

if (msg.success == 1) {
$('#status_msg').html('<div class="alert alert-success
text-center"> Success.</div>');
$('#registration_form')[0].reset(); //reset form fields
setTimeout(function(){
window.location.replace("<?php echo base_url('registration/payment') ?>");
}, 3000); //set it to your time

} else if(msg.error){
$('#status_msg').html('<div class="alert alert-danger
text-center">' + msg.error + '</div>').fadeIn( 'fast' ).delay(
30000 ).fadeOut( 'slow' );
}

Hope that helps.Let me know the result.

After submitting form its showing success message on different page

Your message is on the an another page because you use action="contact.php".
Try to remove that part of code.Also remove the portion with form

<input id="form_name" type="text" name="name" class="form-control" placeholder="Please enter your firstname *" required="required" data-error="Firstname is required.">
<button type="submit" class="btn btn-success btn-send btn-danger-gradiant mt-3 mb-3 text-white border-0 py-2 px-3" onclick="addYourFunctionhere()" value="Send message"><span> SUBMIT NOW <i class="fa fa-paper-plane"></i></span></button>
<script>
function addYourFunctionhere(){
var getform_name= $("#form_name").val()

//and here use ajax to send the var from top

$.ajax({
type: "POST",
url: url,
data: {"username":getform_name},
success: function (data) {
console.log(data);
}
});
}
</script>

Submitting form and success message on same page?

What you're describing is essentially what AJAX is. If you are using jquery you can use its $.ajax function on the button press and send the data via its data property. Based on your current PHP code it might look something like this:

 $.ajax({ url: '/route/to/php/function',
data: {name = nameVal,
email = emailVal,
subject = subjectVal,
message = messageVal},
type: 'post',
success: function(output) {
//do whatever after the POST is successful
}
});

You'd put the form clearing code and SweetAlert code in the same event listener for the submit button, either before or after the $.ajax call.

After submitting 'Contact' message, how do I get it to stay on page and generate a text confirmation?

Use Ajax to submit your form and by success show your message. Try this code:

$('form').submit(function(e){
e.preventDefault();
$.ajax({
type:'post',
url:'mail.php',
data:$(this).serialize(),
success:function(){
$('form')[0].reset(); // to reset the form
$('#contact').hide(); // to hide the Contact article
$('#message').show(); // to show the hidden message
}
})
})

Submit contact form with success/fail alert on same page

Thank all of you to help and direction to solve problem.

Fist of all, I changed that line without action="contact.php"

-- OLD STYLE ---

<form id="contact-form" method="post" action="contact.php" role="form" novalidate="true">

-- NEW STYLE ---

<form id="contact-form" method="post" role="form" novalidate="true">

The second one, at the of the body I had jquery-3.3.1.slim.min.js library but this library hasn't AJAX so that I changed it jquery-3.3.1.min.js

Now, everything work fine.



Related Topics



Leave a reply



Submit