Quite new to js, trying to write a function to show/hide form fields (well the li containing a label and input field) based on the selected choice of select box

 

Heres what I have so far

 

In the head

 

<script type="text/javaScript">

function hideField(selectBox,hiddenBox)
{	
if(selectBox.options[selectBox.selectedIndex].value == 'Other(Please State)')
{
//Show the textbox
hiddenBox.style.visibility = 'visible';
hiddenBox.style.display = '';
}
else
{
//Hide the textbox
hiddenBox.style.visibility = 'hidden';
hiddenBox.style.display = 'none';

alert('Alert');
}

}
</script>

 

In the body

 

<script type="text/javascript">
var selectBoxId1 = document.getElementById('cf2_field_6');
var hiddenBoxId1 = document.getElementById('li-2-7');
selectBoxId1.onChange="hideField(selectBoxId1,hiddenBoxId1);"
</script>

 

I am trying to add the onChange with javascript as I am using a wordpress form management plugin so I can't hard code it in the html.

 

At the moment the function is not fired.

 

Any help would be great

Could you drop here an HTML code with forms, plz?

I've got a little further. The script fires now. The text box is shown and hidden but only on page refreshes. So when I first load the page its hidden, if I change the select box to the specified option nothing happens, unless I refresh page, then its shown again

 

Head

 

<script type="text/javaScript">

function hideField(selectBox,selectBoxValue,hiddenBox)
{	
if(selectBox.options[selectBox.selectedIndex].value == selectBoxValue)
{
//Show the textbox
hiddenBox.style.visibility = 'visible';
hiddenBox.style.display = '';
alert('show');
}
else
{
//Hide the textbox
hiddenBox.style.visibility = 'hidden';
hiddenBox.style.display = 'none';

alert('hide');
}

}
</script>

 

Body

 

<script type="text/javascript">
var selectBoxId1 = document.getElementById('cf2_field_6');
var selectBoxValue1 = 'Other(please state)';
var hiddenBoxId1 = document.getElementById('li-2-7');
selectBoxId1.onchange(hideField(selectBoxId1,selectBoxValue1,hiddenBoxId1));
/*
var selectBoxId2 = document.getElementById('cf2_field_13');
var selectBoxValue2 = 'Other(please state)';
var hiddenBoxId2 = document.getElementById('li-2-14');
selectBoxId2.onchange(hideField(selectBoxId2,selectBoxValue2,hiddenBoxId2));*/
</script>

 

