Div click same as radio button?

Question

Is there a way to have a click event on a div act the same as a radio button in a form environment? I just want the below div's to submit the value, the radio buttons are ugly

The code gets outputted like this:

<input id="radio-2011-06-08" value="2011-06-08" type="radio" name="radio_date">8</input></li><li id="li-2011-06-09" class=" "><input id="radio-2011-06-09" value="2011-06-09" type="radio" name="radio_date">9</input></li><li id="li-2011-06-10" class=" "><input id="radio-2011-06-10" value="2011-06-10" type="radio" name="radio_date">10</input></li><li id="li-2011-06-11" class=" end "><input id="radio-2011-06-11" value="2011-06-11" type="radio" name="radio_date">11</input></li><li id="li-2011-06-12" class=" start "><input id="radio-2011-06-12" value="2011-06-12" type="radio" name="radio_date">12</input></li><li id="li-2011-06-13" class=" "><input id="radio-2011-06-13" value="2011-06-13" type="radio" name="radio_date">13</input></li><li id="li-2011-06-14" class=" "><input id="radio-2011-06-14" value="2011-06-14" type="radio" name="radio_date">14</input></li><li id="li-2011-06-15" class=" "><input id="radio-2011-06-15" value="2011-06-15" type="radio" name="radio_date">15</input></li><li id="li-2011-06-16" class=" "><input id="radio-2011-06-16" value="2011-06-16" type="radio" name="radio_date">16</input></li><li id="li-2011-06-17" class=" "><input id="radio-2011-06-17" value="2011-06-17" type="radio" name="radio_date">17</input></li><li id="li-2011-06-18" class=" end "><input id="radio-2011-06-18" value="2011-06-18" type="radio" name="radio_date">18</input></li><li id="li-2011-06-19" class=" start "><input id="radio-2011-06-19" value="2011-06-19" type="radio" name="radio_date">19</input></li><li id="li-2011-06-20" class=" "><input id="radio-2011-06-20" value="2011-06-20" type="radio" name="radio_date">20</input></li><li id="li-2011-06-21" class=" "><input id="radio-2011-06-21" value="2011-06-21" type="radio" name="radio_date">21</input></li><li id="li-2011-06-22" class=" "><input id="radio-2011-06-22" value="2011-06-22" type="radio" name="radio_date">22</input></li><li id="li-2011-06-23" class=" "><input id="radio-2011-06-23" value="2011-06-23" type="radio" name="radio_date">23</input></li><li id="li-2011-06-24" class=" "><input id="radio-2011-06-24" value="2011-06-24" type="radio" name="radio_date">24</input></li><li id="li-2011-06-25" class=" end "><input id="radio-2011-06-25" value="2011-06-25" type="radio" name="radio_date">25</input></li><li id="li-2011-06-26" class=" start "><input id="radio-2011-06-26" value="2011-06-26" type="radio" name="radio_date">26</input></li><li id="li-2011-06-27" class=" "><input id="radio-2011-06-27" value="2011-06-27" type="radio" name="radio_date">27</input></li><li id="li-2011-06-28" class=" "><input id="radio-2011-06-28" value="2011-06-28" type="radio" name="radio_date">28</input></li><li id="li-2011-06-29" class=" "><input id="radio-2011-06-29" value="2011-06-29" type="radio" name="radio_date">29</input></li><li id="li-2011-06-30" class=" "><input id="radio-2011-06-30" value="2011-06-30" type="radio" name="radio_date">30</input></li><li id="li-" class=" inactive"></li><li id="li-" class=" end inactive"></li></ul><div class="clear"></div></div>    

Answer 1

This can be done without an Javascript at all but you'd have to ditch the div.

You can use a <label> tag instead of a <div> and hide the radio button with CSS.

For example:

<input type="radio" id="foo" /><label for="foo">Bar</label>

And in CSS:

input[type=radio] {
   display:none;
}

Note that a <label> tag is inline by default and a <div> is block level element so you may need to move around your CSS a bit.

Answer 2

You could hide the radio buttons, and if a div is clicked, trigger a click event on the hidden radio button. Of course you would need to handle displaying which date is selected yourself.

I prepared a small demo: http://jsfiddle.net/roberkules/4xK86/

Answer 3

Just turn off the radio button visibility and bind a click event to each of the divs/tds/whatever that sets the (now invisible) radio button to 'checked'. You'll want to give some kind of visible indication to the user that the date is selected, and you'll need to add logic that "deselects" the div/td/whatever when another one is checked.

Answer 4

What about something along these lines:

$('div', '#calendar')
  .find(':radio')
  .attr('checked', 'checked')
  .trigger('change');

Where '#calendar' is the ID value of the calendar. This assumes that the radio button is inside the div in question. The trigger('change') will call any events that are already bound to that radio button.

You could also use labels and make the day number into a label. Labels can be linked to a form input using the FOR attribute. The input would need a matching ID attribute.

Answer 5

Since you in your case you can only select one date. I would do the following

1. Create input that is hidden - you could call it selectedItem.
2. Remove all those radio buttons and just use div. Use same class for all divs.
3. Write jQuery that would bind all divs (based on that class) to listen for click event. When that event occurs update value of that hidden input field.

Hope that helps.

Answer 6

Basically you're going to have to add a hidden field that will hold the date but as long as you can get at the date of the div that's being clicked, you're golden. You just need to push the value to the hidden field on the onclick handler.

<input type="hidden" name="date" id="date"/>
<!-- Begin Calendar -->
    <!-- Begin Calendar Cell -->
        <div class="calendarCell">
            <span class="date">#</span>
        </div>
    <!-- End Calendar Cell -->
<!-- End Calendar -->

<script type="text/javascript">
    $('.calendarCell').each(function(){
        $(this).click(function(){
            $('#date').val($(this).find('.date').html());
        });
    });
</script>