-
Aug 11th, 2020, 03:45 PM
#1
Thread Starter
PowerPoster
[RESOLVED] Trying to display message in <form> without refreshing page?
Hi,
I have a contact form on my page that sends an email. I have a <label> tag that will contain a message, be it successful or an error in the form. The problem I'm having is that my script is a PHP script to send the mail. I want to be able to click "submit" and then have the message immediately appear in the form without refreshing the page. Not sure how to do that. Below is my HTML and PHP code:
Code:
<div id="p2" class="boxes">
<div id="contactMe" class="mainDiv">
<h1>Contact Form</h1>
<br>
<form id="contact-form" action="scripts/mail3.php" method="POST">
<label id="user-message"></label>
<br>
<label for="fullname">Full Name</label>
<br>
<input id="txtName" type="text" name="txtName">
<br>
<br>
<br>
<label for="email">E-Mail</label>
<br>
<input id="txtEmail" type="text" name="txtEmail">
<br>
<br>
<br>
<label for="message">Message</label>
<br>
<textarea id="txtMessage" rows="3" cols="50" name="txtMessage"></textarea>
<button id="mail-submit" type="submit" name="submit">Send E-Mail</button>
<p class="form-message"></p>
</form>
</div>
<div class="backToTop"><a href="#theTop">Back to Top</a></div>
</div>
Here is the PHP code:
Code:
<?php
session_start();
$message = $to = $from_email = "";
$to = "info@something.com";
if (empty($_POST["txtEmail"])) {
$emailErr = "Email is required";
}
else {
$from_email = $_POST["txtEmail"];
// check if e-mail address is well-formed
if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
$emailErr = "Invalid email format";
}
}
if (empty($_POST["txtMessage"])) {
$emailErr = "Message is required";
}
else {
$message = $_POST["txtMessage"];
}
$subject = "* * * Email Inquiry * * *";
// compose headers
$headers = "From: info@something.com\r\n";
$headers .= "Reply-To: info@something.com\r\n";
$headers .= "X-Mailer: PHP/".phpversion();
$message = wordwrap($message, 70);
// send email
if (mail($to, $subject, $message, $headers)) {
header('Location: http://www.something.com/#p2');
echo("<script>window.scrollTo({'behavior': 'auto','left': left,'top': top});;document.getElementById('user-message').innerHTML = 'Message Successfully Sent!';");
}
else {
echo("Message failure!");
}
?>
-
Aug 17th, 2020, 12:14 AM
#2
Member
Re: Trying to display message in <form> without refreshing page?
Hii,
You can do it through AJAX.
Code:
<script>
$(document).ready(function(){
$("#contact-form").on("submit", function(e){
e.preventDefault();
dataString = jQuery('form#contact-form').serialize();
jQuery.ajax({
type: "POST",
url: "full_path/wyslij.php",
data: dataString,
success: function(data)
{
alert('Form successfully submitted.')
},
error: function(data)
{
alert('Form not submitted.')
}
});
});
});
</script>
Also form action should be removed:
Code:
<form id="contact-form" method="POST">
I Hope it helpfull to you...
-
Aug 17th, 2020, 01:07 AM
#3
Thread Starter
PowerPoster
Re: Trying to display message in <form> without refreshing page?
Thanks brother....that's what I've been looking for!!!
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|