Good morning.
I am creating a 2 stage form in WordPress sending using ajax and wp_mail.
The purpose is to allow the user to fill in basic information about a visit to a golf course and then click a button to proceed to step 2. Step 2 will allow the user to fill in details of the courses they wish to attend based on the number of days thy will be staying.
So far I have the following.
Step 1 : Fill in the details of the users stay
<form id="booking-form">
<div class="step1">
<h4>1. Your Personal Details</h4>
<label for="name">First Name</label>
<input type="text" id="firstname">
<label for="surname">Surname</label>
<input type="text" id="surname">
<label for="phone">Telephone</label>
<input type="text" id="telephone">
<label for="phone">Mobile</label>
<input type="text" id="mobile">
<label for="phone">Email</label>
<input type="text" id="email">
<h4>Booking Details</h4>
<label for="noofgolfers">Number of Golfers</label>
<input type="number" id="noofgolfers">
<label for="arrival">Arrival Date</label>
<input type="text" id="arrival">
<label for="leaving">Departure Date</label>
<input type="text" id="leaving">
<!-- User will click here, this will send he data via ajax to wp_mail() -->
<input type="text" id="step" value="Proceed to step 2 of 2">
</div>
<div class="step2">
<h4>Please Choose Golf Course</h4>
<div id="step2content">
</div>
</div>
</form>
Collect the data and send it to the function
jQuery(document).ready(function(){
jQuery('#step').click(function() {
jQuery('.step1').fadeOut();
jQuery('.step2').fadeIn();
var firstname = jQuery('#firstname').val();
var surname = jQuery('#surname').val();
var telephone = jQuery('#telephone').val();
var mobile = jQuery('#mobile').val();
var email = jQuery('#email').val();
var noofgolfers = jQuery('#noofgolfers').val();
var arrival = jQuery('#arrival').val();
var leaving = jQuery('#leaving').val();
jQuery(function(){
jQuery.ajax({
url:"http://www.ayrshiregolf.com/wp-admin/admin-ajax.php",
type:'POST',
data:'action=bookingrequest&firstname=' + firstname +
'&surname=' + surname +
'&telephone=' + telephone +
'&mobile=' + mobile +
'&email=' + email +
'&noofgolfers=' + noofgolfers +
'&arrival=' + arrival +
'&leaving=' + leaving,
success:function(result){
//got it back, now apply the returned HTML to #step2content
console.log(result);
}
});
});
});
});
Function that sends the mail and calculates the number of fields required to add to the stage 2 form.
function implement_ajax_bookingrequest(){
if(isset($_POST['firstname']))
{
//gets all the posted values from the form
$firstname = ($_POST['firstname']);
$surname = ($_POST['surname']);
$telephone = ($_POST['telephone']);
$mobile = ($_POST['mobile']);
$email = ($_POST['email']);
$noofgolfers = ($_POST['noofgolfers']);
$arrival = ($_POST['arrival']);
$leaving = ($_POST['leaving']);
//construct the email
$message = '
<html>
<head>
<title>Birthday Reminders for August</title>
</head>
<body>
<h2>Booking Confirmation From ' . $firstname . ' ' . $surname . '</h2>
<table width="500">
<tr>
<td>Telephone</td>
<td>' . $telephone . '</td>
</tr>
<tr>
<td>Mobile</td>
<td>' . $mobile . '</td>
</tr>
<tr>
<td>Email</td>
<td>' . $email . '</td>
</tr>
<tr>
<td>Number of golfers</td>
<td>' . $noofgolfers . '</td>
</tr>
<tr>
<td>Arrival</td>
<td>' . $arrival . '</td>
</tr>
<tr>
<td>Departure</td>
<td>' . $leaving . '</td>
</tr>
</table>
</body>
</html>
';
//send the email
$to = '[email protected]';
$subject = 'Booking confirmation ' . $firsname . ' ' . $surname;
$headers = 'MIME-Version: 1.0' . "\r\n";
$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
$headers .= 'From: Ayrshire Golf Website' . "\r\n";
wp_mail( $to, $subject, $message, $headers);
}
//count the number of days
$date1=date_create($arrival);
$date2=date_create($leaving);
$diff=date_diff($date1,$date2);
$days = $diff->format("%a");
//run a loop to echo out an input for each of the days.
die();
}
add_action('wp_ajax_bookingrequest', 'implement_ajax_bookingrequest');
add_action('wp_ajax_nopriv_bookingrequest', 'implement_ajax_bookingrequest');
I would like to function to count the number of days (got that bit) then run a loop (which im guessing is my best option) that will echo a select field for each of the calculated $days. This is where Im getting stuck, I think my theory is right but I’m not sure on the syntax.
Any help would be appreciated, thanks.