html form

 

 <form enctype="multipart/form-data" action="/#usermessage2" method="post" class="cform" id="cforms2form">
       <ol class="cf-ol">
           <li id="li-2-1" class="textonly"><h2>This is the final part of the form</h2></li>
       </ol>
       <fieldset class="cf-fs1">
       <legend>Property Details</legend>
       <ol class="cf-ol">
           <li id="li-2-3" class=""><label id="label-2-3" for="cf2_field_3"><span>Address</span></label><input type="text" name="cf2_field_3" id="cf2_field_3" class="single" value=""/></li>
           <li id="li-2-4" class=""><label id="label-2-4" for="cf2_field_4"><span>Post Code</span></label><input type="text" name="cf2_field_4" id="cf2_field_4" class="single" value=""/></li>
           <li id="li-2-5" class=""><label id="label-2-5" for="cf2_field_5"><span>No. of Bedrooms</span></label><input type="text" name="cf2_field_5" id="cf2_field_5" class="single" value=""/></li>
           <li id="li-2-6" class=""><label id="label-2-6" for="cf2_field_6"><span>Type of Property</span></label><select name="cf2_field_6" id="cf2_field_6" class="cformselect" >
               <option value="Please select…">Please select…</option>
               <option value="Flat">Flat</option>
               <option value="Semi Detatched House">Semi Detatched House</option>
               <option value="Detatched House">Detatched House</option>
               <option value="Bungalow">Bungalow</option>
               <option value="Mid Terrace">Mid Terrace</option>
               <option value="End terrace">End terrace</option>
               <option value="linked Detatched">linked Detatched</option>
               <option value="Maisonette">Maisonette</option>
               <option value="Other(please state)">Other(please state)</option>
           </select></li>
           <li id="li-2-7" class=""><label id="label-2-7" for="cf2_field_7"><span>Type of Property (Other)</span></label><input type="text" name="cf2_field_7" id="cf2_field_7" class="single" value=""/></li>
       </ol>
       </fieldset>
       <fieldset class="cf-fs2">
       <legend>Condition Of Property</legend>
       <ol class="cf-ol">
           <li id="li-2-9" class=""><label id="label-2-9" for="cf2_field_9"><span>Condition of Property</span></label><select name="cf2_field_9" id="cf2_field_9" class="cformselect" >
               <option value="Please select…">Please select…</option>
               <option value="Excellent">Excellent</option>
               <option value="Good">Good</option>
               <option value="Average">Average</option>
               <option value="Poor/In need of repair">Poor/In need of repair</option>
           </select></li>
           <li id="li-2-10" class=""><label id="label-2-10" for="cf2_field_10"><span>Please describe your situation</span></label><textarea cols="30" rows="8" name="cf2_field_10" id="cf2_field_10" class="area"></textarea></li>
           <li id="li-2-11" class=""><label id="label-2-11" for="cf2_field_11"><span>Property value</span></label><input type="text" name="cf2_field_11" id="cf2_field_11" class="single" value=""/></li>
       </ol>
       </fieldset>
       <fieldset class="cf-fs3">
       <legend>Financial Information</legend>
       <ol class="cf-ol">
           <li id="li-2-13" class=""><label id="label-2-13" for="cf2_field_13"><span>Value Based On</span></label><select name="cf2_field_13" id="cf2_field_13" class="cformselect" >
               <option value="Please select…">Please select…</option>
               <option value="Estate agent valuation">Estate agent valuation</option>
               <option value="Mortgage valuation">Mortgage valuation</option>
               <option value="Surveyor">Surveyor</option>
               <option value="Own opinion">Own opinion</option>
               <option value="Other(please state)">Other(please state)</option>
           </select></li>
           <li id="li-2-14" class=""><label id="label-2-14" for="cf2_field_14"><span>Value Based On (Other)</span></label><input type="text" name="cf2_field_14" id="cf2_field_14" class="single" value=""/></li>
           <li id="li-2-15" class=""><label id="label-2-15" for="cf2_field_15"><span>Mortgage Amount outstanding </span></label><input type="text" name="cf2_field_15" id="cf2_field_15" class="single" value=""/></li>
           <li id="li-2-16" class=""><label id="label-2-16" for="cf2_field_16"><span>Secured loans:</span></label><input type="text" name="cf2_field_16" id="cf2_field_16" class="single" value=""/></li>
           <li id="li-2-17" class=""><label id="label-2-17" for="cf2_field_17"><span>Monthly cost of Mortgage:</span></label><input type="text" name="cf2_field_17" id="cf2_field_17" class="single" value=""/></li>
           <li id="li-2-18" class=""><label id="label-2-18" for="cf2_field_18"><span>How quickly do you need to sell?</span></label><select name="cf2_field_18" id="cf2_field_18" class="cformselect" >
               <option value="Please select…">Please select…</option>
               <option value="Urgent. Need to Sell Now">Urgent. Need to Sell Now</option>
               <option value="2 Weeks">2 Weeks</option>
               <option value="1 Month">1 Month</option>
               <option value="2 - 3 Months">2 - 3 Months</option>
               <option value="Not urgent">Not urgent</option>
           </select></li>
           <li id="li-2-19" class=""><label id="label-2-19" for="cf2_field_19"><span>Are you facing Repossesion?</span></label><select name="cf2_field_19" id="cf2_field_19" class="cformselect" >
               <option value="Please select...">Please select...</option>
               <option value="Yes">Yes</option>
               <option value="No">No</option>
           </select></li>
           <li id="li-2-20" class=""><label id="label-2-20" for="cf2_field_20"><span>Any further information</span></label><textarea cols="30" rows="8" name="cf2_field_20" id="cf2_field_20" class="area"></textarea></li>
       </ol>
       </fieldset>
       <fieldset class="cf-fs4">
       <legend>Verification</legend>
       <ol class="cf-ol">
           <li id="li-2-22" class=""><label id="label-2-22" for="cforms_q2" class="secq"><span>The colour of grass is</span></label><input type="text" name="cforms_q2" id="cforms_q2" class="secinput " value=""/></li>
       </ol>
       </fieldset>
       <fieldset class="cf_hidden">
           <legend> </legend>
           <input type="hidden" name="cforms_a2" id="cforms_a2" value="9f27410725ab8cc8854a2769c7a516b8"/>
           <input type="hidden" name="cf_working2" id="cf_working2" value="One%20moment%20please..."/>
           <input type="hidden" name="cf_failure2" id="cf_failure2" value=""/>
           <input type="hidden" name="cf_codeerr2" id="cf_codeerr2" value="Please%20double-check%20your%20verification%20code."/>
           <input type="hidden" name="cf_customerr2" id="cf_customerr2" value="yyy"/>
           <input type="hidden" name="cf_popup2" id="cf_popup2" value="nn"/>
       </fieldset>
       <p class="cf-sb"><input type="submit" name="sendbutton2" id="sendbutton2" class="sendbutton" value=""/></p></form>

Something like that, maybe:

http://volodko.ru/tuning/phantomdentist.html

Something like that, maybe:

http://volodko.ru/tuning/phantomdentist.html

 

Thanks. So the difference as far as I'm aware is that you added the onchange to the html rather than using

selectBoxId1.onchange(hideField(selectBoxId1,selectBoxValue1,hiddenBoxId1));

as I was?

 

If this is the change that got it working then I'm afraid I'm not sure how I can use it as my form is generated with php so I don't know how to add onchange to the actual html.

 

If that is not the change that got it working then would you be good enough to point out what did?

Here the solution, if your trying to do this with onchnage thats in the javascript not in the html

 

The function needs to be called with =function()for the event to fire each time a chnage is made, not just when the page loads (Thanks to Fang at another forum for helping me with that)

 

selectBoxId1.onchange =function() {hideField(selectBoxId1,selectBoxValue1,hiddenBoxId1)};

 

What i was using (which doesn't work( was

 

selectBoxId1.onchange {hideField(selectBoxId1,selectBoxValue1,hiddenBoxId1)};

 

Hope this helps someone.