Question

I have 3 select boxes, one for day, month and year.

Once the user chooses their desired day, month and year they click ‘send’.

When they click send I want PHP to echo out their selection.

The code I have so far is:

<?php
$day = array(range(1,31));
$month = array(range(1,12));
$year = array(range(2011,2020));
?>
Day:
<select>
  <?php foreach($day[0]++ as $key => $value) { ?>
    <option value="<?php echo $key ?>"><?php echo $value ?></option>
  <?php }?>
</select>
<br>
Month:
<select>
  <?php foreach($month[0]++ as $key => $value) { ?>
    <option value="<?php echo $key ?>"><?php echo $value ?></option>
  <?php }?>
</select>
<br>
Year:
<select>
  <?php foreach($year[0]++ as $key => $value) { ?>
    <option value="<?php echo $key ?>"><?php echo $value ?></option>
  <?php }?>
</select>
<input type='submit' value='Send' name='poll' />

Date Selected: 

Any suggestions, improvements , links code examples would be greatly appreciated.

Answer 1

What you’re describing can’t be done with PHP alone. You need to use client side scripting to know how the user is interacting with the DOM. There are many different ways that you could accomplish this. Your best bet is to use an AJAX framework like jQuery (as mentioned above), Prototype, Dojo, or YUI. I’d probably go with jQuery, because it’s very easy to pick up if you’re used to css selectors.

First off you’d change your html a little, providing ID or Class name for the input element. And, also adding a display element, in this case a DIV. Then you could select those DOM nodes like this:

     <script>
        $( document ).ready( function () {
            $( '#send' ).click( function () {

                var span = document.createElement( 'span' );
                $( span ).attr( 'id', 'options' );

                $( 'select' ).each( function () {
                    $( span ).append($( this ).val() + " ");
                });                 

                $( '#show' ).html( span );

            });
        });
    </script>

I mocked up a quick Fiddle this: JSFIDDLE