AJAX Form Not Submitting or doing anything - javascript

I have an AJAX form that I am trying to get working and I cannot figure out why. I am not receiving and PHP errors as I have checked the log files. Basically, nothing is happening when I submit the form. I have another form that is very similar and it is working, so I do not know what is going on. Probably something very simple that I am overlooking.
Here is the form:
<div id="give-away-form">
<form method="post" action="ajax.php" class="form-horizontal">
<div class="form-group">
<div class="col-sm-2 hidden-xs"></div>
<label for="give_away_name" class="col-sm-2 col-xs-12 control-label">Name</label>
<div class="col-sm-5 col-xs-12">
<input type="text" class="form-control" name="give_away_name" id="give_away_name" placeholder="Name">
</div>
<div class="col-sm-3 hidden-xs"></div>
</div>
<div class="form-group">
<div class="col-sm-2 hidden-xs"></div>
<label for="give_away_email" class="col-sm-2 col-xs-12 control-label">Email</label>
<div class="col-sm-5 col-xs-12">
<input type="text" class="form-control" name="give_away_email" id="give_away_email" placeholder="Email">
</div>
<div class="col-sm-3 hidden-xs"></div>
</div>
<div class="form-group">
<div class="col-sm-2 hidden-xs"></div>
<label for="give_away_phone_no" class="col-sm-2 col-xs-12 control-label">Phone No</label>
<div class="col-sm-5 col-xs-12">
<input type="text" class="form-control" name="give_away_phone_no" id="give_away_phone_no" placeholder="Phone No">
</div>
<div class="col-sm-3 hidden-xs"></div>
</div>
<div class="form-group">
<!-- Street -->
<div class="col-sm-2 hidden-xs"></div>
<label for="give_away_street" class="col-sm-2 col-xs-12 control-label">Street</label>
<div class="col-sm-5 col-xs-12">
<input class="form-control" name="give_away_street" id="give_away_street" placeholder="Street">
</div>
<div class="col-sm-3 hidden-xs"></div>
</div>
<div class="form-group">
<!-- End Street -->
<!-- City -->
<div class="col-sm-2 hidden-xs"></div>
<label for="give_away_city" class="col-sm-2 col-xs-12 control-label">City</label>
<div class="col-sm-2 col-xs-12">
<input class="form-control" name="give_away_city" id="give_away_city" placeholder="City">
</div>
<!-- End City -->
<!-- State -->
<label for="give_away_state" class="col-sm-1 col-xs-12 control-label">State</label>
<div class="col-sm-2 col-xs-12">
<select class="form-control" name="give_away_state" id="give_away_state">
<option value="">State</option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
</div>
<!-- <div class="col-sm-3 hidden-xs"></div> -->
</div>
<div class="form-group">
<div class="col-sm-2 hidden-xs"></div>
<label class="col-sm-2 col-xs-12 control-label hidden-xs"> </label>
<div class="col-sm-5 col-xs-12 text-left">
<input type="hidden" name="action" value="give_away_form" />
<input type="submit" class="btn btn-primary" value="Submit">
<div class="clear"></div>
<div id="give_away_form_message"></div>
</div>
<div class="col-sm-3 hidden-xs"></div>
</div>
</form>
<!-- End Form -->
</div>
Here is the PHP:
if(isset($_POST['action']) && $_POST['action'] == 'give_away_form') {
$result = array();
$give_away_name = strip_tags(trim($_POST['give_away_name']));
$give_away_email = strip_tags(trim($_POST['give_away_email']));
$give_away_phone_no = strip_tags(trim($_POST['give_away_phone_no']));
$give_away_street = strip_tags(trim($_POST['give_away_street']));
$give_away_city = strip_tags(trim($_POST['give_away_city']));
$give_away_state = strip_tags(trim($_POST['give_away_state']));
if($give_away_name == '')
$result['error']['give_away_name'] = 'Name required.';
if($give_away_email == '')
$result['error']['give_away_email'] = 'Email address required.';
else if(!filter_var($give_away_email, FILTER_VALIDATE_EMAIL))
$result['error']['give_away_email'] = 'Invalid email address.';
if($give_away_phone_no == '')
$result['error']['give_away_phone_no'] = 'Phone no required.';
if($give_away_comment == '')
$result['error']['give_away_comment'] = 'Comment required.';
if(!isset($result['error'])) {
$to = $give_away_to;
$subject = $give_away_subject;
$message = '<p>Hi,</p>';
$message .= '<p>You have received this message from give_away form on Hope Starts Here - Columbus</p>';
$message .= '<p><strong>Name:</strong>'.$give_away_name.'</p>';
$message .= '<p><strong>Email:</strong>'.$give_away_email.'</p>';
$message .= '<p><strong>Phone No:</strong>'.$give_away_phone_no.'</p>';
$message .= '<p><strong>Comment:</strong><br>'.$give_away_comment.'</p>';
$message .= '<p> </p>';
$message .= '<p><strong>Thank You.</strong></p>';
$headers = "From: " . strip_tags($give_away_from) . "\r\n";
$headers .= "Reply-To: ". strip_tags($give_away_email) . "\r\n";
//$headers .= "CC: abc#example.com\r\n";
$headers .= "MIME-Version: 1.0\r\n";
$headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";
if(#mail($to, $subject, $message, $headers)) {
$result['success'] = 'Thank you for entering to win! Once the names are drawn, we will contact the winners by email or phone.';
} else {
$result['error']['give_away_form_message'] = 'Something wrong please try again...';
}
}
echo json_encode($result);
die;
}
And, the JS:
$('#give-away-form form').submit(function(e) {
$('span.form-message').remove();
e.preventDefault();
$this = $(this);
var url = $this.attr('action');
var data = $this.serialize();
$.ajax({
url: url,
method: 'POST',
data: data,
dataType: 'json',
success: function(response) {
if(response.error) {
var focus_field = '';
$.each(response.error, function(id, message) {
$('#'+id).after('<span class="form-message label label-danger">' + message + '</span>');
if(focus_field == '')
focus_field = id;
});
$('#'+focus_field).focus();
}
if(response.success) {
$('#give_away_form_message').after('<span class="form-message label label-success">' + response.success + '</span>');
$this[0].reset();
}
}
});
});

Can you try this code and tell us, which alerts have worked?
$('#give-away-form form').submit(function(e) {
$('span.form-message').remove();
e.preventDefault();
$this = $(this);
var url = $this.attr('action');
var data = $this.serialize();
$.ajax({
url : url,
method : 'POST',
data : data,
dataType : 'json',
success : function(response) {
alert("Number 1");
if(response.error) {
alert("Number 2");
var focus_field = '';
$.each(response.error, function(id, message) {
alert("Number 3");
$('#'+id).after('<span class="form-message label label-danger">' + message + '</span>');
if(focus_field == '')
focus_field = id;
});
$('#'+focus_field).focus();
}
if(response.success) {
alert("Number 4");
$('#give_away_form_message').after('<span class="form-message label label-success">' + response.success + '</span>');
$this[0].reset();
}
}
});
});

Could you please add echo "page works"; before your PHP code and then try to access it in your browser without the ajax. Just go to ajax.php on your server and see if the page is accessible and share the result with us.

I found the problem. I copied this form from another form and forgot to change a couple of variables.
if($give_away_comment == '')
$result['error']['give_away_comment'] = 'Comment required.';
There is no $give_away_comment.
Thanks for all of the help from all of you!

Related

Problem with sending email info via website php js and html

I don't know what's going wrong but for example when I press the send button in the contact.html
nothing happens and then I cant rewrite the form above.
I've tried the form --> contact-process.php but same results.
<form id="test-form" class="white-popup-block mfp-hide">
<div class="popup_box ">
<div class="popup_inner">
<h3>Make an Appointment</h3>
<form class="#">
<div class="row">
<div class="col-xl-6 col-md-6">
<input id="datepicker" placeholder="Date">
</div>
<div class="col-xl-6 col-md-6">
<input id="timepicker" placeholder="time">
</div>
<div class="col-xl-6 col-md-6">
<select class="form-select wide" id="default-select" class="">
<option data-display="Choose services">Choose services 1</option>
<option value="1">Choose services 2</option>
<option value="2">Choose services 3</option>
<option value="3">Choose services 4</option>
</select>
</div>
<div class="col-xl-6 col-md-6">
<select class="form-select wide" id="default-select" class="">
<option data-display="Choose Barbers">Choose Barbers</option>
<option value="1">Zaki</option>
<option value="2">Ronky</option>
<option value="3">kalu</option>
</select>
</div>
<div class="col-xl-6 col-md-6">
<input type="text" placeholder="Your name">
</div>
<div class="col-xl-6 col-md-6">
<input type="text" placeholder="Phone no">
</div>
<div class="col-xl-12">
<input type="email" placeholder="Your email">
</div>
<div class="col-xl-12">
<button type="submit" class="boxed-btn3">Submit</button>
</div>
</div>
</form>
</div>
</div>
</form>
this is on part of the contact HTML that
when I press send button "stucks"
and I cant click on the placeholder space again.
contact.html
<section class="contact-section">
<div class="container">
<div class="row">
<!-- This creates one blank line -->
<div class="col-12">
<h2 class="contact-title">Get in Touch</h2>
</div>
<div class="col-lg-8">
<form class="form-contact contact_form" action="contact_process.php" method="post" id="contactForm" novalidate="novalidate">
<div class="row">
<div class="col-12">
<div class="form-group">
<textarea class="form-control w-100" name="message" id="message" cols="30" rows="9" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Enter Message'" placeholder=" Name"></textarea>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<input class="form-control valid" name="name" id="name" type="text" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Enter your name'" placeholder="Enter your name">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<input class="form-control valid" name="email" id="email" type="email" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Enter email address'" placeholder="Email">
</div>
</div>
<div class="col-12">
<div class="form-group">
<input class="form-control" name="subject" id="subject" type="text" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Enter Subject'" placeholder="Enter Subject">
</div>
</div>
</div>
<div class="form-group mt-3">
<button type="submit" class="button button-contactForm boxed-btn">Send</button>
</div>
</form>
</div>
<div class="col-lg-3 offset-lg-1">
<div class="media contact-info">
<span class="contact-info__icon"><i class="ti-home"></i></span>
<div class="media-body">
<h3>somwhere, somewhere.</h3>
<p>streetnaem3A, PC 5555</p>
</div>
</div>
<div class="media contact-info">
<span class="contact-info__icon"><i class="ti-tablet"></i></span>
<div class="media-body">
<h3>+34 6894938554</h3>
<p>Monday-Saturday (16:00 - 20:00)</p>
</div>
</div>
<div class="media contact-info">
<span class="contact-info__icon"><i class="ti-email"></i></span>
<div class="media-body">
<h3>myemail#gmail.com</h3>
<p>Ask me for anything anytime!</p>
</div>
</div>
</div>
</div>
</section>
in this code Idk what should I put on link
contact-process.php
<?php
$to = "myemail#gmail.com";
$from = $_REQUEST['email'];
$name = $_REQUEST['name'];
$subject = $_REQUEST['subject'];
$number = $_REQUEST['number'];
$cmessage = $_REQUEST['message'];
$headers = "From: $from";
$headers = "From: " . $from . "\r\n";
$headers .= "Reply-To: ". $from . "\r\n";
$headers .= "MIME-Version: 1.0\r\n";
$headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";
$subject = "You have a message from your Bitmap Photography.";
$logo = 'img/logo.png';
$link = '#';
$body = "<!DOCTYPE html><html lang='en'><head><meta charset='UTF-8'><title>Express Mail</title></head><body>";
$body .= "<table style='width: 100%;'>";
$body .= "<thead style='text-align: center;'><tr><td style='border:none;' colspan='2'>";
$body .= "<a href='{$link}'><img src='{$logo}' alt=''></a><br><br>";
$body .= "</td></tr></thead><tbody><tr>";
$body .= "<td style='border:none;'><strong>Name:</strong> {$name}</td>";
$body .= "<td style='border:none;'><strong>Email:</strong> {$from}</td>";
$body .= "</tr>";
$body .= "<tr><td style='border:none;'><strong>Subject:</strong> {$csubject}</td></tr>";
$body .= "<tr><td></td></tr>";
$body .= "<tr><td colspan='2' style='border:none;'>{$cmessage}</td></tr>";
$body .= "</tbody></table>";
$body .= "</body></html>";
if(mail($to, $subject, $body, $headers)){
echo 'done';
}else{
echo 'mail not sent';
}
?>
why is this disabled?
$('#contactForm :input').attr('disabled', 'disabled');
and the js here
$(document).ready(function(){
(function($) {
"use strict";
jQuery.validator.addMethod('answercheck', function (value, element) {
return this.optional(element) || /^\bcat\b$/.test(value)
}, "type the correct answer -_-");
// validate contactForm form
$(function() {
$('#contactForm').validate({
rules: {
name: {
required: true,
minlength: 2
},
subject: {
required: true,
minlength: 4
},
number: {
required: true,
minlength: 5
},
email: {
required: true,
email: true
},
message: {
required: true,
minlength: 20
}
},
messages: {
name: {
required: "come on, you have a name, don't you?",
minlength: "your name must consist of at least 2 characters"
},
subject: {
required: "come on, you have a subject, don't you?",
minlength: "your subject must consist of at least 4 characters"
},
number: {
required: "come on, you have a number, don't you?",
minlength: "your Number must consist of at least 5 characters"
},
email: {
required: "no email, no message"
},
message: {
required: "um...yea, you have to write something to send this form.",
minlength: "thats all? really?"
}
},
submitHandler: function(form) {
$(form).ajaxSubmit({
type:"POST",
data: $(form).serialize(),
url:"contact_process.php",
success: function() {
$('#contactForm :input').attr('disabled', 'disabled');
$('#contactForm').fadeTo( "slow", 1, function() {
$(this).find(':input').attr('disabled', 'disabled');
$(this).find('label').css('cursor','default');
$('#success').fadeIn()
$('.modal').modal('hide');
$('#success').modal('show');
})
},
error: function() {
$('#contactForm').fadeTo( "slow", 1, function() {
$('#error').fadeIn()
$('.modal').modal('hide');
$('#error').modal('show');
})
}
})
}
})
})
})(jQuery)
})
one more js here
// ------- Mail Send ajax
$(document).ready(function() {
var form = $('#myForm'); // contact form
var submit = $('.submit-btn'); // submit button
var alert = $('.alert-msg'); // alert div for show alert message
// form submit event
form.on('submit', function(e) {
e.preventDefault(); // prevent default form submit
$.ajax({
url: 'mail.php', // form action url
type: 'POST', // form submit method get/post
dataType: 'html', // request type html/json/xml
data: form.serialize(), // serialize form data
beforeSend: function() {
alert.fadeOut();
submit.html('Sending....'); // change submit button text
},
success: function(data) {
alert.html(data).fadeIn(); // fade in response data
form.trigger('reset'); // reset form
submit.attr("style", "display: none !important");; // reset submit button text
},
error: function(e) {
console.log(e)
}
});
});
});

