From your code, it doesn't look like you are sending a Submit
variable in your ajax data. If that is the case, then your PHP will fail your initial if
statement. You could try to add a print_r($_POST);
at the beginning of your PHP and then watch the browser console to see what PHP is receiving.
I cannot get my webform to send (php, javascript)
-
20-07-2023 - |
Question
I do not receive any emails when my webform is filled out. It does not give me any errors. Code posted below:
HTML form:
<div class="col-md-6">
<h3>General Questions? <p class="h4">Use our form.</p></h3>
<address>Required fields are marked with an *.</address>
<div class="col-md-12">
<form data-toggle="validator" role="form" class="form-horizontal" id="contactForm">
<!-- Name-->
<div class="form-group">
<label for="inputName" class="control-label"><span class="glyphicon glyphicon-user">
</span> Name * </label><input type="text" class="form-control" id="inputName"
placeholder="What's your name?" data-errors="We need to know what to call you!" required>
<div class="help-block with-errors"></div>
</div>
<!-- Email-->
<div class="form-group">
<label for="inputEmail" class="control-label"><span class="glyphicon glyphicon-
envelope"></span> Email *</label>
<input type="email" class="form-control" id="inputEmail" placeholder="example@example.com"
data-errors="This email address is invalid" required>
<div class="help-block with-errors"></div>
</div>
<!-- Phone Number-->
<div class="form-group">
<label for="inputNumber" class="control-label"><span class="glyphicon glyphicon-phone-
alt"></span> Phone Number</label>
<input type="text" class="form-control" id="inputNnumber" data-minlength="9"
placeholder="(123) 867-5309">
</div>
<!-- Textarea -->
<div class="form-group">
<label for="inputMessage" class="control-label"><span class="glyphicon glyphicon-pencil">
</span> Message *</label>
<textarea rows="8" class="form-control" placeholder="How can we help?" data-errors="We
can't help if you don't tell us how!" required>
</textarea>
<div class="help-block with-errors"></div>
</div>
<!-- Select Basic -->
<div class="control-group text-center">
<span><span class="glyphicon glyphicon-question-sign"></span> <strong>How should we
contact you?</strong></span><br>
<input type="radio" name="contact" value="phone"> by phone
<input type="radio" name="contact" value="email"> by email
</div>
<!-- Button -->
<br>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-sm btn-block">Submit</button>
</div>
</form>
</div>
</div>
Javacript: (it's at devnew.company.com/mail.php and will eventually be at company.com/mail.php. Am I correct in leaving it at /mail.php here?)
var mailUrl = "/mail.php";
var formId = "contactForm";
var completeHTML = ' <div class="alert alert-primary"> Sent! Thanks, we will be in touch
soon. </div> ';
function submitForm(){
$.ajax({
url : mailUrl,
type: 'post',
data:{
inputName : $('#inputName').val(),
inputEmail : $('#inputEmail').val(),
inputNumber : $('#inputNumber').val(),
inputMessage : $('#inputMessage').val(),
contact : $('input[name="contact"]:checked').val()
}
});
}
$(function(){
$('#contactForm').submit(function(){
submitForm();
$(this).html( completeHTML );
return false;
})
})
PHP
<?php
if (isset($_POST['Submit'])) {
if ($_POST['inputName'] != "") {
$_POST['inputName'] = filter_var($_POST['inputName'], FILTER_SANITIZE_STRING);
if ($_POST['inputName'] == "") {
$errors .= 'Please enter a valid name.<br/><br/>';
}
} else {
$errors .= 'Please enter your name.<br/>';
}
if ($_POST['inputEmail'] != "") {
$email = filter_var($_POST['inputEmail'], FILTER_SANITIZE_EMAIL);
if (!filter_var($inputEmail, FILTER_VALIDATE_EMAIL)) {
$errors .= "$inputNumber is not a valid email address.<br/><br/>";
}
} else {
$errors .= 'Please enter your email address.<br/>';
}
if ($_POST['inputNumber'] != "") {
$homepage = filter_var($_POST['inputNumber'], FILTER_SANITIZE_NUMBER_INT);
if ($_POST['inputNumber'] == "") {
$errors .= "Please enter 9 digits.<br/><br/>";
}
} else {
$errors .= 'Please enter your phone number.<br/>';
}
if ($_POST['inputMessage'] != "") {
$_POST['inputMessage'] = filter_var($_POST['inputMessage'],
FILTER_SANITIZE_STRING);
if ($_POST['inputMessage'] == "") {
$errors .= 'Please enter a message to send.<br/>';
}
} else {
$errors .= 'Please enter a message to send.<br/>';
}
if ($_POST['radio'] != "") {
$_POST['radio'] = filter_var($_POST['radio'], FILTER_SANITIZE_STRING);
if ($_POST['inputName'] == "") {
$errors .= 'Please choose an option.<br/><br/>';
}
} else {
$errors .= 'Please choose one.<br/>';
}
if (!$errors) {
$mail_to = 'rnunley@remedypartners.com';
$subject = 'New Mail from Form Submission';
$message = 'From: ' . $_POST['inputName'] . "\n";
$message .= 'Email: ' . $_POST['inputEmail'] . "\n";
$message .= 'Homepage: ' . $_POST['inputNumber'] . "\n";
$message .= "Message:\n" . $_POST['inputMessage'] . "\n\n";
$message .= 'Contact choice: ' . $_POST['radio'] . "\n";
mail($to, $subject, $message);
echo "Thank you for your email, we'll be in touch!<br/><br/>";
} else {
echo '<div style="color: red">' . $errors . '<br/></div>';
}
}
?>
Solution
OTHER TIPS
It could be that your javascript thinks that the variables you are trying to pass are being read as non existent javascript vars below is what maybe could work
$.ajax({
url : mailUrl,
type: 'post',
data:{
"inputName" : $('#inputName').val(),
"inputEmail" : $('#inputEmail').val(),
"inputNumber" : $('#inputNumber').val(),
"inputMessage" : $('#inputMessage').val(),
"Submit" : "TRUE",
"contact" : $('input[name="contact"]:checked').val()
},success: function (data) {
alert(data);
}
});
and add this on the beginning of your mail.php
foreach($_POST as $key => $value){
$content .= $key.' : '.$value;
}
echo $content
Too see what you are recieving on your mailurl
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow