Display message after php form submit INSIDE same page - javascript

on my INDEX.HTML page I have a subscription form that writes data to a DB with php. Everything works honky-dori.
When I submit the form the site goes to the PHP file I use to submit the emails to me and the visitor. I then can echo a thank you message. However...I dont want the message to appear inside this php page....I want the form to disappear and the message appear on my index page inside a a tag...e.g a DIV.
How do I do this? If I need to use AJAX or JQUERY...could you please point me to the right place?
Here are some of the code:
<div class="container-fluid">
<form action="thankyou.php" method="post">
<div class="form-group">
<label for="firstname">First Name:</label>
<input type="input" class="form-control" id="firstname" name="firstname">
<label for="lastname">Last Name:</label>
<input type="input" class="form-control" id="lastname" placeholder="" name="lastname">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="" name="email">
</div>
<button type="submit" class="btn btn-warning">Submit</button>
</form>
</div>
thankyou.php
<?php
require 'connection.php';
$conn = Connect();
$firstname = $conn->real_escape_string($_POST['firstname']);
$lastname = $conn->real_escape_string($_POST['lastname']);
$email = $conn->real_escape_string($_POST['email']);
$myemail = "myemailaddress";
$query = "INSERT into subscription (firstname,lastname,email) VALUES('" . $firstname . "','" . $lastname . "','" . $email . "')";
$success = $conn->query($query);
$subject1 = "New eBook Subscriber";
if (!$success) {
die("Couldn't enter data: ".$conn->error);
} else {
$headers = "MIME-Version: 1.0" . "\r\n";
$headers .= "Content-type:text/html;charset=UTF-8" . "\r\n";
$headers .= 'From: ' .$myemail. "\r\n";
$message = "some message";
$messageb = "some message";
mail($email, $subject, $messageb, $headers);
mail($myemail, $subject1, $message, $headers);
?><META HTTP-EQUIV="Refresh" CONTENT="1;URL=index.html">
<?php
$conn->close();
}
?>

Try this solution
<div class="container-fluid">
<form action="thankyou.php" method="post" id="form">
<div class="form-group">
<label for="firstname">First Name:</label>
<input type="input" class="form-control" id="firstname" name="firstname">
<label for="lastname">Last Name:</label>
<input type="input" class="form-control" id="lastname" placeholder="" name="lastname">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="" name="email">
</div>
<button type="submit" class="btn btn-warning">Submit</button>
</form>
</div>
<script>
$('#form').on('submit', function(event) {
event.preventDefault(); //stops form on submit
var formData = {};
$.each($("#form").serializeArray(), function (i, field) {
formData[field.name] = field.value;
});
$.ajax({
url: 'thankyou.php',
data: formData,
method:'POST',
success: function(response) {
$(this).hide(); //sets css display:none to form
var message = "Thank you!";
$('.container-fluid').html(message);
}
});
});
</script>

Set the redirect after the successfully email the data and set a session variable and print this session variable in the html page. this may solve your problem however you can also use ajax to send the data and solve this problem.

Related

$error messate POST into div in index.php

