conditional form

[Guest]

Hi,

I want to have form with yes no selection in middle of the form. if yes give options to enter if no skip. without submiting form.

[Daverms]

Something like this???,

<script language="javascript">
 function enableSection()
 {
  var frm=document.frm;
  var tdId=document.getElementById ("myTd1");
  myTd1.innerHTML ="<table></tr><tr></tr><tr><td>Name        <input type='text' name='txtname' value=''></td></tr><tr><td>Address    <input type='text' name='txtaddress' value=''></td></tr><tr><td>      <input type='button' name='btnSubmit' value='Submit'></td></tr></table>"
 }
</script>

<form name="frm">
     <table cellpading="0" cellspacing="0">
          <tr>
               <td>Have a mailing address?   Yes<input type="radio" name="rdoOption" value="Yes" onClick="enableSection();"> No <input type="radio" name="rdoOption" value="No" selected>
          </tr>
          <tr>
               <td id="myTd1"></td>
          </tr>
      </table>
</form>

[Dan_Bracuk]

I believe innnerHTML only works in IE.  This may or may not matter to the OP, but he should at least know.

[BKBK]

<script type="text/javascript">
function displayArea(radioBtn)
{
   if (radioBtn.value=="1"){
          document.getElementById('formArea').style.visibility = 'visible';
          }
       else {
          document.getElementById("formArea").style.visibility = 'hidden';
           }
  
}
</script>

<form>
<span><input type="radio" onclick="displayArea(this)"  name="toggleDisplay" value="1" checked="yes">Show form fields</span>
<span><input type="radio" onclick="displayArea(this)"  name="toggleDisplay" value="0">Hide form fields</span><br>
<div id="formArea" class="formArea">
Text field 1: <input type="text" name="t1"><br>
Text field 2: <input type="text" name="t2"><br>
Text field 3: <input type="text" name="t3"><br>
Message: <textarea name="message"></textarea><br>
City: <select name="city">
<option value="1">New York</option>
<option value="2">Paris</option>
<option value="3">New Delhi</option>
</select><br><br>
</div>
<input type="submit" name="sbmt" value="Send">

</form>

[Dan_Bracuk]

BKBK's approach will work, but the problem is that the formarea div occupies the same real estate whether it's visible or not.  Depending on how much stuff is actually in there the amount of white space presented to the user when it's hidden could be unacceptable.

I had a situation like this a few years ago and ended up doing this.

<script language="javascript">

function showHide(checkBox) {

/*

controls what the user sees.  If he checks the button, all the mail stuff shows up and the 1st submit button disappears and gets disabled.  If he unchecks it, the reverse happens.  Page loads with button checked.

*/

if (checkBox.checked == true) {

document.getElementById('longform').style.visibility = 'visible';

document.getElementById('shortform').style.visibility = 'hidden';

document.theForm2.startmonth.focus();

document.theForm2.mail2.checked = true;

}

else {

document.getElementById('longform').style.visibility = 'hidden';

document.getElementById('shortform').style.visibility = 'visible';

document.theForm1.mail1.checked = false;

document.theForm1.startmonth.focus();

}

return true;

}  // end of function

</script>

and later,

<div id="longform"  style="position:absolute; top:200">

and later

<div id="shortform" style="visibility:hidden; position:absolute; top:200">

There may have been better ways to do it, but this one worked.

[BKBK]

BKBK's approach will work, but the problem is...

Dan, I don't think you should call it a problem beforehand. By your own reckoning, there won't be any problems with a few form fields.

What you give is, of course, an extension of the approach. However, there are other possibilities, depending on your wishes:

1) Use my approach, and put all form fields, except the radio buttons, inside the div;

2) Use display style instead of visibility.

When visibility is set to 'hidden', the form fields are simply hidden. The space they occupied remains intact, as you rightly said. One may require that, in order to maintain the style of the page.

When display is used, and set to 'none', the form fields are removed, along with the space they occupied. One side effect is jumping elements on the page. Elements from below jump in to fill the emptied space, which can be unattractive.