Jump to content

I want to use a checkbox value to get another field

- - - - -
Started by Alhazred, Oct 10 2011 07:24 AM

  • Please log in to reply
1 reply to this topic

#1
Alhazred
Posted 10 October 2011 - 07:24 AM

Alhazred

    Learning Programmer

  • Members
  • PipPipPip
  • 99 posts
I have a form with several fields, each field is readonly and disabled by default.

On the right of each field I have a checkbox, if the user checks the checkbox, the field on the left must become editable, if the user unchecks the checkbox, the field must come back to be redonly and disabled.
I'm trying to do that with this code

<script type="text/javascript">
function toggleVariazione(field) 
{
    var campo = field.value.toString();
    if(document.registralibro.campo.disabled == true)
    { 
        document.registralibro.campo.disabled = false;
        document.registralibro.campo.readOnly = false;
    }
    else
    {
        document.registralibro.campo.disabled = true; 
        document.registralibro.campo.readOnly = true;
    }
}
</script>
//one of the fields
<textarea name='biografia' cols='40' rows='5' readonly disabled></textarea>
<input type='checkbox' name='variazioni[]' onclick='toggleVariazione(this)' value='biografia' />

//other fields below...
What should happen is:
- user checks the checkbox
- toggleVariazione() is called
- variable "campo" contains the value of the checkbox, which is the same as the field name to be switched
- the variable "campo" is used to get the field to be set editable or disabled

This doesn't work, I suppose because I can't use the variable "campo" to get the field object.
Is that the problem?

Is there a to do what I need?
I don't want to write a different function for each field.

#2
RhetoricalRuvim
Posted 13 October 2011 - 09:47 PM

RhetoricalRuvim

    JavaScript Programmer

  • Members
  • PipPipPipPipPipPipPipPip
  • 1,254 posts
  • Location:C:\Countries\US
Try this function: 
function change_state (field_id){ 

	var fld= document.getElementById (field_id); 

	var chk= document.getElementById ('checkbox_for_' + field_id);
field_id is the ID of the input field element that you are trying to enable/disable/etc.
'checkbox_for_' + (or, for PHP, .) field_id is the format of the ID attribute for the checkbox element.
Above, we just got the input element and saved it to fld, and got the checkbox element and saved it to chk. 

	if (chk.checked){
If the checkbox is checked, 

		fld.disabled= false; 

		fld.readOnly= false;
Enable the input field, and make sure it's not read-only. 

	} else {
Otherwise, disable and read-only the input field. 

		fld.disabled= true; 

		fld.readOnly= true; 

	} 

}

Here's an example of the function being used: 
<html> 

	<head> 

		<title> File 1 </title> 

	</head> 

	<body> 

		<h1> File 1 </h1> 

		<textarea id="txtarea1" disabled readonly>Hello World! 


Haha! You can't change me! Dont even try! </textarea> 

		<input id="checkbox_for_txtarea1" type="checkbox" onChange="change_state ('txtarea1');" /> 

		<script type="text/javascript"> 

			function change_state (field_id){ 

				var fld= document.getElementById (field_id); 

				var chk= document.getElementById ('checkbox_for_' + field_id); 

				if (chk.checked){ 

					fld.disabled= false; 

					fld.readOnly= false; 

				} else { 

					fld.disabled= true; 

					fld.readOnly= true; 

				} 

			} 

		</script> 

	</body> 

</html>

Back to JavaScript and CSS


1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users



  1. CODECALL Programming Forum
  2. → Web Development Forum
  3. → JavaScript and CSS
IPB skins by Skinbox