I am having trouble in updating record using Ajax.
HTML & JS
<div class="row">
<form role="form" action="" type="post" id="abcdform">
<div class="col-md-3">
<div class="form-group">
<label for="date">Date</label>
<input type="date" class="form-control" id="date" name="date" placeholder="mm/dd/yyy" tabindex="1" value="<?php echo $dr->date; ?>">
</div>
<div class="form-group">
<label for="chats_init_customer">Chat Initiated by Customer</label>
<input type="number" class="form-control" id="chats_init_customer" name="chats_init_customer" placeholder="eg:5" tabindex="2" value="<?php echo $dr->chats_init_customer; ?>">
</div>
<div class="form-group">
<label for="emails_in">Emails Incomming</label>
<input type="number" class="form-control" id="emails_in" name="emails_in" placeholder="eg:5" tabindex="3" value="<?php echo $dr->emails_in; ?>">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="emails_out">Emails Outgoing</label>
<input type="number" class="form-control" id="emails_out" name="emails_out" placeholder="eg:5" tabindex="4">
</div>
<div class="form-group">
<label for="tickets_open">Tickets at Opening</label>
<input type="number" class="form-control" id="tickets_open" name="tickets_open" placeholder="eg:5" tabindex="5">
</div>
<div class="form-group">
<label for="tickets_closed">Tickets Closed</label>
<input type="number" class="form-control" id="tickets_closed" name="tickets_closed" placeholder="eg:5" tabindex="6">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="tickets_remain">Tickets Remaining Open</label>
<input type="number" class="form-control" id="tickets_remain" name="tickets_remain" placeholder="eg:5" tabindex="7">
</div>
<div class="form-group">
<label for="calls_taken">Calls Taken</label>
<input type="number" class="form-control" id="calls_taken" name="calls_taken" placeholder="eg:5" tabindex="8">
</div>
<div class="form-group">
<label for="calls_abandon">Calls Abandon</label>
<input type="number" class="form-control" id="calls_abandon" name="calls_abandon" placeholder="eg:5" tabindex="9">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="calls_avg_length">Calls Average Length</label>
<input type="number" class="form-control" id="calls_avg_length" name="calls_avg_length" placeholder="eg:5" tabindex="10">
</div>
<div class="form-group">
<label for="chats_total">Total Chats</label>
<input type="number" class="form-control" id="chats_total" name="chats_total" placeholder="eg:5" tabindex="11">
</div>
<div class="form-group">
<label for="sales">Sales</label>
<input type="number" class="form-control" id="sales" name="sales" placeholder="eg:5" tabindex="12">
</div>
<div class="feedback hidden-md hidden-lg"></div>
<input type="hidden" name="action" value="edit_daily_report">
<input type="submit" value="Update" id="abcdsubmit" class="btn btn-primary pull-right" tabindex="13">
<div id="process" class="loader pull-right"><img src="<?php echo abcd_root_url('css/images/loader.gif');?>" alt="loader" /></div>
</div>
</form>
</div>
<script type="text/javascript">
jQuery('#abcdform').submit(ajaxSubmit);
function ajaxSubmit() {
var abcdform = jQuery(this).serialize();
jQuery('#abcdsubmit').attr('disabled', true);
jQuery('#process').show();
jQuery.ajax({
type: "POST",
url: "<?php echo site_url(); ?>/wp-admin/admin-ajax.php",
data: abcdform,
success: function(data) {
jQuery(".feedback").html('<span class="glyphicon glyphicon-saved"></span> ' + data).addClass('alert alert-success');
jQuery('#process').hide();
jQuery('#abcdsubmit').attr('disabled', false);
}
});
return false;
}
</script>
Function
function edit_daily_report()
{
global $wpdb;
$date = $_POST['date'];
$conditionValue = array('id' => 19);
if ($wpdb->update('hf_abcd_daily_report', array('date' => $date), array('id' => 19)) === FALSE){
echo "Error";
} else {
echo "Record successfully added to the database. Record id is <strong>$wpdb->insert_id</strong>";
}
die();
}
When I hit Update button, it does nothing after form submit. Please ignore all fields in the form and only consider date field.
you should have ajax actions to work it with wordpress
add_action( 'wp_ajax_my_action', 'edit_daily_report' );
add_action( 'wp_ajax_nopriv_my_action', 'edit_daily_report' );
Related
When a button is clicked, I am using AJAX to display a PHP modal, with a form inside it. It is an edit form so the fields are filled in with data received from AJAX calling a PHP function via a handler. However I need a way for a select input to know which one is selected but, the data to use for that is in JavaScript. Usually I would use a function such as
$occasionTypes = getPublishedOccasionTypes($connection);
if($occasionTypes != NULL){
foreach ($occasionTypes as $occasionType) {
$selected = (isset($booking['reservation_type']) && ($booking['reservation_type'] == $occasionType['id'])) ? 'selected' : NULL;
$occasionSelect .= '<option value='.$occasionType['id'].' '.$selected.'>'.$occasionType['name'].'</option>';
}
}
But in this case, $booking['reservation_type] is useless because the actual value I need is in an input (a hidden one I created) but being filled by JavaScript. Anyone any ideas? Here is my JavaScript also
$.ajax({
type: 'POST',
url: "/modules/ajax/ajax_handler.php",
data: data
})
.done((result)=>{
result = JSON.parse(result);
console.log(result);
$('#firstName').val(result.customer_first_name);
$('#lastName').val(result.customer_last_name);
$('#email').val(result.customer_email);
$('#number').val(result.customer_mobile);
$('#date').val(result.reservation_date);
$('#time').val(result.reservation_time);
$('#size').val(result.party_size);
$('#occasion').val(result.occasion_type);
$('#comment').val(result.special_requirements);
$('#code').val(pcode);
$('#customerCode').val(result.customer_code);
$('#editModal').modal('show');
})
MODAL
$modalpopup =
'
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Edit Booking</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<form id="editBooking" class="form form-horizontal" method="post" enctype="multipart/form-data">
<div class="modal-body">
<div class="form-group">
<label>First Name</label>
<input type="text" class="form-control" name="firstName" id="firstName" placeholder="" required>
</div>
<div class="form-group">
<label>Last Name</label>
<input type="text" class="form-control" name="lastName" id="lastName" placeholder="" required>
</div>
<div class="form-group">
<label>Email</label>
<input type="email" class="form-control" name="email" id="email" placeholder="" required>
</div>
<div class="form-group">
<label>Phone Number</label>
<input type="text" class="form-control" name="number" id="number" placeholder="" required>
</div>
<div class="form-group">
<label>Date</label>
<input type="date" class="form-control" name="date" id="date" placeholder="" required>
</div>
<div class="form-group">
<label>Time</label>
<select id="time" name="time" class="form-control" required>
<option value="">Please select ...</option>
'.$timeSelect.'
</select>
</div>
<div class="form-group">
<label>Party Size</label>
<input type="number" class="form-control" name="size" id="size" placeholder="" required>
</div>
<div class="form-group">
<label>Occasion</label>
<select id="occasion" name="occasion" class="form-control" required>
<option value="" selected>Please select</option>
'.$occasionSelect.'
</select>
</div>
<div class="form-group">
<label>Status</label>
<select class="form-control" name="status" id="status" placeholder="">
<option value="accepted">Accepted</option>
<option value="not-accepted">Not Accepted</option>
</select>
</div>
<div class="form-group">
<label>Comment</label>
<textarea type="text" class="form-control" name="comment" id="comment" placeholder=""></textarea>
</div>
<input type="hidden" class="form-control" name="code" id="code" placeholder="">
<input type="hidden" class="form-control" name="customerCode" id="customerCode" placeholder="">
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Edit</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</form>
</div>
</div>
</div>';
I'm new in Javascript, So i try to make Submit and open Success Messege popup box, currently data post to ajax is working then i need open a success message with checkbox value. what i do for exact way to make model popup with value of checkbox after successful submission?
document.addEventListener("DOMContentLoaded", function(e) {
var a = document.getElementById("alecaddd-testimonial-form");
a.addEventListener("submit", function(e) {
e.preventDefault(), o();
var r = {
name: a.querySelector('[name="name"]').value,
email: a.querySelector('[name="email"]').value,
message: a.querySelector('[name="message"]').value,
nonce: a.querySelector('[name="nonce"]').value
};
if (r.name)
if (/^(([^<>()\[\]\\.,;:\s#"]+(\.[^<>()\[\]\\.,;:\s#"]+)*)|(".+"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(String(r.email).toLowerCase()))
if (r.message) {
var t = a.dataset.url,
s = new URLSearchParams(new FormData(a));
a.querySelector(".js-form-submission").classList.add("show"), fetch(t, {
method: "POST",
body: s
}).then(function(e) {
return e.json()
}).catch(function(e) {
o(), a.querySelector(".js-form-error").classList.add("show")
}).then(function(e) {
o(), 0 !== e && "error" !== e.status ? (a.querySelector(".js-form-success").classList.add("show"), a.reset()) : a.querySelector(".js-form-error").classList.add("show")
})
} else a.querySelector('[data-error="invalidMessage"]').classList.add("show");
else a.querySelector('[data-error="invalidEmail"]').classList.add("show");
else a.querySelector('[data-error="invalidName"]').classList.add("show")
})
})
<div class="package-container">
<form id="alecaddd-testimonial-form" class="zon-form" action="#" method="post" data-url="<?php echo admin_url('admin-ajax.php'); ?>">
<div id="clmn3">
<div class="cnt">
<div class="row" style="background: url(<?php print $picture; ?>);">
<h3>
<?php echo esc_attr( $budget ); ?>
</h3>
<label class="zon-container"><p>2 Nights 3 Days: 3399</p>
<input class="chb" type="checkbox" name="package[]" value="3000" checked="checked">
<span class="checkmark"></span>
</label>
<label class="zon-container"><p>3 Nights 4 Days : 4399</p>
<input class="chb" type="checkbox" name="package[]" value="4000">
<span class="checkmark"></span>
</label>
<label class="zon-container"><p>4 Nights 5 Days : 5399</p>
<input class="chb" type="checkbox" name="package[]" value="5000">
<span class="checkmark"></span>
</label>
</div>
</div>
<div class="zon-input-fields">
<div class="field-container">
<input type="text" class="field-input" placeholder="Adult" id="name" name="name" required>
<small class="field-msg error" data-error="invalidName">Your Name is Required</small>
</div>
<div class="field-container">
<input type="text" class="field-input" placeholder="Adult" id="adult" name="adult" required>
<small class="field-msg error" data-error="invalidName">Your Name is Required</small>
</div>
<div class="field-container">
<input type="email" class="field-input" placeholder="Child" id="email" name="email" required>
<small class="field-msg error" data-error="invalidEmail">The Email address is not valid</small>
</div>
<div class="field-container">
<input type="text" class="field-input" placeholder="infant" id="infant" name="message" required>
<small class="field-msg error" data-error="invalidName">Your Name is Required</small>
</div>
<div class="field-container">
<input type="date" class="field-input" placeholder="date" id="date" name="date" required>
<small class="field-msg error" data-error="invalidEmail">The Email address is not valid</small>
</div>
<div class="field-container">
<input type="phone" class="field-input" placeholder="phone" id="phone" name="phone" required>
<small class="field-msg error" data-error="invalidEmail">The Email address is not valid</small>
</div>
<div class="field-container">
<input type="price" class="field-input" placeholder="price" id="price" name="price" required>
<small class="field-msg error" data-error="invalidEmail">The Email address is not valid</small>
</div>
<div class="field-container">
<input type="submit" name="submit" class='btn'>
</div>
<div class="field-container">
<small class="field-msg js-form-submission">Submission in process, please wait…</small>
<small class="field-msg success js-form-success">Message Successfully submitted, thank you!</small>
<small class="field-msg error js-form-error">There was a problem with the Contact Form, please try again!</small>
<input type="hidden" name="action" value="submit_testimonial">
<input type="hidden" name="nonce" value="<?php echo wp_create_nonce(" testimonial-nonce ") ?>"> </form>
</div>
</div>
</div>
Any help,as always, is greatly appreciated.
move
a.querySelector(".js-form-submission").classList.add("show")
before
return e.json()
I've tried implementing this snippet into my web page and for some reason the buttons aren't responsive and don't toggle between active/notActive when clicked. It works fine in my jsFiddle, but the same code doesn't work on my web page. I have the proper imports for JQuery and Bootstrap because the rest of my form utilizes tools using these frameworks and are working properly. Any suggestions on what could be going wrong? Here's the fiddle
http://jsfiddle.net/collint25/4pq266cz/. I won't post the JavaScript or CSS just because it'd be copied verbatim from the fiddle.
<div class="form form-horizontal">
<div class="panel panel-success">
<div class="panel-heading">Submitter's Information</div>
<div class="panel-body">
<div class="form-group">
<label for="subName" class="col-sm-3 control-label">Name:</label>
<div class="col-sm-8">
<input type="text" class="form-control" name="subName" id="subName" value="<?php echo $name ?>" maxlength="50" readonly="readonly" required>
</div>
</div>
<div class="form-group" style="display: none">
<label for="subTitle" class="col-sm-3 control-label">Title:</label>
<div class="col-sm-8">
<input type="text" class="form-control" name="subTitle" id="subTitle" placeholder="Title" value="<?php echo $title ?>" maxlength="50" required>
</div>
</div>
<div class="form-group" style="display: none">
<label for="subDept" class="col-sm-3 control-label">Department:</label>
<div class="col-sm-8">
<input type="text" class="form-control" data-validation="required" name="subDept" id="subDept" placeholder="Department:" value="<?php echo $department ?>" maxlength="20">
</div>
</div>
<div class="form-group" style="display:none;">
<label for="subGUID" class="col-sm-3 control-label">AU Email/GUID:</label>
<div class="col-sm-8">
<input type="text" class="form-control" name="subGUID" id="subGUID" data-validation="email" data-validation-error-msg="You did not enter a valid e-mail" value="<?php echo $wouserid . "#auburn.edu" ?>" maxlength="50">
</div>
</div>
<div class="form-group">
<label for="subPhone" class="col-sm-3 control-label">Phone Number:</label>
<div class="col-sm-8">
<input type="text" class="form-control" data-validation="required" name="subPhone" id="subPhone" placeholder="Phone Number" value="<?php echo $phone ?>" maxlength="20">
</div>
</div>
<div class="form-group">
<label for="subSupervisor" class="col-sm-3 control-label">Are you the Nominee’s Direct Supervisor?</label>
<div class="col-sm-8">
<div class="input-group">
<div id="radioBtn" class="btn-group">
<a class="btn btn-primary btn-sm active" data-toggle="happy" data-title="Y">YES</a>
<a class="btn btn-primary btn-sm notActive" data-toggle="happy" data-title="N">NO</a>
</div>
<input type="hidden" name="happy" id="happy">
</div>
</div>
</div>
</div>
</div>
</div>
I solved my issue in snippet but when i using it on my website is not applying means when i click the No radio button the pro div is not closing but here in snippet is working even no errors in console.
Please anyone have other solution to similar like this one. Thanks.
Updated with full code:
now not working here also there are two pro div should be close on No and open on YES
function ShowHideDiv() {
var chkYes = document.getElementById("chkYes");
var pro = document.getElementsByClassName("pro");
for (var i = pro.length - 1; i >= 0; i--) {
pro[i].style.display = chkYes.checked ? "block" : "none";
}
}
$('input[type="radio"]').change(function () {
$(this).nextAll('.pro').toggle(this.value == 'Yes');
}).change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<form id="add_form" method="post" enctype="multipart/form-data" action="<?php echo site_url('contacts/save'); ?>">
<div class="row">
<div class="col-lg-6">
<h4>English</h4>
<div class="form-group">
<label>Category:</label>
<select id="contact_type" class="chosen-select required" multiple tabindex="6" name="contact_type[]">
<option value=""></option>
<?php foreach ($getSubCat as $key => $value) {?>
<option value="<?php echo $value['Sub_Category_Name'] ?>"><?php echo $value['Sub_Category_Name'] ?></option>
<? } ?>
</select>
</div>
<div class="form-group">
<input class="form-control required" name="name" id="name" placeholder="Business Name">
</div>
<div class="form-group">
<input class="form-control required" name="number1" id="number1" placeholder="Contact Number 1">
</div>
<div class="form-group">
<input class="form-control required" name="number2" id="number2" placeholder="Contact Number 2">
</div>
<div class="form-group">
<input class="form-control required" name="owner" id="owner" placeholder="Owner Name">
</div>
<div class="form-group">
<textarea class="form-control required" rows="3" name="address" id="address" placeholder="Address"></textarea>
</div>
<div>
<div class="form-group ">
<select id="location" class="form-control required" name="location" >
<option value="">Select Location</option>
<?php
foreach ($getLoc as $key => $value) {
$location = $value['location_name']; ?>
<option value="<?php echo $location; ?>"> <?php echo $location; ?> </option>
<?php } ?>
</select>
</div>
</div>
<div class="form-group">
<div class="typediv">
<label><input type="radio" name="type" value="1"> Free</label>
<label><input type="radio" name="type" value="2"> Paid</label>
<label><input type="radio" name="type" value="3"> Emergancy</label>
</div>
</div>
<div class="2 box"></div>
<div class="3 box"></div>
<div class="form-group 2 box" style="display:none">
<input type="date" class="required" name='durability' id="datepicker" value="" >
</div>
<div class="form-group isprocontactdiv">
<label>Is Pro Contact </label>
Yes<input type="radio" id="chkYes" name="isprocontact" value="Yes" onclick="ShowHideDiv()">
No<input type="radio" id="chkNo" name="isprocontact" value="No" checked="">
</div>
<div class="pro" style="display: none;" >
<div class="form-group">
<input class="form-control required" name="email" placeholder="Email" >
</div>
<div class="form-group" >
<input type="file" name="userfile">
</div>
<div class="form-group">
<textarea class="form-control required" id="description" name="description" rows="3" placeholder="Description" ></textarea>
</div>
<div class="form-group">
<textarea class="form-control required" id="services" rows="3" name="services" placeholder="Services" ></textarea>
</div>
</div>
</div>
<div class="col-lg-6">
<h4>Marathi</h4>
<div class="form-group">
<input class="form-control required" name="name_marathi" id="name_marathi" placeholder="व्यवसाय">
</div>
<div class="form-group">
<input class="form-control required" name="contact_owner_marathi" id="contact_owner_marathi" placeholder="मालकाचे नाव">
</div>
<div class="form-group">
<textarea class="form-control required" name="contact_address_marathi" id="contact_address_marathi" rows="3" placeholder="पत्ता"></textarea>
</div>
<div class="pro" style="display:none">
<div class="form-group">
<textarea class="form-control required" name="description_marathi" id="description_marathi" rows="3" placeholder="सविस्तर माहिती"></textarea>
</div>
<div class="form-group">
<textarea class="form-control required" rows="3" name="service_marathi" id="service_marathi" placeholder="सुविधा"></textarea>
</div>
</div>
</div>
</div>
<!-- /.row -->
<button type="submit" class="btn btn-success">Submit</button>
<button type="reset" class="btn btn-warring">Reset</button>
</form>
</div>
This might be your answer, ShowHideDiv() function because it is a little bit double to make a javascript function and using jQuery to do the same thing.
Also be careful with this
$("input[name='isprocontact']").change(function () {
if(this.value == 'Yes'){
$('.pro').show();
}else{
$('.pro').hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<form id="add_form" method="post" enctype="multipart/form-data" action="<?php echo site_url('contacts/save'); ?>">
<div class="row">
<div class="col-lg-6">
<h4>English</h4>
<div class="form-group">
<label>Category:</label>
<select id="contact_type" class="chosen-select required" multiple tabindex="6" name="contact_type[]">
<option value=""></option>
<?php foreach ($getSubCat as $key => $value) {?>
<option value="<?php echo $value['Sub_Category_Name'] ?>"><?php echo $value['Sub_Category_Name'] ?></option>
<? } ?>
</select>
</div>
<div class="form-group">
<input class="form-control required" name="name" id="name" placeholder="Business Name">
</div>
<div class="form-group">
<input class="form-control required" name="number1" id="number1" placeholder="Contact Number 1">
</div>
<div class="form-group">
<input class="form-control required" name="number2" id="number2" placeholder="Contact Number 2">
</div>
<div class="form-group">
<input class="form-control required" name="owner" id="owner" placeholder="Owner Name">
</div>
<div class="form-group">
<textarea class="form-control required" rows="3" name="address" id="address" placeholder="Address"></textarea>
</div>
<div>
<div class="form-group ">
<select id="location" class="form-control required" name="location" >
<option value="">Select Location</option>
<?php
foreach ($getLoc as $key => $value) {
$location = $value['location_name']; ?>
<option value="<?php echo $location; ?>"> <?php echo $location; ?> </option>
<?php } ?>
</select>
</div>
</div>
<div class="form-group">
<div class="typediv">
<label><input type="radio" name="type" value="1"> Free</label>
<label><input type="radio" name="type" value="2"> Paid</label>
<label><input type="radio" name="type" value="3"> Emergancy</label>
</div>
</div>
<div class="2 box"></div>
<div class="3 box"></div>
<div class="form-group 2 box" style="display:none">
<input type="date" class="required" name='durability' id="datepicker" value="" >
</div>
<div class="form-group isprocontactdiv">
<label>Is Pro Contact </label>
Yes<input type="radio" id="chkYes" name="isprocontact" value="Yes" >
No<input type="radio" id="chkNo" name="isprocontact" value="No" checked="">
</div>
<div class="pro" style="display: none;" >
<div class="form-group">
<input class="form-control required" name="email" placeholder="Email" >
</div>
<div class="form-group" >
<input type="file" name="userfile">
</div>
<div class="form-group">
<textarea class="form-control required" id="description" name="description" rows="3" placeholder="Description" ></textarea>
</div>
<div class="form-group">
<textarea class="form-control required" id="services" rows="3" name="services" placeholder="Services" ></textarea>
</div>
</div>
</div>
<div class="col-lg-6">
<h4>Marathi</h4>
<div class="form-group">
<input class="form-control required" name="name_marathi" id="name_marathi" placeholder="व्यवसाय">
</div>
<div class="form-group">
<input class="form-control required" name="contact_owner_marathi" id="contact_owner_marathi" placeholder="मालकाचे नाव">
</div>
<div class="form-group">
<textarea class="form-control required" name="contact_address_marathi" id="contact_address_marathi" rows="3" placeholder="पत्ता"></textarea>
</div>
<div class="pro" style="display:none">
<div class="form-group">
<textarea class="form-control required" name="description_marathi" id="description_marathi" rows="3" placeholder="सविस्तर माहिती"></textarea>
</div>
<div class="form-group">
<textarea class="form-control required" rows="3" name="service_marathi" id="service_marathi" placeholder="सुविधा"></textarea>
</div>
</div>
</div>
</div>
<!-- /.row -->
<button type="submit" class="btn btn-success">Submit</button>
<button type="reset" class="btn btn-warring">Reset</button>
</form>
</div>
your question isn't really clear but if you want ide form when you click no you can process like that e.g:
var $chkNo = $('#chkNo');
var $chkYes = $('#chkYes');
var $proform = $('.pro');
$chkNo.on('click',function(){
$proform.css('display','none') // or you can play with visibility property
});
$chkYes.on('click',function(){
$proform.css('display','block') // or you can play with visibility property
});
I've got a Bootstrap 3 form on my website. The form sends messages fine, however when the user submits the form the fields aren't clearing afterwards - how do I fix this?
This is the 'contact.php' code below.
Link to the 'contact_me.js' https://jsfiddle.net/wookie/6uag6goe/
<form class="form-horizontal" role="form" method="post" action="contact.php">
<div class="form-group">
<label for="name" class="control-label">Name</label>
<input type="text" class="form-control" id="name" name="name" placeholder="First & Last Name" value="<?php echo htmlspecialchars($_POST['name']); ?>">
<?php echo "<p class='text-danger'>$errName</p>";?>
</div>
<div class="form-group">
<label for="email" class="control-label">Email</label>
<input type="email" class="form-control" id="email" name="email" placeholder="example#domain.com" value="<?php echo htmlspecialchars($_POST['email']); ?>">
<?php echo "<p class='text-danger'>$errEmail</p>";?>
</div>
<div class="form-group">
<label for="service" class="control-label">Service</label>
<select class="form-control" id="service" name="service">
<option>Please select a service:</option>
<option>service1</option>
<option>service2</option>
<option>service3</option>
<option>service4</option>
<option>service5</option>
<option>service6</option>
</select>
</div>
<div class="form-group">
<label for="message" class="control-label">Message</label>
<textarea class="form-control" rows="4" name="message">
<?php echo htmlspecialchars($_POST[ 'message']);?>
</textarea>
<?php echo "<p class='text-danger'>$errMessage</p>";?>
</div>
<div class="form-group">
<label for="human" class="control-label">2 + 3 = ?</label>
<input type="text" class="form-control" id="human" name="human" placeholder="Your Answer">
<?php echo "<p class='text-danger'>$errHuman</p>";?>
</div>
<div class="form-group">
<input id="submit" name="submit" type="submit" value="Send Message" class="btn btn-lg btn-default btn-block">
</div>
<div class="form-group">
<?php echo $result; ?>
</div>
Change this
$('#contactForm').trigger("reset");
to
$('#contactForm')[0].reset();
Let your form has an id contactForm then:
$('#contactForm').on('submit', function() {
$(this).each(function() {
this.reset();
});
});
You are echoing out the posted data. You only want to do that when there is an error in the posted data.
<input type="email" class="form-control" id="email" name="email" placeholder="example#domain.com" value="<?php echo htmlspecialchars($_POST['email']); ?>">
However you are doing your server side error detection you need to only do the echo above if there is an error. Say you store a $isError variable then you would change this to:-
<input type="email" class="form-control" id="email" name="email" placeholder="example#domain.com" value="<?php echo $isError ?htmlspecialchars($_POST['email']) : ""; ?>">