enabling form elements

[Stijn Goris]

hi all,

I try to enable some form elements (positie and fotoToevoegen) when a user
clicks a checkbox. Sadly enough it doesn't work I use the
'onSelect="EnableInput();'. The function is defined inside the form. Maybee
someone knows the problem?

kind regards
Stijn

<form name="nieuws" method="post"
action="nieuwsVoegToe.php?actie=nieuw&IDN=">
Titel <input class="grijs" name="titel" type="text" size="40">
<select class="grijs" name="type" >
</select>
<textarea class="grijs1" name="inhoud" cols="80"
rows="8"></textarea><br><br>

<script LANGUAGE="JavaScript">
function EnableInput()
{
document.nieuws.positie.Disabled = "False";
document.nieuws.fotoToevoegen.Disabled = "False";
}
</script>

foto toevoegen? <input name="fotoToevoegen" type="checkbox" value="1"
onSelect="EnableInput();"><br>
<table class="grijs" bgcolor="#EEEEEE" >
<tr><td>
selecteer je foto:
<input type="hidden" name="MAX_FILE_SIZE" value="20000">
<input type="file" name="foto">
</td></tr>
<tr>
<td>
<table>
<tr>
<td><img src="images/imageBoven.jpg"></td>
<td><img src="images/imageRechts.jpg"></td>
<td><img src="images/imageOnder.jpg"></td>
<td><img src="images/imageLinks.jpg"></td>
</tr>
<tr align="center">
<td><input type="radio" name="positie" value="boven"></td>
<td><input type="radio" name="positie" value="rechts"></td>
<td><input type="radio" name="positie" value="onder"></td>
<td><input type="radio" name="positie" value="links"></td>
</tr>
</table>
</td>
</tr>
</table><br>
<input class="grijs" type="submit" value="nieuws toevoegen >>">
</form>

 

[Martin Honnen]

Stijn Goris wrote:

document.nieuws.positie.Disabled = "False";

The property is named disabled and the boolean value is false and not
"False" so you need
document.nieuws.positie.disabled = false;

 

[Grant Wagner]

<script LANGUAGE="JavaScript">

<script type="text/javascript">

The language attribute is deprecated.

function EnableInput()

function EnableInput(theForm)

Note the form reference now being passed to the function. This is to prevent
needing to hard-code "document.nieuws" later.

I like to use Java syntax conventions in JavaScript, and I tend to use the
shortest variable that will give me some indication of what the paramter is,
which would make it "function enableInput(f)", but use whatever you're
comfortable with.

{
document.nieuws.positie.Disabled = "False";
document.nieuws.fotoToevoegen.Disabled = "False";

theForm.positie.disabled = false;
theForm.fotoToevoegen.disabled = false;

false is a boolean, not a String, by setting the property to the String
"false", you are in fact making it true (because a non-empty string evaluates
to true). Also, JavaScript is case-sensitive, so the property "disabled" must
be lowercase.

}
</script>

foto toevoegen? <input name="fotoToevoegen" type="checkbox" value="1"
onSelect="EnableInput();"><br>

onselect="EnableInput(this.form);"

