Click to See Complete Forum and Search --> : Disabling and enabling multiple elements in a form
rculver
01-10-2003, 02:05 PM
We are trying to get elements to be enabled when we hit a radio button. If we have just one element, it works great. If we have more than one, it doesn't work. What we are trying to do is use a function and pass in the element name such as
Function func1(element)[
document.form2.element.disabled=true;
]
Is this possible to do it this way? Should we be trying to build an array of the element names to do it that way? If so, how should the document.formname.elementname.disabled = true or false statement look like?
Try out that:
<script language="JavaScript">
<!--
function disAble(form){
var len = form.elements.length;
for (i=0; i<len ; i++ ) {
form.elements[i].disabled= true;
}
}
//-->
</script>
<body>
<form name=creator onSubmit="disAble(this);return false;">
<input type="Text" name="test1" value="" size="" maxlength="">
<input type="Radio" name="test2" value="v">
<input type="Checkbox" name="test3" value="v">
<input type="Submit" name="test4" value="Disable them">
</form>
</body>
rculver
01-10-2003, 03:22 PM
Thanks for the reply Swon. What is being passed in the variable form? The array that I was thinking of building? Where does elements come from?
Roger
rculver
01-10-2003, 03:28 PM
Thanks for the reply Swon. What is being passed in the variable form? The array that I was thinking of building? Where does elements come from?
Roger
With the onSubmit=disAble(this), this means this form.
function ...(form)
len = form.elements.length -- means the element array length of this form.
then the loop by i -- foreach element in the form do this
rculver
01-10-2003, 04:33 PM
How do we find a particular element that we want to set to true or false instead of setting them all to true or to false?
<script language="JavaScript">
<!--
function disAble(form){
var elm = new Array("test2","test3"); // the fields which will be disabled
var len = form.elements.length;
a =0;
for (i=0; i<len; i++ ) {
for (a=0; a<elm.length;a++) {
if(form.elements[i].name.indexOf(elm[a]) >-1)
{
form.elements[i].disabled= true;
}
}
}
}
//-->
</script>
Mark O'Brien
01-10-2003, 06:35 PM
Swon the sample code that you supplied is extreamly close to what we need. We are trying to pass a dynamically created element to our function. The following code does not work for us. Any ideas?
<script language="JavaScript">
<!--
function enterQty(str) {
var ele = document.form2.elements;
var len = ele.length;
for (i=0;i<len;i++){
if (ele.elements[i].name = str){
ele.elements[i].disable = false;
}
}
}
//-->
</script>
<cfset ctr=0>
<form name="form2" method="post" action="">
<cfloop query="rsAllJobQuotes">
<cfset ctr=ctr+1>
<cfoutput>
<tr><td>
<input type="text" name="orderQty#ctr#" value="#rsAllJobQuotes.qty#" size="12" disabled>
</td></tr>
<tr><td>
<input type="radio" name="pendStat#ctr#" value="o" #Iif('#rsAllJobQuotes.stat#' EQ "o",DE("CHECKED"),DE(""))# onClick="enterQty('orderQty#ctr#')">Ordered
</td></tr>
</cfoutput>
</cfloop>
</form>
It seems to be a little bug in the function:
function enterQty(str) {
var ele = document.form2.elements;
var len = ele.length;
for (i=0;i<len;i++){
if (ele.elements[i].name = str){
ele.elements[i].disable = false;
}
}
}
that would be the same as:
document.form2.elements.elements[i]
replace ele.elements[i].name with:
ele[i].name
also ele.elements[i].disable = false;
with ele[i].disabled = false;
Mark O'Brien
01-10-2003, 06:57 PM
I really appreciate all of your help Swon. I have made the corrections but the element will still not disable when the radio button is selected.
why is it already disabled?
<input type="text" name="orderQty#ctr#" value="#rsAllJobQuotes.qty#" size="12" disabled>
Ok, tell if it's closer to what you need ;-)
<script language="JavaScript">
<!--
function enterQty(str) {
var ele = document.form2.elements;
var len = ele.length;
for (i=0;i<len;i++){
if (ele[i].name == str){
ele[i].disabled = false;
}
}
}
//-->
</script>
<cfset ctr=0>
<form name="form2" method="post" action="">
<cfloop query="rsAllJobQuotes">
<cfset ctr=ctr+1>
<cfoutput>
<tr><td>
<input type="text" name="orderQty#ctr#" value="#rsAllJobQuotes.qty#" size="12" disabled>
</td></tr>
<tr><td>
<input type="radio" name="pendStat#ctr#" value="o" #Iif('#rsAllJobQuotes.stat#' EQ "o",DE("CHECKED"),DE(""))# onClick="enterQty('orderQty#ctr#')">Ordered
</td></tr>
</cfoutput>
</cfloop>
</form>
Mark O'Brien
01-10-2003, 07:23 PM
Sorry. For simplicity sake I only listed one of the radio buttons in the group. There is a second almost identical function that toggles the element back on. At least that was what I was hoping for. I have included the following portion to hopefully make things more clear. Again sorry for my ineptness and thank you for your help.
<script language="JavaScript">
<!--
function enterQty(str) {
var ele = document.form2.elements;
var len = ele.length;
for (i=0;i<len;i++){
if (ele[i].name = str){
ele[i].disabled = false;
}
}
}
function noQty(str) {
var ele = document.form2.elements;
var len = ele.length;
for (i=0;i<len;i++){
if (ele[i].name = str){
ele[i].disabled = true;
}
}
}
//-->
</script>
<cfset ctr=0>
<form name="form2" method="post" action="">
<cfloop query="rsAllJobQuotes">
<cfif rsAllJobQuotes.stat EQ "p">
<cfset ctr=ctr+1>
<cfoutput>
<tr><td>
<input type="text" name="orderQty#ctr#" value="#rsAllJobQuotes.qty#" size="12" disabled>
</td></tr>
<tr><td>
<input type="radio" name="pendStat#ctr#" value="p" #Iif('#rsAllJobQuotes.stat#' EQ "p",DE("CHECKED"),DE(""))# onClick="noQty('orderQty#ctr#')">Pending
</td></tr>
<tr><td>
<input type="radio" name="pendStat#ctr#" value="o" #Iif('#rsAllJobQuotes.stat#' EQ "o",DE("CHECKED"),DE(""))# onClick="enterQty('orderQty#ctr#')">Ordered
</td></tr>
<tr><td>
<input type="radio" name="pendStat#ctr#" value="c" #Iif('#rsAllJobQuotes.stat#' EQ "c",DE("CHECKED"),DE(""))# onClick="noQty('orderQty#ctr#')">Cancelled
</tr></td>
</cfoutput>
</cfif>
</cfloop>
</form>
now I guess we have it the right way:
<script language="JavaScript">
<!--
function enterQty(str) {
var ele = document.form2.elements;
var len = ele.length;
for (i=0;i<len;i++){
if (ele[i].name == str){
ele[i].disabled = false;
}
}
}
function noQty(str) {
var ele = document.form2.elements;
var len = ele.length;
for (i=0;i<len;i++){
if (ele[i].name == str){
ele[i].disabled = true;
}
}
}
//-->
</script>
<cfset ctr=0>
<form name="form2" method="post" action="">
<cfloop query="rsAllJobQuotes">
<cfif rsAllJobQuotes.stat EQ "p">
<cfset ctr=ctr+1>
<cfoutput>
<tr><td>
<input type="text" name="orderQty#ctr#" value="#rsAllJobQuotes.qty#" size="12" disabled>
</td></tr>
<tr><td>
<input type="radio" name="pendStat#ctr#" value="p" #Iif('#rsAllJobQuotes.stat#' EQ "p",DE("CHECKED"),DE(""))# onClick="noQty('orderQty#ctr#')">Pending
</td></tr>
<tr><td>
<input type="radio" name="pendStat#ctr#" value="o" #Iif('#rsAllJobQuotes.stat#' EQ "o",DE("CHECKED"),DE(""))# onClick="enterQty('orderQty#ctr#')">Ordered
</td></tr>
<tr><td>
<input type="radio" name="pendStat#ctr#" value="c" #Iif('#rsAllJobQuotes.stat#' EQ "c",DE("CHECKED"),DE(""))# onClick="noQty('orderQty#ctr#')">Cancelled
</tr></td>
</cfoutput>
</cfif>
</cfloop>
</form>
Mark O'Brien
01-13-2003, 07:51 AM
Swon, you are truely amazing. Your last post nailed our problem exactly. Thank you very much for your assistance.
I only regret not being able to respond sooner to your lastest post due my job scheduling limiting my ability to implement your latest changes. Thanks again.
You're welcome!
I saw you are using cfm. Good stuff!
2 years ago I 've been using cfm, now I'm programming with PHP and It's also very good ;)