onchange only triggered on refresh when added through javascript

phantomdentist

New Member

Join Date: Jun 2010
Posts: 1

onchange only triggered on refresh when added through javascript

Jun 24 '10, 09:03 AM

Trying to hide/show some form field based on select choice. It works just fine in my test setup. In the real world example I have to add the onchange event to my select box with

Code:

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

For some reason when doing it this way the function only runs when the page is refreshed. Any ideas on how I can solve this?

in the head

Code:

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

in the body

Code:

<script type="text/javascript">
var selectBoxId1 = document.getElementById('Type-of-Property');
var selectBoxValue1 = 'Other(please state)';
var hiddenBoxId1 = document.getElementById('li-2-7');
selectBoxId1.onchange(hideField(selectBoxId1,selectBoxValue1,hiddenBoxId1));

The form

Code:

	<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="Address"><span>Address</span></label><input
 name="Address" id="Address" class="single" type="text"></li>
			<li id="li-2-4" class=""><label id="label-2-4" for="Post-Code"><span>Post
 Code</span></label><input name="Post-Code" id="Post-Code" 
class="single" type="text"></li>
			<li id="li-2-5" class=""><label id="label-2-5" for="No.-of-Bedrooms"><span>No.
 of Bedrooms</span></label><input name="No.-of-Bedrooms" 
id="No.-of-Bedrooms" class="single" type="text"></li>
			<li id="li-2-6" class=""><label id="label-2-6" for="Type-of-Property"><span>Type
 of Property</span></label><select name="Type-of-Property" 
id="Type-of-Property" class="cformselect">
				<option value="Please select…">Please select…</option>
				<option value="Flat">Flat</option>
				<option value="Semi Detatched House">Semi Detatched House</option>
				<option selected="selected" 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 style="visibility: hidden; display: none;" id="li-2-7" class=""><label
 id="label-2-7" for="Type-of-Property-(Other)"><span>Type of Property 
(Other)</span></label><input name="Type-of-Property-(Other)" 
id="Type-of-Property-(Other)" class="single" type="text"></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="Condition-of-Property"><span>Condition of Property</span></label><select
 name="Condition-of-Property" id="Condition-of-Property" 
class="cformselect">
				<option selected="selected" 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="Please-describe-your-situation"><span>Please describe your 
situation</span></label><textarea style="border: 1px solid rgb(226, 226,
 222);" cols="30" rows="8" name="Please-describe-your-situation" 
id="Please-describe-your-situation" class="area"></textarea><div 
id="dCField1" style="height: 50px; font-size: 11px;"><b>200</b> 
characters remaining in your input limit.</div></li>
			<li id="li-2-11" class=""><label id="label-2-11" for="Property-value"><span>Property
 value</span></label><input name="Property-value" id="Property-value" 
class="single" type="text"></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="Value-Based-On"><span>Value
 Based On</span></label><select name="Value-Based-On" 
id="Value-Based-On" class="cformselect">
				<option selected="selected" 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="Value-Based-On-(Other)"><span>Value Based On (Other)</span></label><input
 name="Value-Based-On-(Other)" id="Value-Based-On-(Other)" 
class="single" type="text"></li>
			<li id="li-2-15" class=""><label id="label-2-15" 
for="Mortgage-Amount-outstanding"><span>Mortgage Amount outstanding </span></label><input
 name="Mortgage-Amount-outstanding" id="Mortgage-Amount-outstanding" 
class="single" type="text"></li>
			<li id="li-2-16" class=""><label id="label-2-16" for="Secured-loans:"><span>Secured
 loans:</span></label><input name="Secured-loans:" id="Secured-loans:" 
class="single" type="text"></li>
			<li id="li-2-17" class=""><label id="label-2-17" 
for="Monthly-cost-of-Mortgage:"><span>Monthly cost of Mortgage:</span></label><input
 name="Monthly-cost-of-Mortgage:" id="Monthly-cost-of-Mortgage:" 
class="single" type="text"></li>
			<li id="li-2-18" class=""><label id="label-2-18" 
for="How-quickly-do-you-need-to-sell?"><span>How quickly do you need to 
sell?</span></label><select name="How-quickly-do-you-need-to-sell?" 
id="How-quickly-do-you-need-to-sell?" class="cformselect">
				<option selected="selected" 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="Are-you-facing-Repossesion?"><span>Are you facing Repossesion?</span></label><select
 name="Are-you-facing-Repossesion?" id="Are-you-facing-Repossesion?" 
class="cformselect">
				<option selected="selected" 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="Any-further-information"><span>Any further information</span></label><textarea
 cols="30" rows="8" name="Any-further-information" 
id="Any-further-information" 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 
name="cforms_q2" id="cforms_q2" class="secinput " type="text"></li>
		</ol>
		</fieldset>
		<fieldset class="cf_hidden">
			<legend>&nbsp;</legend>
			<input name="cforms_a2" id="cforms_a2" 
value="9f27410725ab8cc8854a2769c7a516b8" type="hidden">
			<input name="cf_working2" id="cf_working2" 
value="One%20moment%20please..." type="hidden">
			<input name="cf_failure2" id="cf_failure2" value="" type="hidden">
			<input name="cf_codeerr2" id="cf_codeerr2" 
value="Please%20double-check%20your%20verification%20code." 
type="hidden">
			<input name="cf_customerr2" id="cf_customerr2" value="yyy" 
type="hidden">
			<input name="cf_popup2" id="cf_popup2" value="nn" type="hidden">
		</fieldset>
		<p class="cf-sb"><input name="sendbutton2" id="sendbutton2" 
class="sendbutton" value="" type="submit"></p></form>

Tags: None

Dormilich

Recognized Expert Expert

Join Date: Aug 2008
Posts: 8694

Jun 24 '10, 01:17 PM

Code:

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

that’s invalid syntax.

Code:

function handler(evt)
{
    evt = evt || window.event; // IE workaround
    // your code here
}
element.onevent = handler;

or in all W3C compliant browsers

Code:

element.addEventListener("event", handler, false); // set true for capturing mode

Comment

Previous template Next