Address box fails to be shown in the email

I was wondering if anyone could help me with my issue, When ever the form is submitted the street form does not show up in the email I receive. I don't understand why it might not be working I've looked through the php and JS but cant understand why it won't work. Here i the JS:
(function($){
$(document).ready(function() {
/* ---------------------------------------------- /*
* Contact form ajax
/* ---------------------------------------------- */
$('#contact-form').find('input,textarea').jqBootstrapValidation({
preventSubmit: true,
submitError: function($form, event, errors) {
// additional error messages or events
},
submitSuccess: function($form, event) {
event.preventDefault();
var submit = $('#contact-form submit');
var ajaxResponse = $('#contact-response');
var name = $('#contact-form [name="name"]').val();
var lastname = $('#contact-form [name="lastname"]').val();
var address = $('#contact-form [name="address"]').val();
var email = $('#contact-form [name="email"]').val();
var message = $('#contact-form [name="message"]').val();
$.ajax({
type: 'POST',
url: 'assets/php/contact.php',
dataType: 'json',
data: {
name: name,
lastname: lastname,
address: address,
email: email,
message: message,
},
cache: false,
beforeSend: function(result) {
submit.empty();
submit.append('<i class="fa fa-cog fa-spin"></i> Wait...');
},
success: function(result) {
if(result.sendstatus == 1) {
ajaxResponse.html(result.message);
$form.fadeOut(500);
} else {
ajaxResponse.html(result.message);
}
}
});
}
});
}); })(jQuery);
Here is the HTML:
<div class="row">
<div name="contactform" class="col-sm-8 col-sm-offset-2">
<form id="contact-form" method="post" novalidate>
<div class="row">
<div class="col-md-6 form-group">
<label class="sr-only">First Name</label>
<input type="text" class="form-control input-lg" name="name" placeholder="First Name" value="" required="">
<p class="help-block text-danger"></p>
</div>
<div class="col-md-6 form-group">
<label class="sr-only">Last Name</label>
<input type="text" class="form-control input-lg" name="lastname" placeholder="Last Name" value="" required="">
<p class="help-block text-danger"></p>
</div>
<div class="col-md-6 form-group">
<label class="sr-only">Address</label>
<input type="text" class="form-control input-lg" name="address" placeholder="Address" value="" required="">
<p class="help-block text-danger"></p>
</div>
<div class="col-md-12 form-group">
<label class="sr-only">E-mail Address</label>
<input type="email" class="form-control input-lg" name="email" placeholder="E-mail Address" value="" required="">
<p class="help-block text-danger"></p>
</div>
<div class="col-md-12 form-group">
<textarea class="form-control input-lg" rows="7" name="message" placeholder="Message - Please include Address and Telephone number" required=""></textarea>
<p class="help-block text-danger"></p>
</div>
<div class="col-md-12 text-center">
<button type="submit" class="btn btn-lg btn-round btn-dark" >Send Email</button>
</div>
</div><!-- .row -->
</form>
<!-- Ajax response -->
<div id="contact-response" class="ajax-response text-center"></div>
</div>
</div>
And here is the php:
<?php
// Mail settings
$to = "****#*******.co.uk";
$subject = "PB Enquiry Form - " . $_REQUEST['lastname'];
// You can put here your email
$header = "From:****#*******.co.uk\r\n";
$header.= "MIME-Version: 1.0\r\n";
$header.= "Content-Type: text/plain; charset=utf-8\r\n";
$header.= "X-Priority: 1\r\n";
if (isset($_POST["name"]) && isset($_POST["lastname"]) && isset($_POST["email"]) && isset($_POST["message"])) {
$content = "First Name: " . $_POST["name"] . "\r\n";
$content .= "Last Name: " . $_POST["lastname"] . "\r\n";
$content .= "Address: " . $_POST["address"] . "\r\n";
$content .= "Email: " . $_POST["email"] . "\r\n";
$content .= "Message: " . $_POST["message"] . "\r\n";
if (mail($to, $subject, $content, $header)) {
$result = array(
"message" => "Thank you for contacting us.",
"sendstatus" => 1
);
echo json_encode($result);
} else {
$result = array(
"message" => "Sorry, something is wrong.",
"sendstatus" => 0
);
echo json_encode($result);
}
}
I cannot figure out why it won't work and would be delighted if someone could help me.
If you do have a solution then please give an example of how to input the solution as I am new to the languages, Thank you!

