Hide or Display Form Field when page loaded

CoffeeBreak21 · 07-06-2011, 06:21 AM

I have a form with three fields. When the user changes the value of field1, the form displays either field2 or field3. This works fine for NEW records.

However, I'm running into a problem when trying to EDIT an existing record. When the form is loaded, I need to test the value of field1 and display either field2 or field3. I've tried using the form onload event, but do not know how to access the value of field1.

I'm using Javascript and div tags.

This is what I have so far.

<script type="text/javascript">

function hide(obj)
obj1 = document.getElementById(obj);
obj1.style.display = 'none';
}

function show(obj)
{
obj1 = document.getElementById(obj);
obj1.style.display = 'block';
}

function show_other(optionValue)
{
if(optionValue=='C') { show('divClass');} else{hide('divClass'); }
if(optionValue=='W') { show('divWorkshop');} else{hide('divWorkshop'); }
}
</script>

/* Field1 - is a drop down list */
<select name="ClassType" size="1" onchange="show_other(this.value)">
...
</select>

/* Field2 */
<div id="divClass">
...
</div>

/* Field 3 */
<div id="divWorkshop">
...
</div>

Appreciate any assistance.
Thanks
Peter

shankar.adodis · 07-06-2011, 08:19 AM

Hello ,

Is that value is stored in the table ??

if so please use retrieve the value to the variable and then check it.

use ajax to retrieve value from database .

Philip M · 07-06-2011, 08:29 AM

Code:

<script type = "text/javascript">
function checkField1() {
var val = document.getElementById("ClassType").value;
if(val=='C') { show('divClass');} else{hide('divClass'); }
if(val=='W') { show('divWorkshop');} else{hide('divWorkshop'); }
}
</script>

/* Field1 - is a drop down list */
<select name="ClassType" id = "ClassType" size="1" onchange="show_other(this.value)">

<body onload = "checkField1()">

Quizmaster: In which English county is the Cornish language spoken?
Contestant: Devon.

CoffeeBreak21 · 07-06-2011, 08:35 AM

Yes, the value of field1 is stored in a database table.

I've never used AJAX, so I was hoping there would be a simple solution with Javascript and div tags.

Regards
Peter

CoffeeBreak21 · 07-06-2011, 09:09 AM

Thank you for the code Philip.

Your solution works fine in IE, but Firefox does not like this line -
var val = document.getElementById("ClassType").value;

It aborts with this error message:
Error ``document.getElementById("ClassType") is null

What do you think?

Regards
Peter

devnull69 · 07-06-2011, 09:31 AM

I think you forgot to add id = "ClassType" to the element. Philip_M marked this part BLUE

CoffeeBreak21 · 07-06-2011, 01:14 PM

Yes, you are absolutely right.

The script is now working perfectly in IE and Firefox.
Thank you for your help.

Here is the final working version.

<script type="text/javascript">
function checkField()
{
var val = document.getElementById('ClassType').value;

if(val=='C') {
show('divClass');
hide('divWorkshop');
}
else {
show('divWorkshop');
hide('divClass');
}
}

function hide(obj)
{
var obj1 = document.getElementById(obj);
obj1.style.display = 'none';
}

function show(obj)
{
var obj1 = document.getElementById(obj);
obj1.style.display = 'block';
}
</script>

<body onload=checkField();>

/* Field1 - is a drop down list */
<select name="ClassType" id = "ClassType" size="1" onchange="checkField(this.value)">
...
</select>

/* Field2 */
<div id="divClass">
...
</div>

/* Field 3 */
<div id="divWorkshop">
...
</div>

Philip M · 07-06-2011, 05:31 PM

BTW, when posting here please help us to help you by following the posting guidelines and wrapping your code in CODE tags. This means use the octothorpe or # button on the toolbar. You can (and should) edit your previous post.