Disable fields on checkbox with Quickform

Thingmand
Thingmand used Ask the Experts™
on
When the user checks the checkbox "same" all the other fields should be disabled (and rules ignored)

How can I do that?
$form = new HTML_QuickForm('manage', 'post', $fullUrl);
 
$form->addElement('checkbox', 'same', $translate['same_as_buying_address'].':');
 
$form->addElement('text', 'name', $translate['name'].':', array('size' => 40) );
$form->addElement('textarea', 'adress', $translate['adress'].':', array('cols' => 34) );
$form->addElement('select', 'country', $translate['country'].':', $countries);
		
$form->addRule('name', $translate['enter_valid_name'], 'required');
$form->addRule('adress', $translate['enter_valid_adress'], 'required');
$form->addRule('country', $translate['select_valid_country'], 'required');
 
$form->addElement('submit', NULL, $translate['save_changes']);

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®

Commented:
You can add a small javascript function like this, and call it when the user click on the "same" checkbox with onClick="disable_checkboxes()".
function disable_checkboxes() {
  if (document.getElementById('same').checked = 'checked') {
    document.getElementById('field1').disabled = true;
    document.getElementById('field2').disabled = true;
  }
}

Open in new window

Do you have a sample of the form markup generated by HTML_QuickForm() please?

TheFoot

Author

Commented:
Can it not be done with Quickform in the PHP code?
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Commented:
To interact at the client side you should use javascript.
Here an example calling such function:
$radio =& HTML_QuickForm::createElement('radio', 'current', null,array('onclick' => 'disable_checkboxes();'));
Looking quickly through the HTML_QuickForm docs, I cannot see how it is possible to add client side handler code via the PHP form config..

Author

Commented:
Ahh, great. Isn't it possible to loop all fields and disable all but 'same'? (instead of writing them all - the real form is somewhat longer)

Author

Commented:
$radio =& HTML_QuickForm::createElement('radio', 'current', null,array('onclick' => 'disable_checkboxes();')); is what I meant by "using Quixkooform", thanks.
Put this in the function ppinon gave you..:
for(i=0; i<document.FormName.elements.length; i++){
  document.FormName.elements[i].disabled = true;
}

Open in new window

Commented:
Yes no problem to generate all the fields in a loop, and disabled as default. But the interaction after the generation of the whole form must be done with a piece of javascript code.
To exclude the element with id "same", and to reverse the action also:
function disable_checkboxes() {
  var a_fields = document.FormName.elements;
  var v_checked = document.getElementById('same').checked;
  for(i=0; i<a_fields.length; i++){
    if (a_fields[i].id != "name"){  
      a_fields[i].disabled = v_checked;
    }
  }
}

Open in new window

Sorry typos:
function disable_checkboxes() {
  var a_fields = document.FormName.elements;
  var v_checked = document.getElementById('same').checked;
  for(i=0; i<a_fields.length; i++){
    if (a_fields[i].id != "same"){  
      a_fields[i].disabled = v_checked;
    }
  }
}

Open in new window

Author

Commented:
The form has no name, just an id "manage"

How can I catch the form in the JS function by this id?

Commented:
Like this
function disable_checkboxes() {
  var a_fields = document.forms[0].elements;
  var v_checked = document.getElementById('same').checked;
  for(i=0; i<a_fields.length; i++){
    if (a_fields[i].id != "same"){  
      a_fields[i].disabled = v_checked;
    }
  }
}

Open in new window

By using document.getElementById():
function disable_checkboxes() {
  var a_fields = document.getElementById('manage').elements;
  var v_checked = document.getElementById('same').checked;
  for(i=0; i<a_fields.length; i++){
    if (a_fields[i].id != "same"){  
      a_fields[i].disabled = v_checked;
    }
  }
}

Open in new window

Author

Commented:
It says: document.getElementById("same") is null

Quickform insert it's own id for 'same' - I thinks that the problem, but can I use the element name instaed?
<html>
<head>
	<script type="text/javascript">
		<!--
 
