CODEWITHSUNDEEP
phpjqueryajaxwordpress
Alex Knopp
Alex Knopp

Reputation: 935

Add a number of input fields based on a dynamic value in PHP

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.

Upvotes: 1

Views: 1392

Answers (1)

Alex Babak
Alex Babak

Reputation: 489

Yep, you can use a loop and an array to store each day input (pay attentiona at [] in the input name):

for ( $i = 0; $i <= $days; $i++ ) {
  echo '<input name="day_cource[]">';
}

Upvotes: 1

Related Questions