My street input field wont work on submission

I was wondering if anyone could help me with my issue,
When ever the form is submitted the street form does not show up in the email I receive. I don't understand why it might not be working I've looked through the php and JS but cant understand why it won't work.
Here i the JS co
(function($){ $(document).ready(function() {
/* ---------------------------------------------- /*
* Contact form ajax
/* ---------------------------------------------- */
$('#contact-form').find('input,textarea').jqBootstrapValidation({
preventSubmit: true,
submitError: function($form, event, errors) {
// additional error messages or events
},
submitSuccess: function($form, event) {
event.preventDefault();
var submit = $('#contact-form submit');
var ajaxResponse = $('#contact-response');
var name = $('#contact-form [name="name"]').val();
var lastname = $('#contact-form [name="lastname"]').val();
var email = $('#contact-form [name="email"]').val();
var street = $('#contact-form [name="street"]').val();
var message = $('#contact-form [name="message"]').val();
$.ajax({
type: 'POST',
url: 'assets/php/contact.php',
dataType: 'json',
data: {
name: name,
lastname: lastname,
email: email,
street: street,
message: message,
},
cache: false,
beforeSend: function(result) {
submit.empty();
submit.append('<i class="fa fa-cog fa-spin"></i> Wait...');
},
success: function(result) {
if(result.sendstatus == 1) {
ajaxResponse.html(result.message);
$form.fadeOut(500);
} else {
ajaxResponse.html(result.message);
}
}
});
}
});
}); })(jQuery);
Here is the php:
<?php
// Mail settings
$to = "";
$subject = "PB Enquiry Form - " . $_REQUEST['lastname'];
// You can put here your email
$header = "From:\r\n";
$header.= "MIME-Version: 1.0\r\n";
$header.= "Content-Type: text/plain; charset=utf-8\r\n";
$header.= "X-Priority: 1\r\n";
if (isset($_POST["name"]) && isset($_POST["lastname"]) && isset($_POST["email"]) && isset($_POST["message"])) {
$content = "First Name: " . $_POST["name"] . "\r\n";
$content .= "Last Name: " . $_POST["lastname"] . "\r\n";
$content .= "Email: " . $_POST["email"] . "\r\n";
$content .= "Street: " . $_POST["street"] . "\r\n";
$content .= "Message: " . $_POST["message"] . "\r\n";
if (mail($to, $subject, $content, $header)) {
$result = array(
"message" => "Thank you for contacting us.",
"sendstatus" => 1
);
echo json_encode($result);
} else {
$result = array(
"message" => "Sorry, something is wrong.",
"sendstatus" => 0
);
echo json_encode($result);
}
}
And here is the html:
<form id="contact-form" method="post" novalidate>
<div class="row">
<div class="col-md-6 form-group">
<label class="sr-only">First Name</label>
<input type="text" class="form-control input-lg" name="name" placeholder="First Name" value="" required="">
<p class="help-block text-danger"></p>
</div>
<div class="col-md-6 form-group">
<label class="sr-only">Last Name</label>
<input type="text" class="form-control input-lg" name="lastname" placeholder="Last Name" value="" required="">
<p class="help-block text-danger"></p>
</div>
<div class="col-md-12 form-group">
<label class="sr-only">E-mail Address</label>
<input type="email" class="form-control input-lg" name="email" placeholder="E-mail Address" value="" required="">
<p class="help-block text-danger"></p>
</div>
<div class="col-md-12 form-group">
<label class="sr-only">Street</label>
<input type="text" class="form-control input-lg" name="street" placeholder="Street" value="" required="">
<p class="help-block text-danger"></p>
</div>
<div class="col-md-12 form-group">
<textarea class="form-control input-lg" rows="7" name="message" placeholder="Message" required=""></textarea>
<p class="help-block text-danger"></p>
</div>
<div class="col-md-12 text-center">
<button type="submit" class="btn btn-lg btn-round btn-dark" >Send Email</button>
</div>
</div><!-- .row -->
</form>
I left the Email out on purpose,
Thank You for helping!

Cannot get response from AJAX in Javascript

I made a simple AJAX application, it worked fine for sometime, but I don't know what I did wrong with the app which does not run properly. I am putting all info here:
This is HTML Code:
<div class="col-lg-6 col-md-6 contact-wthree2">
<h3 class="head2">Your Comments</h3>
<form onsubmit="submit_form();">
<div class="row">
<div class="form-group col-lg-6 col-md-6 col-sm-6 slideanim">
<input type="text" class="form-control first-name" id="firstname" placeholder="First Name"
required/>
</div>
<div class="form-group col-lg-6 col-md-6 col-sm-6 slideanim">
<input type="text" class="form-control last-name" id="lastname" placeholder="Last Name"
required/>
</div>
<div class="form-group col-lg-6 col-md-6 col-sm-6 slideanim">
<input type="email" class="form-control mail" id="mail" placeholder="Your Email" required/>
</div>
<div class="form-group col-lg-6 col-md-6 col-sm-6 slideanim">
<input type="tel" class="form-control pno" id="phone" placeholder="Your Phone Number"
required/>
</div>
<div class="clearfix"></div>
<div class="form-group col-lg-12 slideanim">
<textarea class="form-control" rows="6" id="message" placeholder="Your Message" required></textarea>
</div>
<div class="form-group col-lg-12 slideanim">
<button type="submit" class="btn btn-lg btn-outline">Send Message</button>
</div>
</div>
</form>
</div>
</div>
<button class="btn btn-primary" id="clickme" data-toggle="modal" data- target="#dialog" style="display:none">Open Dialog</button>
<div class="modal fade" id="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header" id="response">
</div>
</div>
</div>
</div>
Then I wrote Javascript Code as follows:
<script>
var xmlhttp = new XMLHttpRequest();
var firstname = document.getElementById('firstname').value,
lastname = document.getElementById('lastname').value,
email = document.getElementById('mail').value,
contact = document.getElementById('phone').value,
message = document.getElementById('message').value;
function submit_form()
{
xmlhttp.onreadystatechange = function()
{
if ((xmlhttp.readyState == 4) && (xmlhttp.status == 200))
{
document.getElementById('response').innerHTML = xmlhttp.responseText;
document.getElementById('clickme').click();
firstnameinp.value="";
lastnameinp.value="";
emailinp.value="";
contactinp.value="";
messageinp.value="";
}
}
xmlhttp.open('POST','process_comments.php?firstname=' + firstname+'&lastname='+lastname
+'&email='+email+'&contact='+contact+'&message='+message+'',true);
xmlhttp.send();
}
</script>
And here is my PHP file (process_comments.php):
<?php
include('connection.php');
$firstname = "";
$lastname = "";
$email = "";
$contact = "";
$message = "";
$sql = "";
$table = "comments";
if (isset($_REQUEST['firstname']) && isset($_REQUEST['lastname']) && isset($_REQUEST['email']) && isset($_REQUEST['contact']) && isset($_REQUEST['message'])) {
//echo "Hi";
$firstname = "'" . $_REQUEST['firstname'] . "'";
$lastname = "'" . $_REQUEST['lastname'] . "'";
$email = "'" . $_REQUEST['email'] . "'";
$contact = $_REQUEST['contact'];
$message = "'" . $_REQUEST['message'] . "'";
$sql = "INSERT INTO {$table} VALUES (NULL,{$firstname},{$lastname},{$email},{$contact},{$message})";
if (mysqli_query($conn, $sql)) {
echo "<div class='alert alert-success' ><h4>Your message has successfully been sent.</h4></div>
<div class=\"text-right\">
<button class=\"btn btn-danger\" data-dismiss=\"modal\">Close</button>
</div>";
} else {
echo "<div class='alert alert-danger' ><h4> Message sending failed.</h4></div>
<div class=\"text-right\">
<button class=\"btn btn-danger\" data-dismiss=\"modal\">Close</button>
</div>";
}
} else {
echo "<div class='alert alert-danger' ><h4>Message sending failed.</h4></div>
<div class=\"text-right\">
<button class=\"btn btn-danger\" data-dismiss=\"modal\">Close</button>
</div>";
}
This worked for some time, but now when I run this, it does not give the xmlhttp.responseText.
Anybody please help.

