Force user to choose one control or the other, not both

[timcadieux]

I have a Search form that has some Date fields.  I have setup my query to search on a Specifc Date OR a Date Range, therefore I need to ensure that the user doesn't try to use both..Is there a way to either perform Validation on Submit or some other graceful way to ensure the don;t fill in both

				 <label for="DoD_YYYY" style="width:175px;">Specific Date:</label>
				 <input id="DoD_YYYY" type="text" name="DoD_YYYY" value="" style="width:35px;" value="YYYY"/> - 
				 <input id="DoD_MM" type="text" name="DoD_MM" value="" style="width:23px;"/> -                 
				 <input id="DoD_DD" type="text" name="DoD_DD" value="" style="width:23px;"  />  

OR

				 <label for="DoD_YYYY" style="width:175px;">Date Range:</label>                
				 <input id="Dod_YYYY_RangeStart" type="text" name="Dod_YYYY_RangeStart" value="" style="width:35px;"/> -                 
				 <input id="Dod_MM_RangeStart" type="text" name="Dod_MM_RangeStart"  value="" style="width:23px;" /> -                 
				 <input id="Dod_DD_RangeStart" type="text" name="Dod_DD_RangeStart"  value=""  style="width:23px;" />                
				 <span style="color:#666">/</span>                 
				 <input id="Dod_YYYY_RangeEnd" type="text" name="Dod_YYYY_RangeEnd" value="" style="width:35px;" /> - 
				 <input id="Dod_MM_RangeEnd" type="text" name="Dod_MM_RangeEnd"  value="" style="width:23px;" /> - 
				 <input id="Dod_DD_RangeEnd" type="text" name="Dod_DD_RangeEnd"  value="" style="width:23px;" />

[Jessica]

Yes you could perform validation upon submit, and yes you could also add client-side validation and instruction. How? That's up to you? The server-side validation would be pretty straightforward, so the client side part is where you have some flexibility. The first thing that pops into my mind is having a radio for Specific Date / Date Range. When you change the radio, use JS to hide the "wrong" fields and show the needed fields. Then in your server side only use which one is appropriate based on the radio selection.

 

Another option is to provide both boxes, label the first one (Exact Date OR Date Range Start) and the second (Date Range End), and provide text explaining what to do.

Edited May 7, 2013 by Jessica

[davidannis]

if ($_POST['DoD_YYYY']!='' || $_POST['DoD_MM']!='' || $_POST['DoD_DD']!='' ){

        if ($_POST['DoD_YYYY_RangeStart']!='' || $_POST['DoD_MM_RangeStart']!='' || $_POST['DoD_DD_RangeStart']!='' 

        || $_POST['DoD_YYYY_RangeEnd']!='' || $_POST['DoD_MM_RangeEnd']!='' || $_POST['DoD_DD_RangeEnd']!=''){

              echo 'You can't have data in both range and single date fields';

              // do something else here (like redisplay the page)

}

}

[kicken]

Another option is to provide both boxes, label the first one (Exact Date OR Date Range Start) and the second (Date Range End), and provide text explaining what to do.

This is my choice usually when doing something like this. I provide only two boxes, and handle them like this:

 

- Only first box filled in, exact date search or date <= given date (depending on what is appropriate for the given report)

- Both boxes filled in, range search

- Only second box filled in, exact date search or date >= given date (depending on what is appropriate for the given report)

 

I include a short bit of text explaining how they work next to the fields to help the user make the proper choice in what to fill in.

 

 

Regardless of what you do on the client side though you need to include a check on the server side. If all the fields are filled in you need to have some way to prioritize which one you use. That could be via a radio button as mentioned, or just an arbitrary ranking (ie, prefer exact date over range).