This is my first question on this site however I have been here millions of times looking for answer and I hope you can help me out this time as I wasn't able to figure it out myself.
I am not very skilled when it comes to coding but was hoping to amend the php contact form I have found online (it's free), the form itself is worki9ng but what I am struggling with is to set the errors to be printed on the main page where the form is, at them moment the yare displayed on the contact.php form which is where the php code is and I would like it all displayed in a div for example on index.php just under the form.
my contact.php
<?php
if (isset($_POST['submit'])) {}
$sendTo = "email address";
$subject = "msg content";
$headers = 'From: email address' . "\r\n";
$name = #$_POST['name'];
$email = #$_POST['email'];
$message = #$_POST['message'];
$okMessage = 'thank you';
$errorMessage = 'Please fill all the fields';
$url = 'https://www.google.com/recaptcha/api/siteverify';
$privatekey = "----------------------------------------";
$response = file_get_contents($url."?secret=".$privatekey."&response=".$_POST['g-recaptcha-response']."&remoteip=".$_SERVER['REMOTE_ADDR']);
$data = json_decode($response);
$emailText = "Name: $name \n Email: $email \n Message: $message";
if (isset($data->success) AND $data->success==true) {
mail($sendTo, $subject, $emailText, $headers);
$responseArray = $okMessage;
}
else
{
//verification failed
$responseArray = $errorMessage;
}
if (!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
$encoded = json_encode($responseArray);
header('Content-Type: application/json');
echo $encoded;
}
else {
echo $responseArray;
}
?>
<form method="post" name="contactform" action="contact.php" >
<div class="field half first">
<label for="name">name</label>
<input type="text" name="name" id="name" placeholder="name" />
</div>
<div class="field half">
<label for="email">Email</label>
<input type="text" name="email" id="email" placeholder="email#email.com" />
</div>
<div class="field">
<label for="message">message</label>
<textarea name="message" id="msg" rows="4" placeholder="type your message here"></textarea>
</div>
<div class="g-recaptcha" data-sitekey="----------------------------------"></div>
<ul class="actions">
<li><input type="submit" value="send" class="special" /></li>
<li><input type="reset" value="reset pola" /></li>
</ul>
I have tried to use $_POST and $_GET to echo responseArray but I can't figure it out...
Is anyone able to provide a code I would have to use to display $okMessage and $errorMessage on index.php please?
Many thanks for all help

How to show success message below html form after form submit which is being handled by different php file

There is a form in my index.php file. This form is handling from a different php file named send-mail.php. I want to show a message inside alert div in index.php file. Can this be done by php or javascript will be needed too?
index.php:
<section id="contact">
<form action="send-mail.php" id="form" method="post" name="form">
<input id="name" name="name" placeholder="your name" type="text" required>
<input id="email" name="email" placeholder="your e-mail" type="email" required>
<textarea cols="50" id="message" name="message" placeholder="your enquiry" rows="4" required></textarea>
<input type="submit" name="submit" id="submit" value="Send Message">
</form>
<div class="alert alert-dismissible fade in hide" role=alert>
<button type=button class=close data-dismiss=alert aria-label=Close><span aria-hidden=true>×</span></button>
</div>
</section>
send-mail.php:
<?php
if(isset($_POST['submit'])){
// Get the submitted form data
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
// Recipient email
$toEmail = 'user#example.com';
$emailSubject = 'Contact Request Submitted by '.$name;
$htmlContent = '<h2>Contact Request Submitted</h2>
<h4>Name</h4><p>'.$name.'</p>
<h4>Email</h4><p>'.$email.'</p>
<h4>Message</h4><p>'.$message.'</p>';
// Set content-type header for sending HTML email
$headers = "MIME-Version: 1.0" . "\r\n";
$headers .= "Content-type:text/html;charset=UTF-8" . "\r\n";
// Additional headers
$headers .= 'From: '.$name.'<'.$email.'>'. "\r\n";
// Send email
if(mail($toEmail,$emailSubject,$htmlContent,$headers)){
$statusMsg = 'Your contact request has been submitted successfully !';
$msgClass = 'alert-success';
header('location: index.php#contact');
}else{
$statusMsg = 'Your contact request submission failed, please try again.';
$msgClass = 'alert-danger';
header('location: index.php#contact');
}
}
?>
Change your redirects to:
header('location: index.php?result='.$msgClass.'#contact');
Then adding the following to your index.php file:
if ($_GET['result']=="alert-success") {
// display success message here
} elseif ($_GET['result']=="alert-danger") {
// display error message here
}

html and php form will not submit to email?

I've been trying to submit a form that is on my website but the form will not submit. I am not a php expert and I can not tell where my error is. The php file opens instead of sending to my two emails.
html
<form action="email.php" method="post" name="emailForm">
<div class="form-group">
<label for="Name"></label>
<input class="form-control name" placeholder="Name" id="Name" name="name">
</div>
<div class="form-group">
<label for="Email"></label>
<input class="form-control email" placeholder="Email" id="Email" name="email">
</div>
<div class="form-group">
<label for="Subject"></label>
<input class="form-control subject" placeholder="Subject" id="Subject" name="subject">
</div>
<div class="form-group">
<label for="Message"></label>
<textarea class="form-control Message" placeholder="Message" id="Message" name="message"></textarea>
</div>
<input type="submit" id="button" class="btn btn-default button_submit"></input>
</form>
and I have the php file in the main directory
and it contains
<?php
$name = $_POST['name'];
$visitor_email = $_POST['email'];
$subject = $_POST['subject'];
$message = $_POST['message'];
$email_from = "georgestcm#gmail.com";
$headers = "From: $email_from \r\n";
$headers .= "Reply-To: $visitor_email \r\n";
$email_subject = "New Form submission";
$to = "georgestcm#gmail.com, yahwehown#gmail.com";
$email_body = "You have received a new message from the user $name.\n"."Here is the message:\n $message".
mail($to,$email_subject,$email_body,$headers);
?>
and my form validation is in in jquery. That is why I have not done it in php, because I am not a php expert.
jquery
$(document).ready(function() {
var name = $('input.name');
var email = $('input.email').prop('disabled',true);
var subject = $('input.subject').prop('disabled',true);
var message = $('textarea.Message').prop('disabled',true);
var button = $('input#button').prop('disabled',true);
name.on('keyup',function() {
if($(this).val().length > 0) {
email.prop('disabled',false);
} else {
email.prop('disabled',true);
}
});
email.on('keyup',function() {
if($(this).val().length > 0 && $(this).val().includes('#') && $(this).val().includes('.com')) {
subject.prop('disabled', false);
message.prop('disabled',false);
} else {
subject.prop('disabled', true);
message.prop('disabled',true);
button.prop('disabled',true);
}
});
message.on('keyup',function() {
if($(this).val().length > 0){
button.prop('disabled',false);
}
})
button.on('click', function() {
name.val('');
email.val('');
subject.val('');
message.val('');
})
})
I want to send email to my two emails.

How do I force form submit with Jquery

Wish you all a happy 2015!
I have a simple contact us php form. I am validating it with parsley.js. The validation works fine but I am receiving a lot of spam mails.
I believe if I can force the form to be submitted only if Jquery is enabled, then it should solve my problem (right?).
I'm not an expert with PhP/ Jquery and any help will be appreciated.
Here is my PHP code
<?php
// Define Variables i.e. name tag, as per form and set to empty
$contact_name = $contact_email = $contact_phone = $contact_message = "";
// Sanitize data and use friendly names
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$name = test_input($_POST["contact_name"]);
$email = test_input($_POST["contact_email"]);
$phone = test_input($_POST["contact_phone"]);
$message = test_input($_POST["contact_message"]);
}
function test_input($data) {
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}
// Set values
$to = 'info#foryourservice.in';
$subject = 'New Message from Website';
$headers = 'From: info#domainname.com' . "\r\n" .
'Reply-To: info#domainname.com' . "\r\n" .
'X-Mailer: PHP/' . phpversion();
// Set Email content
$emailcontent = "A new message has been submitted from the website.
\n
Name : $name
Email : $email
Phone : $phone
Message : $message";
// Mail function
$send_contact=mail($to,$subject,$emailcontent,$headers);
if($send_contact){
header('Location: index.php#contactusform');
}
else {
echo "<script type='text/javascript'>alert('We encountered an ERROR! Please go back and try again.');</script>";
}
?>
Here is my HTML ( Im using Twitter Bootstrap)
<form role="form" method="POST" action="contactusform.php" id="contactusform" data-parsley-validate>
<div class="col-xs-6">
<div class="form-group" style="margin-bottom: -5px">
<label for="input1"></label>
<input type="text" name="contact_name" class="form-control" id="input1" placeholder="Name*" required data-parsley-required-message="Please enter your name">
</div>
<div class="form-group" style="margin-bottom: -5px">
<label for="input2"></label>
<input type="email" name="contact_email" class="form-control" id="input2" placeholder="Email Address*" data-parsley-trigger="change" required data-parsley-required-message="Please enter a valid Email address">
</div>
<div class="form-group" style="margin-bottom: -5px">
<label for="input3"></label>
<input type="tel" name="contact_phone" class="form-control" id="input3" placeholder="Phone Number*" required data-parsley-type="digits" data-parsley-minlength="10" data-parsley-maxlength="10" data-parsley-required-message="Please enter a 10 digit number">
</div>
<br>
<div class="form-group">
<button type="submit" id="contactbutton" class="btn btn-primary" style="background-color: #A8B645; border-color: transparent">Submit</button>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label for="input4"></label>
<textarea name="contact_message" class="form-control" rows="7" id="input4" placeholder="Message*" required required data-parsley-required-message="Say something!"></textarea>
</div>
</div>
</form>
This is what the Spam Email looks like :
A new message has been submitted from the website.
Name : お買い得アナスイ ミロード大壳り出しランキング
Email : rsilau#gmail.com
Phone : お買い得アナスイ ミロード大壳り出しランキング
Message : Shoppers takes the boast on bag
お買い得アナスイ ミロード大壳り出しランキング http://www.frkapaun.org/dyqfmnwg/ysl-annasuixmraAekm.asp
Add a hidden field to your form:
<input type="hidden" value="0" id="botcheck" name="botcheck" />
Then with jQuery set the value to 1:
$("#botcheck").val("1");
Then server-side check the value of $_POST["botcheck"].
You might want to check if your form is submitted using ajax:
if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
//Process form here
}
For further explanation

Double form will not submit second form

Hi I have two HTML forms when the one is submit a JavaScript function submits the second the one form works but the second doesn't I'm not sure if it is the forms or the post pages can any one help.
The one form sends an email this is sending the email correctly sending the correct data to the correct email address.
The second form is meant to upload a file it doesn't seem to be doing anything at all there are now errors displayed to the screen I have done a try catch and nothing is displayed i have also looked into the logs and nothing is displayed I'm
HTML
<div id="loginborder">
<form id ="upload" enctype="multipart/form-data" action="upload_logo.php" method="POST">
<input name="userfile" type="file" />
<input type="submit" onsubmit="alert()" value="dont press" disabled>
</form>
<div id="login">
<form method="post" action="<?php echo $_SERVER["PHP_SELF"];?>">
<input type="hidden" name="subject" value="Can you create me a Contributors account">
<input type="text" name="first_name" id="first_name" placeholder="Name">
<input type="text" name="company" id="company" placeholder="Company Name">
<input type="checkbox" id="tc" onclick= "checkbox()">
<input type="submit" id="submit" onsubmit="alert()" name="submit" value="Register" disabled>
</form>
</div>
</div>
<?php
}
else
// the user has submitted the form
{
// Check if the "subject" input field is filled out
if (isset($_POST["subject"]))
{
sleep(5);
$subject = $_POST["subject"];
$first = $_POST["first_name"];
$company = $_POST["company"];
$therest = "First name= $first" . "\r\n" . "Company= $company" . "\r\n";
}
echo "$therest <br>";
$first = wordwrap($first, 70);
mail("careersintheclassroom01#gmail.com",$subject,$name,$therest,"subject: $subject\n");
echo "Thank you for sending us feedback";
header( "refresh:5;url=index.php" );
}
?>
</body>
</html>
javascript
<script type="text/javascript">
function alert()
{
document.getElementById("upload").submit();
}
function checkbox(){
if (document.getElementById("tc").checked == true)
document.getElementById("submit").disabled = false;
else
document.getElementById("submit").disabled = true;
}
$('input[placeholder],input[placeholder],input[placeholder],input[placeholder],input[placeholder]').placeholder();
</script>
Upload_Logo.php
<html>
<head>
</head>
</html>
<?php
$uploaddir = "./images/";
echo $uploaddir;
mkdir($uploaddir, true);
$uploadfile = $uploaddir . basename($_FILES['userfile']['name']);
echo "<br />";
echo " <b>Your media has been uploaded</b><br /><br /> ";
?>
the <?php echo $_SERVER["PHP_SELF"];?> on the second form calls the php at the bottom of the page this is the one that is working it is the upload_logo.php that is not currently working any help would be much appreciated
You're trying to submit 2 forms at once. That can't work, as your browser can only be directed to 1 page at a time, so your attempt to submit the upload form with JavaScript is cancelled by the contact form being submitted. I'd suggest that you move the file input into the same form as the contact fields, and handle them both in your "the user has submitted the form" section.
Something like this should do the trick:
<?php
if (!isset($_POST["submit"]))
{
?>
<div id="loginborder">
<div id="login">
<form enctype="multipart/form-data" method="POST">
<input name="userfile" type="file" />
<input type="hidden" name="subject" value="Can you create me a Contributors account">
<input type="text" name="first_name" id="first_name" placeholder="Name">
<input type="text" name="company" id="company" placeholder="Company Name">
<input type="checkbox" id="tc" onclick="checkbox()">
<input type="submit" id="submit" name="submit" value="Register" disabled>
</form>
</div>
</div>
<?php
}
else
// the user has submitted the form
{
// Check if the "subject" input field is filled out
if (!empty($_POST["subject"]))
{
sleep(5);
$subject = $_POST["subject"];
$first = $_POST["first_name"];
$company = $_POST["company"];
$therest = "First name= $first" . "\r\n" . "Company= $company" . "\r\n";
echo "$therest <br>";
$first = wordwrap($first, 70);
mail("careersintheclassroom01#gmail.com",$subject,$name,$therest,"subject: $subject\n");
echo "Thank you for sending us feedback";
header( "refresh:5;url=index.php" );
}
if (isset($_FILES['userfile']['name'])) {
$uploaddir = "./images/";
if (!file_exists($uploaddir)) {
mkdir($uploaddir, true);
}
$uploadfile = $uploaddir . basename($_FILES['userfile']['name']);
move_uploaded_file($_FILES['userfile']['tmp_name'], $uploadfile);
echo "<br />";
echo " <b>Your media has been uploaded</b><br /><br /> ";
}
}
?>
</body>
try this after $uploadfile = ...
move_uploaded_file($_FILES['userfile']['tmp_name'], $uploadfile);
when you submit 2nd form e-mail would be generated becausue it triggers if(isset($_POST["subject"])) condition and the code will follow the next commands.
But when you submit 1st form, it will call onsubmit="alert(); function and that function again submits the same form because of these.
function alert()
{
document.getElementById("upload").submit();
}
so you are just triggering a never ending loop.
My solution is
<script type="text/javascript">
function alert()
{
function checkbox(){
if (document.getElementById("tc").checked == true)
document.getElementById("submit").disabled = false;
else
document.getElementById("submit").disabled = true;
}
}
$('input[placeholder],input[placeholder],input[placeholder],input[placeholder],input[placeholder]').placeholder();
</script>
I'am not 100% sure about your requirement. hope you can get the point what i'am making. gl!

Categories