Can't figure why I can't hook up my AJAX handler through WordPress

So I'm trying to follow the instructions here like a recipe book and am coming up for short. When I submit the form below, a POST request to http://thesite/wp-admin/member-update returns 404. As I understand, that request is supposed to trigger my function member_update() because of I set
<?php
add_action( 'wp_ajax_member-update', 'member_update' );
?>
at the beginning of my page. I can't figure out why it isn't working. The rest of the relevant code is the form
<form method="POST" action="member-update" enctype="multipart/form-data">
<div class="modal fade" id="member-modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<h2></h2>
</div>
</div>
</div>
<div class="modal-body">
<div class="row">
<div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">
Full name:
</div>
<div class="col-xs-12 col-sm-9 col-md-9 col-lg-9">
<input type="text" name="fullname" value="">
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">
Title:
</div>
<div class="col-xs-12 col-sm-9 col-md-9 col-lg-9">
<input type="text" name="title" value="">
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">
Bio (approx 150 chars):
</div>
<div class="col-xs-12 col-sm-9 col-md-9 col-lg-9">
<input type="textarea" name="bio" value="">
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">
Sort order:
</div>
<div class="col-xs-12 col-sm-9 col-md-9 col-lg-9">
<input type="textarea" name="sord" value="">
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">
Pic:
</div>
<div class="col-xs-12 col-sm-9 col-md-9 col-lg-9">
<input type="file" name="pic">
</div>
</div>
</div>
<div class="modal-footer">
<div class="row">
<div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">
<!-- empty space -->
</div>
<div class="col-xs-12 col-sm-9 col-md-9 col-lg-9">
<button type="button" class="member-update-button wp-core-ui button-primary" id="remv-btn">Remove</button>
<button type="button" class="member-update-button wp-core-ui button-primary">Add</button>
</div>
</div>
</div>
<input type="hidden" name="memberAction" value="" />
</div>
</div>
</div>
</form>
and the JS to handle the button clicked on the form
jQuery('.member-update-button').click( function() {
var parentForm = jQuery(this).closest('form');
var formUrl = parentForm.attr('action');
var formMethod = parentForm.attr('method');
var postData = parentForm.serializeArray();
jQuery.ajax(
{
url: formUrl,
type: formMethod,
dataType: 'json',
data: postData,
success: function(retmsg)
{
alert(retmsg); // test for now
},
error: function ( )
{
alert("error"); // test for now
}
}
);
} );
and the PHP function at the bottom of the page
<?php
function member_update()
{
$message = '';
$message .= 'Action : ' . $_POST['memberAction'] . '. ';
$message .= 'Name: ' . $_POST['fullname'] . '. ';
$message .= 'Title: ' . $_POST['title'] . '. ';
$message .= 'Biography: ' . $_POST['bio'] . '. ';
$message .= 'Sort order: ' . $_POST['sord'] . '. ';
$targetFileName = basename($_FILES['pic']['name']);
$targetFileNameAndPath = 'assets/' . $targetFileName;
$message .= 'Target file: ' . $targetFileName . '. ';
$message .= 'Target file (with path): ' . $targetFileNameAndPath . '. ';
$thismbr = new TeamMember($_POST['fullname'], $_POST['title'], $_POST['bio'], $_POST['sord'], $targetFileName);
$thisAction = $_POST['memberAction'];
if ($thisAction == 'add')
{
$addMemberResult = $T->addMember($thismbr);
if ($addMemberResult->succeeded)
{
$message .= "Successfully added member to list\n";
if (move_uploaded_file($_FILES['pic']['tmp_name'], $targetFileNameAndPath))
{
$message .= "Successfully added " . $targetFileName . " to assets folder\n";
}
else
{
$message .= "Encountered problem when trying to add " . $targetFileName . " to assets folder\n";
}
}
else
{
$message .= "";
}
}
elseif ($thisAction == 'update')
{
// ...
}
elseif ($thisAction == 'delete')
{
// ...
}
else
{
$message .= 'Didn\'t recognize action';
}
echo json_encode($message);
}
?>
Any idea what I'm doing wrong?
jQuery('.member-update-button').click( function() {
var parentForm = jQuery(this).closest('form');
var postData = parentForm.serializeArray();
jQuery.ajax({
url: "<?php echo admin_url('admin-ajax.php'); ?>",
data: {action: 'member_update', postData: postData},
type: "POST",
dataType: 'json',
success: function(retmsg)
{
alert(retmsg); // test for now
},
error: function ( )
{
alert("error"); // test for now
}
});
});
try this...

Categories