CODEWITHSUNDEEP
phpjqueryhtmlsqldatepicker
Chris
Chris

Reputation: 37

How to send multiple jQuery datepicker values to a database

I am creating a website that facilitates setting a meeting time for a group of people, very much like WhenIsGood.

When creating a new meeting, users start by inputting the dates that a meeting could possibly occur (using a jQuery datepicker with form inputs). The form starts with three fields, but users can add more as needed. My question is, how can I store the date values so that they can be used later? The values will be used again in the meeting creation process when users have to select a time range for each submitted date value. Also, the final tentative schedule (days submitted and time ranges submitted) will need to be made available to group members. I know, this is pretty abstract at the moment, and I'll be more than happy to give more details if necessary. Here is the page in question.

My main concern is figuring out how to store the values without knowing how many values there will be. If anyone could point me in the right direction, I would greatly appreciate it. I have a SQL database that I have set up and am using. I assume the data would be stored there since, you know, it's a database. Or if there's a better way, that's cool too. Thanks in advance.

<?php 
include 'core/init.php';
//protect_page();
include 'includes/overall/header.php'; 
?>    

      <form action="sendemail.php" method="post">
      <link rel="stylesheet" href="css/jquery-ui.css" />
      <script src="js/jquery-1.9.1.js"></script>
      <script src="js/jquery-ui.js"></script>
      <script>
           $(document).ready(function() {
                var count = 4;
                $(".datepicker").datepicker({ dateFormat: 'yy-mm-dd', minDate: '+0D', numberOfMonths: 2});
                $( 'input[type="text"]' ).datepicker();

                $("#addDate").click(function(){
                     $('#dateholder').append('<p>Date: <input id="dp' + count + '" type="text" class="datepicker" /></p>');
                     count++;
                     $(".datepicker").datepicker({ dateFormat: 'yy-mm-dd', minDate: '+0D', numberOfMonths: 2});
                     $( 'input[type="text"]' ).datepicker();
                });
           });               
      </script>

      <h1>Create a Meeting</h1>
      <div style="display: inline-block; margin-left: 20%;">
      <div id="dateholder" style="text-align:center;">
           <p>Date: <input id="dp1" type="text" class="datepicker" /></p>
           <p>Date: <input id="dp2" type="text" class="datepicker" /></p>
           <p>Date: <input id="dp3" type="text" class="datepicker" /></p>
      </div>
      <div style="text-align:center;">
           <p><input type="button" value="Add Date" id="addDate" /> <input type="submit" value="Submit Dates"/></p>
      </div>
      </div>
      </form>

<?php include 'includes/overall/footer.php'; ?>

Upvotes: 2

Views: 2953

Answers (2)

Lito
Lito

Reputation: 2328

You can replace

<p>Date: <input id="dp1" type="text" class="datepicker" /></p>
<p>Date: <input id="dp2" type="text" class="datepicker" /></p>
<p>Date: <input id="dp3" type="text" class="datepicker" /></p>

with

<p>Date: <input name="dp[]" type="text" class="datepicker" /></p>

After you can read in PHP page:

<?php 
   for ($i = 0; $i < count($_POST['dp']); $i++){
       echo $_POST['dp'][$i]."<br/>";        
   }

 ?>

Upvotes: 5

Barmar
Barmar

Reputation: 781068

Use array notation for the dtepicker names:

<input name="dp[]" type="text" class="datepicker" />

Then in PHP you can access $_POST['dp'] as an array.

Upvotes: 0

Related Questions