Pass a reference to the form to the function. This gets picked up as "theForm"
in the function and removes the need to hard-code the name of the form in the
function (which means it doesn't break if you decide to rename the form).

I like to make my attributes all lowercase in HTML, including JavaScript
events. Since the attribute is part of the HTML markup and not JavaScript, it
isn't case-sensitive.

 

[Stijn Goris]

<script type="text/javascript">

The language attribute is deprecated.


function EnableInput(theForm)

Note the form reference now being passed to the function. This is to prevent
needing to hard-code "document.nieuws" later.

I like to use Java syntax conventions in JavaScript, and I tend to use the
shortest variable that will give me some indication of what the paramter is,
which would make it "function enableInput(f)", but use whatever you're
comfortable with.


theForm.positie.disabled = false;
theForm.fotoToevoegen.disabled = false;

false is a boolean, not a String, by setting the property to the String
"false", you are in fact making it true (because a non-empty string evaluates
to true). Also, JavaScript is case-sensitive, so the property "disabled" must
be lowercase.


onselect="EnableInput(this.form);"

Pass a reference to the form to the function. This gets picked up as "theForm"
in the function and removes the need to hard-code the name of the form in the
function (which means it doesn't break if you decide to rename the form).

I like to make my attributes all lowercase in HTML, including JavaScript
events. Since the attribute is part of the HTML markup and not JavaScript, it
isn't case-sensitive.

thanks for the nice reply but I still have trouble making it work.

I have the javascript function on top of the file

<script type="text/javascript">
function EnableInput(theForm)
{
theForm.positie.disabled = false;
theForm.foto.disabled = false;
}
</script>

then the form
<form name="nieuws" enctype="multipart/form-data" method="post"
action="nieuwsVoegToe.php?actie=nieuw&IDN=">
Titel <input class="grijs" name="titel" type="text" size="40">
<select class="grijs" name="type" >test</select>
<textarea class="grijs1" name="inhoud" cols="80"
rows="8"></textarea><br><br>
foto toevoegen? <input name="fotoToevoegen" type="checkbox" value="1"
ondelect="EnableInput(this.form);"><br>
<table class="grijs" bgcolor="#EFEFEF" >
<tr><td>
selecteer je foto:
<input type="hidden" name="MAX_FILE_SIZE" value="20000">
<input disabled type="file" name="foto">
</td></tr>
<tr>
<td>
<table>
<tr>
<td><img src="images/imageBoven.jpg"></td>
<td><img src="images/imageRechts.jpg"></td>
<td><img src="images/imageOnder.jpg"></td>
<td><img src="images/imageLinks.jpg"></td>
</tr>
<tr align="center">
<td><input disabled type="radio" name="positie" value="boven"></td>
<td><input disabled type="radio" name="positie" value="rechts"></td>
<td><input disabled type="radio" name="positie" value="onder"></td>
<td><input disabled type="radio" name="positie" value="links"></td>
</tr>
</table>
</td>
</tr>
</table><br>
<input class="grijs" type="submit" value="nieuws toevoegen >>">
</form>

Thank in advance
Stijn

 

[Harag]

On Tue, 27 Jul 2004 17:23:34 GMT, Grant Wagner


[snipped]

I like to make my attributes all lowercase in HTML, including JavaScript
events. Since the attribute is part of the HTML markup and not JavaScript, it
isn't case-sensitive.

Hi,

I'm currently reading Javascript: the Definitive Guide, (Excellent
book BTW) and find it very usefull.... That is also pointing out to
use all the attributes in lowercase as its HTML. eg

onclick, onmouseover, onmouseout

But I'm having a problem with doing it this way.... it works fine in
IE 6 But I also test my pages in NS 7.1 and that doesn't work when I
put them in lowercase, it just seems to ignore the attibutes. I seem
to have to put them as javascript:

onClick, onMouseOver, onMouseOut.

is it me or does everyone else get this problem ? is it a setting in
NS ?

Thanks

Al.

 

[Grant Wagner]

foto toevoegen? <input name="fotoToevoegen" type="checkbox" value="1"
ondelect="EnableInput(this.form);"><br>

checkbox inputs don't have an ondelect event, nor do they have an onselect event
(well, they might, but it's not appropriate for this purpose). What you want is:

<input name="fotoToevoegen" type="checkbox" value="1"
onclick="EnableInput(this);">

and your function should be:

function EnableInput(chkbox) {
var f = chkbox.form;
f.foto.disabled = !chkbox.checked
var radioButtons = f.positie;
if (typeof radioButtons.length == 'undefined') {
// normalize a single radio button to an array
radioButtons = [ radioButtons ];
}
// handle one or more radio buttons as an array
for (var i = 0; i < radioButtons.length; i++) {
radioButtons.disabled = !chkbox.checked;
}
}

Note that you can't simply set the radio button collection disabled=false, you
must determine if there is more then one radio button and then loop through
them, changing each disabled property individually.

Also note that I am using the state of the chkbox (chkbox.checked) to determine
what to set the disabled property to, this means if they uncheck the box later
the various inputs will become disabled again (you may want to reset the checked
property on each of the radio buttons too, to clear any selection they've made,
that's optional).

Of course, now you've created a situation where the inputs are disabled by
default and enabled using JavaScript. If JavaScript is disabled or unavailable,
those inputs will _never_ be available. Better to leave all the inputs enabled
by default, then in <body onload="..."> set them disabled programmatically.

 

[Mick White]

I'm currently reading Javascript: the Definitive Guide, (Excellent
book BTW) and find it very usefull.... That is also pointing out to
use all the attributes in lowercase as its HTML. eg

onClick, onMouseOver, onMouseOut.

is it me or does everyone else get this problem ? is it a setting in
NS ?

It's you, NS works the same way as IE in this case.
Mick

 

[Harag]

It's you, NS works the same way as IE in this case.
Mick

Yep, it was, thanks. I changed my code again and it seems to work this
time. maybe it was a typo last time I tried it.

Thanks

AL