Thanks to Michael Winter, and another (related) question :-)

[Calan]

Mike,

Your code on the dynamic input checking was excellent and very well
explained. (The only thing I had to do was change the test for text input to
be "1 > len of text", instead or "0 > length of text", and add a line to
store the result for use on the server). Thank you very much!

I have a related issue that you might have some ideas on. In some cases, I
have a select box where one of the selections may require an additional
input field to appear next to it. For example,

Pseudo code:

<select id='Length'>
None
Fixed At 12
Variable Length
</select>

If the "Variable" option is selected, I want an input control to appear next
to the select box so that the actual value for length can be entered.
Otherwise, it's not needed and I want to hide it.

The placement is working fine (I added a "NewLine" variable to the control
definition on the server side to control location). What I need to resolve
is how to make a control appear and disappear, depending on the selected
index of it's "parent" control. My implementation does not let me easily
make a trip back to the server when the option is changed.

Any ideas?

TIA

Calan

[Calan]

Also, the " required" attribute for the control that gets hidden and
displayed also has to be updated, so that it is not checked with "
isRequired" if it isn't visible. The current isRequired function that you
provided is looking to see if a 'required' class exists. This is currently
set at the server, and the class will have to be added/removed dynamically,
or a different method used I think.

Calan

"Calan" <no**@nospam.com> wrote in message
news:10*************@corp.supernews.com...

Mike,

Your code on the dynamic input checking was excellent and very well
explained. (The only thing I had to do was change the test for text input to be "1 > len of text", instead or "0 > length of text", and add a line to
store the result for use on the server). Thank you very much!

I have a related issue that you might have some ideas on. In some cases, I
have a select box where one of the selections may require an additional
input field to appear next to it. For example,

Pseudo code:

<select id='Length'>
None
Fixed At 12
Variable Length
</select>

If the "Variable" option is selected, I want an input control to appear next to the select box so that the actual value for length can be entered.
Otherwise, it's not needed and I want to hide it.

The placement is working fine (I added a "NewLine" variable to the control
definition on the server side to control location). What I need to resolve
is how to make a control appear and disappear, depending on the selected
index of it's "parent" control. My implementation does not let me easily
make a trip back to the server when the option is changed.

Any ideas?

TIA

Calan

[Michael Winter]

On Wed, 7 Apr 2004 14:08:43 -0500, Calan <no**@nospam.com> wrote:

[snip]

I have a related issue that you might have some ideas on. In some cases,
I have a select box where one of the selections may require an
additional input field to appear next to it. For example,

Pseudo code:

<select id='Length'>
None
Fixed At 12
Variable Length
</select>

If the "Variable" option is selected, I want an input control to appear
next to the select box so that the actual value for length can be
entered. Otherwise, it's not needed and I want to hide it.

The placement is working fine (I added a "NewLine" variable to the
control definition on the server side to control location). What I need
to resolve is how to make a control appear and disappear, depending on
the selected index of it's "parent" control. My implementation does not
let me easily make a trip back to the server when the option is changed.
The best approach would be to keep the control visible and enabled
initially, and hide and disable it when the page loads. This way, users
without JavaScript will still be able to use the page properly, but you'll
need to add server-side checks to make sure someone doesn't try to use it
when they shouldn't.

/* Assumes that "Variable Length" input is visible by default */
function setVisibility( ref, visible ) {
if( ref && ref.style ) {
ref.style.visibility = visible ? '' : 'hidden';
}
}

/* Assumes "Variable Length" option is at index 2 */
function enableLength( r ) {
var f = r.form, i = r.selectedIndex, vL = f.elements[ 'vLength' ];

setVisibility( vL, 2 == i );
/* In addition to trying to set the visibility, you might want
to disable the control in case the browser doesn't support
the inline style object */
vL.disabled = ( 2 != i );
}

<form ...>
<select name="length" onchange="enableLength(this)">
<!-- options -->
</select>
<input name="vLength" type="text">
</form>