function disable_checkboxes() {
  var a_fields = document.getElementById('delivery').elements;
  var v_checked = document.getElementById('same').checked;
  for(i=0; i<a_fields.length; i++){
    if (a_fields[i].id != 'same'){  
      a_fields[i].disabled = v_checked;
    }
  }
}
		-->
	</script>
</head>
<body>
 
<form action="#" method="post" id="delivery" target="">
<input onclick="disable_checkboxes();" name="same" type="checkbox" value="1" id="qf_316d64" />
<input size="40" name="name" type="text" value="" />
<textarea cols="34" name="adress">Engvej 41</textarea>
</form>
 
</body>
</html>

Open in new window

This should do it:
function disable_checkboxes() {
  var a_fields = document.getElementById('manage').elements;
  var v_checked = document.getElementsByName('same')[0].checked;
  for(i=0; i<a_fields.length; i++){
    if (a_fields[i].id != "same"){  
      a_fields[i].disabled = v_checked;
    }
  }
}

Open in new window

Author

Commented:
Now the checkbox is disable too :)
Lol - of course.. sorry try this:
function disable_checkboxes() {
  var a_fields = document.getElementById('manage').elements;
  var v_checked = document.getElementsByName('same')[0].checked;
  for(i=0; i<a_fields.length; i++){
    if (a_fields[i].name != "same"){  
      a_fields[i].disabled = v_checked;
    }
  }
}

Open in new window

Commented:
Try calling the javascript function like onClick(this) --> it passes the checkox element to the function.
function disable_checkboxes(same) {
  var a_fields = document.getElementById('manage').elements;
  var v_checked = same.checked;
  for(i=0; i<a_fields.length; i++){
    if (a_fields[i].id != "same"){  
      a_fields[i].disabled = v_checked;
    }
  }
}

Open in new window

@ppinon: thats a better way to do it..  Change the line:

if (a_fields[i].id != "same"){

to

if (a_fields[i].id != same.id){

Commented:
Yes, still improved...
function disable_checkboxes(same) {
  var a_fields = document.getElementById('manage').elements;
  var v_checked = same.checked;
  for(i=0; i<a_fields.length; i++){
    if (a_fields[i].id != same.id){  
      a_fields[i].disabled = v_checked;
    }
  }
}

Open in new window

Author

Commented:
Damn, diasbles the submit button also :) Maybe it was easier just the write every field in the js...

I don't wan't the submit buttons value among the POST data, in if I give it a name it will post along, right?
Added check to exclude submit button:

Using jQuery is better as this could likely be wrapped up into 2/3 lines...

Yes - if you dont give the submit button a name, it wont get posted to the server..
function disable_checkboxes(same) {
  var a_fields = document.getElementById('manage').elements;
  var v_checked = same.checked;
  for(i=0; i<a_fields.length; i++){
    if ((a_fields[i].id != same.id) && (a_fields[i].type != "submit")){  
      a_fields[i].disabled = v_checked;
    }
  }
}

Open in new window

With jQuery you can use:

$(":input:not('button')")

to create an array of all form fields excluding buttons...

I never code without it now - allows you to "code more, write less" :)

Author

Commented:
It works know, but as I wrote in the beginning the Quickform rules should be "disabled" too - I thought they maybe where ignored when the fields where disabled, but they aren't.

Even if I almost doesn't dare to tell it, there are access to jQuery om the site :) But it won't help on the QF problem, of course...
Thingmand: This seems more work to me than creating custom forms.. :)  Are you sure it wont be easier to do this all by hand?

Author

Commented:
Yes, you're right, but the real form contains many more fields, validation, etc and I thought there was a function in QF to handle this "toggleoncheckbox"...
Sorry - JS and PHP I know, but I know nothing about the HTML_QuickForm() library...

Cant you use PHP to generate the form fields dynamically based on a database query?

Author

Commented:
I am most likely building the form in hand to avoid QuickForm validation and using the JS function given...

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial