The code below is the code for my form on my webpage, then test.php. The issue is there is no recaptcha var being sent in the $_POST. I have ensured the tag for the recaptcha is with in the form tag, the call to googles .js is in the head. I cannot find the reason my form is not sending the var.
<head>
<script src='https://www.google.com/recaptcha/api.js'></script>
</head>
<div id="contact" class="form-contain">
<fieldset>
<div id="message"></div>
<form method="post" action="js/test.php" name="contactform" id="contactform">
<div class="form-group">
<input name="name" id="name" type="text" value="" placeholder="Name" class="form-control" />
</div>
<div class="form-group">
<input name="email" id="email" type="text" value="" placeholder="Email" class="form-control" />
</div>
<div class="form-group">
<input name="phone" id="phone" type="text" value="" placeholder="Phone" class="form-control" />
</div>
<div class="g-recaptcha" data-sitekey="6LcMRQ0UAAAAACB1GVYh0oIQezzFcNmpsy0a7Sqx"></div>
<div class="form-group">
<button class="btn btn-primary" type="submit" id="cf-submit" name="submit">Send</button>
</div>
</form>
</fieldset>
</div>
test.php:
<?php
$email;$comment;$captcha;
if(isset($_POST['email'])){
$email=$_POST['email'];
}if(isset($_POST['comment'])){
$email=$_POST['comment'];
}if(isset($_POST['g-recaptcha-response'])){
$captcha=$_POST['g-recaptcha-response'];
}
if(!$captcha){
echo '<h2>Please check the the captcha form.</h2>';
exit;
}
$secretKey = "Put your secret key here";
$ip = $_SERVER['REMOTE_ADDR'];
$response=file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=".$secretKey."&response=".$captcha."&remoteip=".$ip);
$responseKeys = json_decode($response,true);
if(intval($responseKeys["success"]) !== 1) {
echo '<h2>You are spammer ! Get the #$%K out</h2>';
} else {
echo '<h2>Thanks for posting comment.</h2>';
}
?>
After looking at your website that you provided in the comments, I noticed your submit form handler is only submitting 4 fields (name, email, phone, and comments). This needs to be modified to include g-recaptcha-response.
From http://zacktarrcreations.com/AFK/js/plugins.js on line 1141:
$('#contactform').submit(function(){
var action = $(this).attr('action');
$("#message").slideUp(500,function() {
$('#message').hide();
$.post(action, {
name: $('#name').val(),
email: $('#email').val(),
phone: $('#phone').val(),
comments: $('#comments').val(),
},
function(data){
document.getElementById('message').innerHTML = data;
$('#message').slideDown('slow');
$('#submit').removeAttr('disabled');
if(data.match('success') != null) $('#contactform').slideUp('slow');
}
);
});
return false;
});
Change to:
$('#contactform').submit(function(){
var action = $(this).attr('action');
$("#message").slideUp(500,function() {
$('#message').hide();
$.post(action, {
name: $('#name').val(),
email: $('#email').val(),
phone: $('#phone').val(),
comments: $('#comments').val(),
"g-recaptcha-response": $('#g-recaptcha-response').val(),
},
function(data){
document.getElementById('message').innerHTML = data;
$('#message').slideDown('slow');
$('#submit').removeAttr('disabled');
if(data.match('success') != null) $('#contactform').slideUp('slow');
}
);
});
return false;
});
Tested and it worked for me.
Related
I wrote a script which doesn't send the data from the AJAX to the PHP file. and showing error in alert box
HTML
<form id="contact-form" action="#" method="post">
<div class="single-contact-form">
<div class="contact-box name">
<input type="text" name="name" id="name" placeholder="Your Name*" style="width:100%">
</div>
</div>
<div class="single-contact-form">
<div class="contact-box name">
<input type="text" name="email" id="email" placeholder="Your Email*" style="width:100%">
</div>
</div>
<div class="single-contact-form">
<div class="contact-box name">
<input type="text" name="phone" id="phone" placeholder="Your Mobile*" style="width:100%">
</div>
</div>
<div class="single-contact-form">
<div class="contact-box name">
<input type="text" name="password" id="password" placeholder="Your Password*" style="width:100%">
</div>
</div>
<div class="contact-btn">
<button type="submit" name="register" id="register" class="fv-btn" >Register</button>
</div>
</form>
JS
<script>
$(function(){
$("#register").on("click",function(e){
e.preventDefault();
var name = $("#name").val();
var email = $("#email").val();
var phone = $("#phone").val();
var password = $("#password").val();
if( name == "" || email == "" || phone == "" || password == ""){
alert("all field required");
}else{
$.ajax({
data: "ajax.php",
type: "POST",
data:{cname:name,cemail:email,cphone:phone,cpassword:password},
success: function (result) {
alert(result);
$("#contact-form").trigger("reset");
}
});
}
});
});
</script>
php
<?php
include "../inc/database1.php";
$name = $_POST['cname'];
$email = $_POST['cemail'];
$phone = $_POST['cphone'];
$password =$_POST['cpassword'];
$sql = "INSERT INTO tbl_user (name,email,phone,password) values('$name','$email','$phone','$password')";
$value = $this->db->conn->prepare($sql);
$data = $value->execute();
if($data == TRUE){
echo "successfully register";
}else{
echo "not sent";
}
?>
you have to do some changes in your ajax as you do not mention the url of ajax where it post the data and the variable data is reinitialised.
try this:
$.ajax({
url: "ajax.php", // its url you need to add
type: "POST",
data:{cname:name,cemail:email,cphone:phone,cpassword:password},
success: function (result) {
alert(result);
$("#contact-form").trigger("reset");
}
});
hope this helps you.
I am working with sweetalert2 two trying to submit form data including radio button. I find that the other fields are recorded in the database but can find the radio button values. Can somebody help? Check the code below.
This is the form
<form class="login" method="post" action="register.php">
<h5>Please Sign Up</h5>
<div class="form-group">
<input id="f_name" class="form-control" type="text" name="f_name" placeholder="Your First Name" required>
<input id="l_name" class="form-control" type="text" name="l_name" placeholder="Your Last Name" required>
<input id="email" class="form-control" type="email" name="email" placeholder="Your email address" required>
<input id="pass" class="form-control" type="password" name="pass" placeholder="Your password" required>
<h4>I want to :</h4>
<div class="radio-toolbar">
<input class="user" type="radio" name="user" id="user1" value="user1">
<label class="radio-label" for="writer">User 1</label>
<input type="radio" name="user" id="user2" value="user2">
<label class="radio-label" for="client">User 2</label>
</div>
<button class="btn btn-secondary" name="submit" id="register">Sign Up</button>
</div>
<h6><span>Have an account?</span> </h6>
Log In
</form>
External js is this
$(function() {
$('#register').click(function(e){
var valid = this.form.checkValidity();
if (valid) {
var f_name = $('#f_name').val();
var l_name = $('#l_name').val();
var email = $('#email').val();
var pass = $('#pass').val();
var user = $("input[name='user']:checked").val();
e.preventDefault();
$.ajax({
type: 'POST',
url: 'process.php',
data: {f_name:f_name,l_name:l_name,email:email,pass:pass, user:user},
success:function(data){
Swal.fire({
icon: 'succes',
title: 'Check the below message',
text: data,
footer: 'Please Sign In'
})
},
error:function(data){
Swal.fire({
icon: 'error',
title: 'Errors',
text: data,
footer: '<a href>Why do I have this issue?</a>'
})
}
});
}else{
}
});
});
The php code is here
require_once('./config/db.php');
if (isset($_POST)){
$f_name = $_POST['f_name'];
$l_name = $_POST['l_name'];
$email = $_POST['email'];
$pass = sha1($_POST['pass']);
$user = $_POST['user'];
$stmt = $conn->prepare("SELECT * FROM users WHERE email=?");
$stmt->execute([$email]);
$user = $stmt->fetch();
if ($user) {
echo "Email already exists in the database! Please use another email!";
} else {
$sql= "INSERT INTO users(f_name,l_name,email,pass,user) VALUES(?,?,?,?,?)";
$stmt = $conn->prepare($sql);
$results = $stmt->execute([$f_name,$l_name,$email,$pass,$user]);
if ($results) {
echo "Your registration has been submitted successfully.";
}else{
echo "There were errors while saving the data.";
}
}
}
?>
Please assist. I have been trying some of the solutions in the stackoverflow but can't get any help.
I'm having trouble getting this contact form working on an HTML site and I can't figure out why :/
I manage to get the email to my mailbox, but it only displays the subject (which isn't that useful as it's plain text, and sometimes I get the name.
Thanks in advance if you can help.
DIV:
<div id="contactForm" class="shadow">
<div class="sepContainer"></div>
<form action="process.php" method="post" id="contact_form">
<div class="name">
<label for="name">Your Name:</label>
<p> Please enter your full name</p>
<input id="name" name="email" type="text" placeholder="e.g. Mr. John Smith" required />
</div>
<div class="email">
<label for="email">Your Email:</label>
<p> Please enter your email address</p>
<input id="email" name="emai" type="email" placeholder="example#domain.com" required />
</div>
<div class="message">
<label for="message">Your Message:</label>
<p> Please enter your question</p>
<textarea name="messagetext" id="message" cols="30" rows="4"></textarea>
</div>
<div id="loader">
<input type="submit" value="Submit" />
</div>
</form>
</div>
JS:
// Activate the contactform
$(document).ready(function() {
$(function(){
$('#contact_form').submit(function(e){
e.preventDefault();
var form = $(this);
var post_url = form.attr('action');
var post_data = form.serialize();
$('#loader', form).html('<img src="images/loader.gif" /> Please Wait...');
$.ajax({
type: 'POST',
url: post_url,
data: post_data,
success: function(msg) {
$(form).fadeOut(500, function(){
form.html(msg).fadeIn();
});
}
});
});
});
});
PHP:
<?php
$toemail = 'myemailaddress#whatever.com';
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
if(mail($toemail,'CFUSU Online',$message,'From:'.$email)) {
echo 'Your email was sent succesfully.';
} else {
echo 'There was a problem sending your email.';
}
?>
Correct php code
$toemail = 'myemailaddress#whatever.com';
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['messagetext'];
if(mail($toemail,'CFUSU Online',$message,'From:'.$email)) {
echo 'Your email was sent succesfully.';
} else {
echo 'There was a problem sending your email.';
}
I'm building a contact form for my site using jQuery validation plugin, ajax call to forward the data to the PHP file, and finally sending the email. Seems like the data is not passed to the php mailer. I'm new to server side technologies, I read a lot but still can't make this working, so please advise me.
the form:
<form class="form-horizontal" role="form" id="contactForm" name="contactForm" method="post">
<div class="form-group">
<label class="col-lg-2 control-label" for="inputName">Name</label>
<div class="col-lg-10">
<input class="form-control" id="inputName" name="inputName" placeholder="Your name" type="text" value="" required>
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label" for="inputEmail">Email</label>
<div class="col-lg-10">
<input class="form-control" id="inputEmail" name="email" placeholder="your#email.com" type="email" value="" required>
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label" for="inputMessage">Message</label>
<div class="col-lg-10">
<textarea class="form-control" id="inputMessage" name="inputMessage" placeholder="Message" rows="3" required></textarea>
<button class="btn btn-success pull-right" type="submit" name="submit" id="submit">Send</button>
</div>
</div>
the javascript:
/*validate contact form */
$(function() {
$('#contactForm').validate({
rules: {
inputName: {
required: true,
minlength: 2
},
inputEmail: {
required: true,
email: true
},
inputMessage: {
required: true
}
},
messages: {
name: {
required: "name required",
minlength: "name must be at least 2 characters"
},
email: {
required: "email required"
},
message: {
required: "message required",
minlength: 10
}
},
submitHandler: function(form) {
$('form').ajaxSubmit({
type:"POST",
data: $(form).serialize(),
url:"index2.php",
success: function() {
alert("message sent");
},
error: function() {
alert("due to an error msg wasnt sent");
}
});
}
});
});
php file:
<?php
if ($_POST["submit"]) {
$name = trim($_POST['inputName']);
$email = trim($_POST['inputEmail']);
$message = $_POST['inputMessage'];
$from = 'Demo Contact Form';
$to = 'example#example.com';
$subject = 'Message from Contact Demo ';
$body = "From: $name\n E-Mail: $email\n Message:\n $message";
mail($to, $subject, $body, $from);
}
?>
$(form).serialize() doesn't include the submit field (how would it know which submit button you clicked on?), so if ($_POST['submit']) will never succeed. Use:
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
instead.
Or, if this script is only used for AJAX calls, and not loaded directly by the browser, you can omit that check entirely, as in Glizzweb's answer.
better use checking if:
if (isset($_POST['inputName'])){
//rest part here
}
// and see if the file is in same directory otherwise give relative path.
use this to send form content:
submitHandler: function() {
$('form').ajaxSubmit({
type:"POST",
data: $('#contactForm').serialize(),
url:"submit.php",
success: function() {
alert("message sent");
},
error: function() {
alert("due to an error msg wasnt sent");
}
});
}
In your ajax.php remove $_POST["submit"]
<?php
$name = trim($_POST['inputName']);
$email = trim($_POST['inputEmail']);
$message = $_POST['inputMessage'];
$from = 'Demo Contact Form';
$to = 'example#example.com';
$subject = 'Message from Contact Demo ';
$body = "From: $name\n E-Mail: $email\n Message:\n $message";
mail($to, $subject, $body, $from);
?>
In ajax page $_POST['submit'] need remove because you post values using "$(form).serialize()" and In you not post value to ajax page. remove if condition "if ($_POST["submit"]) {}" and change like this "if (!empty($_POST["inputName"])) { }"
$name = trim($_POST['inputName']);
$email = trim($_POST['inputEmail']);
.....
....
....
Try this code:
<html>
<head>
<script src="js/jquery-1.11.0.js" type="text/javascript"></script>
<script src="js/jquery.validate.min.js" type="text/javascript"></script>
<script src="js/additional-methods.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$('#contactForm').submit(function(e){
e.preventDefault();
$('#contactForm').validate({
rules: {
inputName: {
required: true,
minlength: 2
},
inputEmail: {
required: true,
email: true
},
inputMessage: {
required: true
}
},
messages: {
name: {
required: "name value required",
minlength: "name must be at least 2 characters"
},
email: {
required: "email is required"
},
message: {
required: "message is required",
minlength: 10
}
},
submitHandler: function(form) {
alert($('form').html());
$.ajax({
type:"POST",
data: $(form).serialize(),
url:"test1.php",
success: function() {
alert("message sent");
},
error: function() {
alert("due to an error msg wasnt sent");
}
});
}
});
});
});
</script>
</head>
<body>
<form class="form-horizontal" role="form" id="contactForm" name="contactForm" method="post">
<div class="form-group">
<label class="col-lg-2 control-label" for="inputName">Name</label>
<div class="col-lg-10">
<input class="form-control" id="inputName" name="inputName" placeholder="Your name" type="text" value="" >
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label" for="inputEmail">Email</label>
<div class="col-lg-10">
<input class="form-control" id="inputEmail" name="email" placeholder="your#email.com" type="email" value="" >
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label" for="inputMessage">Message</label>
<div class="col-lg-10">
<textarea class="form-control" id="inputMessage" name="inputMessage" placeholder="Message" rows="3" ></textarea>
<input class="btn btn-success pull-right" type="submit" name="submit" id="submit" value="Send">
</div>
</div>
</body>
</html>
It is working and showing message sent and ajax call also made. you are doing some mistakes while performing ajax call. as jquery validation plugin does not provide any ajaxsubmit function instead use jquery ajax function as i have used. try it and let me know for further issue.
Change this code to fit your requirement.
I am trying to send an email with PHP and Ajax, the mailer is working but I know very little about Ajax, after reading a couple of pages of a book I have written a small piece of code and was hoping someone could point out where I am going wrong:
Here is my PHP:
<?php
$name = ($_POST['name']);
$email = ($_POST['email']);
$fsubject = ($_POST['subject']);
$message = ("Name: ". $name . "\nEmail Address: " . $email . "\n\nMessage: " . $_POST['message']);
// Set Mail
$to = "emailaddress#fakeone.com";
$headers = 'emailaddress#fakeone.com' . "\r\n";
$subject = "{$fsubject}";
$body = "{$message}";
// Send Mail
if (mail($to, $subject, $body, $header))
{
echo("<p>Message successfully sent!</p>");
}
else
{
echo("<p>Message delivery failed...</p>");
}
?>
My HTML:
<div id="success" style="color:red;"></div>
<form action="" id="contactform" method="post">
<div class="row">
<div class="form-group">
<div class="col-md-6">
<label>Your name *</label>
<input type="text" value="" data-msg-required="Please enter your name." maxlength="100" class="form-control" name="name" id="name">
</div>
<div class="col-md-6">
<label>Your email address *</label>
<input type="email" value="" data-msg-required="Please enter your email address." data-msg-email="Please enter a valid email address." maxlength="100" class="form-control" name="email" id="email">
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<div class="col-md-12">
<label>Subject</label>
<input type="text" value="" data-msg-required="Please enter the subject." maxlength="100" class="form-control" name="subject" id="subject">
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<div class="col-md-12">
<label>Message *</label>
<textarea maxlength="5000" data-msg-required="Please enter your message." rows="10" class="form-control" name="message" id="message"></textarea>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<input type="submit" id="submit" value="Send Message" class="btn btn-info btn-lg" data-loading-text="Loading...">
</div>
</form>
My AJAX:
<script>
$(document).ready(function(){
$('#submit').click(function(){
$.post("sendmail.php", $("#contactform").serialize(), function(response) {
$('#success').html(response);
//$('#success').hide('slow');
});
return false;
});
});
</script>
At the moment the same page just reloads, the desired outcome is just a subtle success or failure message appearing.
Any help would be welcome!
Thanks,
Dan
Your snippet code seems to run just fine.
It must be an error either in other JS (check browser console, F12 in Chrome for example) or in your PHP.
Try this to see if ajax post fails:
<script>
$(document).ready(function(){
$('#submit').click(function(){
$.post("contact.php", $("#contactform").serialize(), function(response) {
$('#success').html(response);
}).fail(function() {
alert( "error" );
});
return false;
});
});
</script>
Also, try to make sure PHP execution is fine, so remove all javascript and replace
<form action="sendmail.php" id="contactform" method="post">
Check the result of that page, it should be "Message successfully sent!".
Also, check a simple JS snippet of your code:
http://jsfiddle.net/CPtpk/
Please note that if you have another JavaScript code in your page that could be a cause for this problem. Even if your JS error is in another place it can cause JS execution to stop and so your onClick isn't executed and that's why you get your problem...
Try something like this on the JS:
<script>
$(document).ready(function() {
$('#contactform').submit(function(e) {
e.preventDefault();
$.post("sendmail.php", $(this).serialize(), function(response) {
$('#success').html(response);
});
});
});
</script>