On Wed, 7 Apr 2004 14:23:08 -0500, Calan <no**@nospam.com> wrote:
Also, the "required" attribute for the control that gets hidden and
displayed also has to be updated, so that it is not checked with
"isRequired" if it isn't visible. The current isRequired function that
you provided is looking to see if a 'required' class exists. This is
currently set at the server, and the class will have to be added/removed
dynamically, or a different method used I think.

I think a different method would be more appropriate. In the validation
function, use (assuming the HTML above, 'form' refers to the FORM, and
"Variable Length" is at index 2)

if( 2 == form.elements[ 'length' ].selectedIndex ) {
var length = +form.elements[ 'vLength' ].value;

if( isNaN( length ) || ( 1 > length )) {
/* The value is either not a number,
or it is a number less than zero */
}
}

Hope that helps,
Mike

--
Michael Winter
M.******@blueyonder.co.invalid (replace ".invalid" with ".uk" to reply)

[Michael Winter]

On Thu, 08 Apr 2004 14:57:58 GMT, Michael Winter
<M.******@blueyonder.co.invalid> wrote:

[snip]

<form ...>
<select name="length" onchange="enableLength(this)">
<!-- options -->
</select>
<input name="vLength" type="text">
</form>

[snip]

Forgot to mention that after the closing form tag, you should call
enableLength():

<script type="text/javascript>
enableLength( document.forms[ 'formName' ].elements[ 'length' ]);
</script>

Mike

--
Michael Winter
M.******@blueyonder.co.invalid (replace ".invalid" with ".uk" to reply)

[Calan]

Thanks Mike... this is soaking in (slowly), but I'm still not seeing a way
to make it work for ANY control that is somehow designated as a "child" of
another control.

I'm thinking I can add an ASP variable called 'ControlParent" (which comes
from the database of control definitions). This variable will contain the
name of the control that it is dependent on, if there is one. But I also
need to set the parent's index that will trigger the visibility.

I'm working through your example below for a known control (Length), but
still not quite grasping how to make it work for any control, as defined in
the ASP script.

(Maybe dynamically create the JS with response.write, inserting control
names where appropriate? Would this be easier than a generic JS function
that can handle any control that has some property that identifies it as
having a dependency?)

Once again thanks for your help...

Calan

"Michael Winter" <M.******@blueyonder.co.invalid> wrote in message
news:op**************@news-text.blueyonder.co.uk...

On Thu, 08 Apr 2004 14:57:58 GMT, Michael Winter
<M.******@blueyonder.co.invalid> wrote:

[snip]

<form ...>
<select name="length" onchange="enableLength(this)">
<!-- options -->
</select>
<input name="vLength" type="text">
</form>

[snip]

Forgot to mention that after the closing form tag, you should call
enableLength():

<script type="text/javascript>
enableLength( document.forms[ 'formName' ].elements[ 'length' ]);
</script>

Mike

--
Michael Winter
M.******@blueyonder.co.invalid (replace ".invalid" with ".uk" to reply)

[Calan]

Mike,

I've got everything working, except sometimes the child control may not be
an input box. Here is the JS validation after it has been served:

**********************

<script type="text/javascript">
function checkForm(form)
{
var c = form.elements, e, t;

for( var i = 0, n = c.length; i < n; ++i )
{
t = ( e = c[ i ]).type;

if(( 'select-one' == t ) && ( e.selectedIndex == 0 ) &&
isRequired( e ))
{
alert("Please select an option for " + e.title + ".");
form.validated.value="false";
return false;
}
else if(( 'text' == t ) && ( e.value.length < 1 ) && isRequired( e ))
{
alert("Please enter a value for " + e.title + ".");
form.validated.value="false";
return false;
}
else if(( 'textarea' == t ) && ( e.value.length < 1 ) && isRequired( e ))
{
alert("Please enter a value for " + e.title + ".");
form.validated.value="false";
return false;
}

// etc.

else if((e.id=='DomeLight')&&(e.selectedIndex>=2)){
var cValue = form.elements['DomeLightFB'].value;
if(isNaN(cValue)||(cValue<1)){

alert('Please enter a value for Dome Light Location.');
form.validated.value='false';
return false;}}

}
form.validated.value="true";
return true;
}

function isRequired( e )
{
return( -1 != e.className.indexOf( 'required' ));
}

function setVisibility( ref, visible ) {
if( ref && ref.style ) {
ref.style.visibility = visible ? '' : 'hidden';
}
}

function enableChild( r,child,trigger ) {
var f = r.form, i = r.selectedIndex, childControl = f.elements[ child ];

setVisibility( childControl, i >= trigger);
/* disable the control in case the browser doesn't support
the inline style object */
childControl.disabled = ( i < trigger);
}

//-->
</script>

**********************

The lines in question are:

else if((e.id=='DomeLight')&&(e.selectedIndex>=2)){
var cValue = form.elements['DomeLightFB'].value;
if(isNaN(cValue)||(cValue<1)){

alert('Please enter a value for Dome Light Location.');
form.validated.value='false';
return false;}}

'DomeLight' is a select that has a child select called 'DomeLightFB' when
the selected index is >=2.

If 'DomeLightFB' is an input control, this works fine. But as a selectbox,
it doesn't. I need to check if the value is < 1 (for children that are input
controls), and selectedIndex ==0 (for children that are selects).

I tried adding an OR to the value test line, but it doesn't want to work for
some reason:

if( isNaN(cValue)||(cValue<1) || (form.elements['DomeLightFB'].selectedIndex
== 0)){

Any ideas?

Thanks once again for all the invaluable help!

Calan





"Calan" <no**@nospam.com> wrote in message
news:10*************@corp.supernews.com...

Thanks Mike... this is soaking in (slowly), but I'm still not seeing a way to make it work for ANY control that is somehow designated as a "child" of
another control.

I'm thinking I can add an ASP variable called 'ControlParent" (which comes
from the database of control definitions). This variable will contain the
name of the control that it is dependent on, if there is one. But I also
need to set the parent's index that will trigger the visibility.

I'm working through your example below for a known control (Length), but
still not quite grasping how to make it work for any control, as defined in the ASP script.

(Maybe dynamically create the JS with response.write, inserting control
names where appropriate? Would this be easier than a generic JS function
that can handle any control that has some property that identifies it as
having a dependency?)

Once again thanks for your help...

Calan

"Michael Winter" <M.******@blueyonder.co.invalid> wrote in message
news:op**************@news-text.blueyonder.co.uk...

On Thu, 08 Apr 2004 14:57:58 GMT, Michael Winter
<M.******@blueyonder.co.invalid> wrote:

[snip]

<form ...>
<select name="length" onchange="enableLength(this)">
<!-- options -->
</select>
<input name="vLength" type="text">
</form>

[snip]

Forgot to mention that after the closing form tag, you should call
enableLength():

<script type="text/javascript>
enableLength( document.forms[ 'formName' ].elements[ 'length' ]);
</script>

Mike

--
Michael Winter
M.******@blueyonder.co.invalid (replace ".invalid" with ".uk" to reply)

[Michael Winter]

On Thu, 8 Apr 2004 15:57:25 -0500, Calan <no**@nospam.com> wrote:

[fixed top-post]

"Calan" <no**@nospam.com> wrote in message
news:10*************@corp.supernews.com...

Thanks Mike... this is soaking in (slowly), but I'm still not seeing
a way to make it work for ANY control that is somehow designated as a
"child" of another control.
You never mentioned anything about creating something generic. I thought
the relationship between the two controls was a one-off.

Without knowing the details of the page intimately, it would be
complicated to produce a truely generalised validation function able to
determine the presence of children, how those children are activated, and
how to react to different control types. You'd be sending a lot of data to
the user, and the server would be generating quite a bit of JavaScript. It
certainly would be possible, but it would require quite a shift from the
code you have at the moment.
I'm thinking I can add an ASP variable called 'ControlParent" (which
comes from the database of control definitions). This variable will
contain the name of the control that it is dependent on, if there is
one. But I also need to set the parent's index that will trigger the
visibility.

If I were to generalise the process, I'd use a JavaScript object (used as
a hash table) to associate properties with a form control. Those
properties would contain the parent, whether the control was required,
what condition enabled the child, and what makes the control valid[1].

In the long run, I'd probably be tempted to leave validation to the server.

[snipped my post and validation code]
The lines in question are:

else if((e.id=='DomeLight')&&(e.selectedIndex>=2)){
var cValue = form.elements['DomeLightFB'].value;
if(isNaN(cValue)||(cValue<1)){

alert('Please enter a value for Dome Light Location.');
form.validated.value='false';
return false;}}
First of all, I would place validation of exceptional elements first,
otherwise they might be handled by the general tests based on type.
'DomeLight' is a select that has a child select called 'DomeLightFB'
when the selected index is >=2.

If 'DomeLightFB' is an input control, this works fine. But as a
selectbox, it doesn't. I need to check if the value is < 1 (for children
that are input controls), and selectedIndex ==0 (for children that are
selects).
Are you implying that DomeLightFB might be generated as a different
control type under certain circumstances?
I tried adding an OR to the value test line, but it doesn't want to work
for some reason:

if( isNaN(cValue)||(cValue<1) ||
(form.elements['DomeLightFB'].selectedIndex
== 0)){

Assuming that the answer to the question above is "Yes", I'd split the
validation based on type, again. However, as the validation function
checked every control in the form, DomeLightFB would be checked later
anyway, and in the way to seem to want, too.

if(( 'DomeLight' == e.id ) && ( 2 <= e.selectedIndex )) {
var dLFB = form.elements[ 'DomeLightFB' ], dLFBt = dLFB.type;

if(( 'select-one' == dLFBt ) && ( 0 == dLFB.selectedIndex )) {
// invalid
} else if( 'text' == dLFBt ) {
var dLFBv = +dLFB.value;

if( isNaN( dLFBv ) || ( 1 > dLFBv )) {
// invalid
}
}

/* Other exceptional tests */

} else if(( 'select-one' == t ) /* && etc */ ) {
} else if(( 'text' == t ) /* && etc */ ) {
} else if(( 'textarea' == t ) /* && etc */ ) {
}

Mike

Sorry for the delayed reply. I've been away for the Easter weekend.

[1] That may not be an exhaustive list.

--
Michael Winter
M.******@blueyonder.co.invalid (replace ".invalid" with ".uk" to reply)

[Calan]

<snip>

Thanks Mike....

'DomeLight' is a select that has a child select called 'DomeLightFB'
when the selected index is >=2.

If 'DomeLightFB' is an input control, this works fine. But as a
selectbox, it doesn't. I need to check if the value is < 1 (for children
that are input controls), and selectedIndex ==0 (for children that are
selects).

Are you implying that DomeLightFB might be generated as a different
control type under certain circumstances?

The JS validation I'm considering would be a generic function, to a degree.
In the example of the Domelight, that JS was written at the server,
substituting the control names from a database. I was hoping for a generic
chunk of code that would work on either an input or select control, with
only the control names being written in.

The more I think about it, the more I'm inclined to agree that I need to do
as much validation at the server as possible, mostly just because I'm not
familiar enough with JS to make it worthwhile. (We may actually be looking
at bringing a consultant in for a few days of JS work for client-side
validation that can't be handled easily at the server).

Checking that required fields have been filled in with *something* is fairly
easy to do generically, (thanks to your help :-) ). My problem is that a
lot of select lists will need to be populated differently based on other
inputs directly before them, and some input controls shouldn't even be shown
at all. Using a JS library for dependent selects is easy enough (I've found
several nice ones on the net), but making them work generically with control
names and lists that are loaded at the server from a database is getting
really complex really fast.

Thanks again for all the help on this. I may continue to struggle through
with it a while before just biting the bullet and hiring someone for a few
days.

Want some work?

:-)

Calan

AxMaster Guitar Software
www.jcsautomation.com
www.jcsautomation.com/music.asp
Music software and web design/hosting

"Reality exists only in the minds of the extremely deranged"