how to show/hide form elements

[cfnew]

Hi i have a code below, what i need to do is when user selects rdio button like Single_Date i need to show <div id="single"> ,but want to hide <div id="range">

Also i dont need not to add the hidden form fileds values when i submit the form .

Please help me thanks

          <input type="radio" name="date_type" value="1" checked="checked"><b>Single Date</b>

          <input type="radio" name="date_type" value="2"><b>Date Range</b>
                       
            <div id="single">
                      <input type="text" value="" name="single_date" id="single_date">
            </div>          
                       
            <div id="range">
                     <input type="text" value="" name="start_date" id="start_date">  
                      To:  <input type="text" value="" name="end_date" id="end_date">
             </div>
                      

[Owainnorth]

Google and you shall find.

[Dan_Bracuk]

I often use a different approach, especially if these form elements are generated dynamically.  The gist of it is to:

1.  Use cfsavecontent to produce variables with the html content I need.

2.  Use toScript to pass these variables to javascript

3.  Write a js function that changes the value of a single div.

[BKBK]

This should get you started:

<script type="text/javascript">
function addRangeDiv() {
var sr = document.getElementById('single_or_range');
var newdiv = document.createElement('div');
var rangeDiv = document.getElementById('range');
var singleDiv = document.getElementById('single');
sr.removeChild(singleDiv);
  if (!rangeDiv) {
  newdiv.setAttribute('id','range');
  newdiv.innerHTML = '<input type="text" name="start_date" id="start_date">To:  <input type="text" name="end_date" id="end_date">';
  sr.appendChild(newdiv);
  }
}

function addSingleDiv() {
var sr = document.getElementById('single_or_range');
var newdiv = document.createElement('div');
var rangeDiv = document.getElementById('range');
var singleDiv = document.getElementById('single');
  sr.removeChild(rangeDiv);
if (!singleDiv) {
  newdiv.setAttribute('id','single');
  newdiv.innerHTML = '<input type="text" value="" name="single_date" id="single_date">';
  sr.appendChild(newdiv);
  }
}
</script>

<cfif isdefined("form.fieldnames")>
    <cfdump var="#form#">
</cfif>

<cfoutput><form action="#cgi.SCRIPT_NAME#" method="post" id="myForm"></cfoutput>
<input type="radio" name="date_type" value="1" checked="checked"  onclick="javascript: addSingleDiv()"><b>Single Date</b>

          <input type="radio" name="date_type" value="2" onclick="javascript: addRangeDiv()"><b>Date Range</b>
            <div id="single_or_range">          
                   <div id="single">
                     <input type="text" value="" name="single_date" id="single_date">
                    </div>
             </div>        
           
<input type="submit" value="Send" name="sbmt">            
</form>