SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Guru
    Join Date
    Jul 2003
    Location
    england
    Posts
    816
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Question PHP Reservation Form with Date Selector Script

    Scenario:
    A company wishes to have a PHP email form that will also allow users to select dates for reservations based upon a date selector script.

    I'm familiar with creating forms and sending them as emails, but I'm not familiar with how to incorporate a date selector script and processing it as well. Is there anyone able to give me some guidance. I've seen Javascript date selectors, but am not sure how to incorporate those.

  2. #2
    SitePoint Wizard silver trophybronze trophy Cups's Avatar
    Join Date
    Oct 2006
    Location
    France, deep rural.
    Posts
    6,869
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    1. Generate a html form with your date elements.

    form.php
    PHP Code:
    <form action="formaction.php" method="get">
    <select id="day" name="day">
    <?php
    $days 
    range(1,31);

    foreach (
    $days as $day){
    echo 
    "<option value=$day>$day</option>" PHP_EOL

    }
    ?>
    </select>
    <input type="submit">
    </form>
    2. When user submits the form, grab the date bits, do some validation, add the data to the body of the email

    formaction.php
    PHP Code:
    if( isset( $_GET["day"] && (int)$_GET['day'] > 0) {

    $msg "I'd enjoy some action on the "$_GET['day'] ." day of this month please" ;

    mail$to$subject$msg );


    That's the basic principle, you'd likely do a lot more validation also I'd recommend reading up on the indispensible checkdate function.
    Last edited by Cups; Jun 30, 2010 at 06:56. Reason: got 2nd arg of mail wrong - its not from

  3. #3
    SitePoint Guru
    Join Date
    Jul 2003
    Location
    england
    Posts
    816
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Question

    Thank you! That's a big help.

    Next question, do you or know of anyone who has had experience using the YUI Calendar with MySQL data? I'm looking into using this widget, but am not sure how to use it with a dataset from MySQL.

  4. #4
    SitePoint Wizard silver trophybronze trophy Cups's Avatar
    Join Date
    Oct 2006
    Location
    France, deep rural.
    Posts
    6,869
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Hi,

    No, never used it, but looking at the docs you might be able to align its native date representation (M/D/Y) with mysql (Y-M-D) by fiddling around with some YUI Cal settings;

    "MD_MONTH_POSITION - Number
    The position of the month in a month/day date string
    Default Value: 1"

    similarly with the delimeters, so that the whole thing'd go straight into your DB with very little messing around.

    Still be up to you to validate the incoming data though.

    Most JS <-> backend date transfers mean some kind of munging process, but on the face of it this one looks to be pretty easy.

    So you want to pop up a date picker, the user picks a date, you enter that into a db, and then email them some kind of confirmation.

    Is it just one date?

    Or is it for a range (2nd to 5th July) or array (2nd, 9th, 30th July) of dates?

  5. #5
    SitePoint Wizard cranial-bore's Avatar
    Join Date
    Jan 2002
    Location
    Australia
    Posts
    2,634
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Toad see if any of this code helps. I wrote it a while ago, and modified it slightly to post here (to be a bit more general in use), but haven't retested it.
    It's for YUI 2.

    Sample markup
    Code HTML:
    <div id="myContainer"></div> <!-- YUI calendar rendered here -->
     
    <input type='hidden' name='myDateField' id='myDateField'>

    captureDate function, listens to a date selection on the YUI calendar and writes the date to a form input as YYYY-MM-DD (which can go directly into a MySQL date field once you validate it server side)
    Code JavaScript:
    /**
    * Capture the selected date from a YUI calendar and assemble date into hidden form field
    * @param object cal YUI calendar instance
    * @param mixed el ID or element reference for input field to set date to
    */
    function captureDate(cal, el) {
     
    	//YUI shortcut
    	var $ = YAHOO.util.Dom.get;
     
    	//Get both elemementID (for flag reference) and actual element to store date
    	if(typeof el == 'string') {
    		elID = el;
    		el = $(el);
    	}
    	else {
    		elID = el.ID;
    	}
    	if(!el) return;
     
    	//Process selected date
    	var handleDateSelect = function(type, args, obj) {
    		var dates = args[0];
    		var date = dates[0]; //single date only (not range)
     
    		el.value = dateStamp(date[0], date[1], date[2]);
     
    		//Date stamp component for server (2010-07-02)
    		function dateStamp(y, m, d) {
    			return y + '-' + m + '-' + d;
    		}
    	};
     
    	cal.selectEvent.subscribe(handleDateSelect, cal, true);
    }

    JS to initialize the calendar and listen for date selection
    Code JavaScript:
     
    //Render Calendar
    var calConfig = {
    	start_weekday: 1,
    	navigator : true
    };
     
    var cal = new YAHOO.widget.Calendar('myContainer', calConfig);
    cal.render();
    captureDate(cal, 'myDateField');

    That should get you started. To be proper progressive enhancement the myDateField should be text (not hidden) by default and you instruct users to enter as YYYY-MM-DD. You can then use JS to change it to a hidden field and remove those instructions so that JS users use the calendar picker instead.

    This is all for a single date. If you need ranges as Cups described you'll need to hit up the YUI docs and extend this a bit.

  6. #6
    SitePoint Guru
    Join Date
    Jul 2003
    Location
    england
    Posts
    816
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Great! I'll check this out and try it!

    Thank you!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •