Skip to main content
A
Anonymous
November 28, 2009
Question

conditional form

  • November 28, 2009
  • 2 replies
  • 576 views

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.

    This topic has been closed for replies.

    2 replies

    BKBK
    Community Expert
    BKBKCommunity Expert
    Community Expert
    November 28, 2009

    <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>

    D
    Dan_Bracuk
    Inspiring
    November 29, 2009

    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
    Community Expert
    BKBKCommunity Expert
    Community Expert
    November 29, 2009
    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.

    D
    Daverms
    Inspiring
    November 28, 2009

    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>
    D
    Dan_Bracuk
    Inspiring
    November 28, 2009

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

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices