...

View Full Version : Script to enable/disable input elements?



pxlcreations
07-26-2011, 08:55 PM
Hi guys, it's been a while since I've been here :D

Anyways, I'm wondering if it's possible for a script to enable/disable all input elements on the page with some sort of toggle button.

I googled it but didn't find anything too useful except for this:

http://www.codetoad.com/javascript/enable_disable_form_element.asp

but I'm not sure how to edit it for the toggle.

Thanks!

Jazzo
07-27-2011, 12:14 AM
To toggle you can use something like this.



if (input.disabled) {
input.disabled = false;
}
else {
input.disabled = true;
}

DaveyErwin
07-27-2011, 12:39 AM
Here is something to get you started...


<html>
<body>
<input>
<Input type = "radio" Name = "r1" Value = "NE">North East
<Input type = "radio" Name = "r1" Value = "NW">North West
<Input type = "radio" Name = "r1" Value = "SE">South East
<Input type = "radio" Name = "r1" Value = "SW">South West
<Input type = "radio" Name = "r1" Value = "midlands">Midlands
<input type="checkbox" name="checkgroup" checked />
<input type="checkbox" name="checkgroup" />
<input type="checkbox" name="checkgroup" checked />
<input type="textarea"></textarea>

<script>
a =document.getElementsByTagName("INPUT")
for(var i = a.length;i--;)a[i].disabled=true;
</script>
</body>
</html>

bullant
07-27-2011, 01:47 AM
Maybe use this demo as a guide.

Click the Disable/Enable button to enable/disable all the inputs.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title></title>
<style type="text/css"></style>
<script type="text/javascript">
function toggleInputs(btnO){
var inpsO = document.getElementsByTagName('input');
var state = (btnO.toggle == 'Disable')? true : false;
for(i=0; i < inpsO.length; i++){
inpsO[i].disabled = state;
}
btnO.toggle = (btnO.toggle == 'Disable')? 'Enable' : 'Disable';
btnO.innerHTML = btnO.toggle + ' inputs';
}
window.onload=function(){
document.getElementById('btnToggle').toggle = 'Disable';
document.getElementById('btnToggle').onclick=function(){
toggleInputs(this);
}
}
</script>
</head>
<body>
<div>
<input type="text" name="txt1" />
<input type="checkbox" name="chk1" />
</div>
<div>
<button id="btnToggle">Disable inputs</button>
</div>
</body>
</html>

jmrker
07-27-2011, 04:12 AM
Similar to 'bullant' control button using 'DaveyErwin's code (expanded)...


<html>
<body>
<input>
<br>
<Input type = "radio" Name = "r1" Value = "NE">North East
<Input type = "radio" Name = "r1" Value = "NW">North West
<Input type = "radio" Name = "r1" Value = "SE">South East
<Input type = "radio" Name = "r1" Value = "SW">South West
<Input type = "radio" Name = "r1" Value = "midlands">Midlands
<br>
<input type="checkbox" name="checkgroup" checked id="master"
onchange="alter(this.id)" />MASTER
<input type="checkbox" name="checkgroup" />
<input type="checkbox" name="checkgroup" checked />
<br>
<input type="textarea"></textarea>

<script>
function alter(IDS) {
var flag = document.getElementById(IDS).checked;
var a =document.getElementsByTagName("INPUT")
for(var i = a.length;i--;) {
if (a[i].id != 'master') { if (flag) { a[i].disabled=true; }
else { a[i].disabled=false; }
}
}
}
window.onload = function() { alter('master'); }
</script>

</body>
</html>

bullant
07-27-2011, 12:24 PM
Similar to 'bullant' control button using 'DaveyErwin's code (expanded)...


My control button in the demo I posted doesn't use DaveyErwin's code and it doesn't use inline scripting either

jmrker
07-27-2011, 02:49 PM
My control button in the demo I posted doesn't use DaveyErwin's code and it doesn't use inline scripting either

I did not say is was the same, I said similar in that it reserves one of the elements to allow for changing the values of the other elements without locking-out the user from the initial settings.

I don't care which code the OP uses, just gives some insight as to how the problem could be solved in alternative ways. I see nothing wrong with your code and the OP can make his/her own decision about the efficacy to suit their own needs.

;):D

siberia-man
07-27-2011, 03:55 PM
Simple function is here:



/*

This function toggles (enable/disable) all inputs on a page
The 'toggler' argument points to the toggling element (checkbox, button, etc)
It should not be disabled anyway

*/
function toggleInputs(toggler)
{
// Toggle the general flag
arguments.callee.disabled = ! arguments.callee.disabled;

// Gather all inputs
var inputs = document.getElementsByTagName('input');

// Set the disabled attribute for all inputs
for (var i = 0; i < inputs.length; i++) {
inputs[i].disabled = arguments.callee.disabled;
}

// toggler should be enabled always!!!
var control = typeof toggler == 'string' ? document.getElementById(toggler) : toggler;
control.disabled = false;
};

bullant
07-28-2011, 02:07 AM
I did not say is was the same, .....

ok, but your statement was at best ambiguous and so maybe punctuation in appropriate locations in future statements will make what you mean more clear :).

Philip M
07-28-2011, 08:36 AM
jmrker - don't rise to the bait. This guy would go into an empty room and start an argument.

prosv
02-05-2012, 12:54 PM
Thanks for the script for which I am looking since a long time. Cab somebody further reform and change the event handler from button to input button. I have tried but getting some runtime error.

Philip M
02-05-2012, 02:22 PM
Looking at siberia-man's code:-

Note that the 5th edition of ECMAScript forbids use of arguments.callee() in strict mode.

prosv
02-25-2012, 07:03 PM
Hi Bullant,
Can you please change the event handler from button mode to input button.

Philip M
02-25-2012, 07:51 PM
No use asking bullant! He has been banned from the forum. :cool:

jmrker
02-25-2012, 09:31 PM
Whoops, see next post ... :o

:)

jmrker
02-25-2012, 09:33 PM
Hi Bullant,
Can you please change the event handler from button mode to input button.

<button onclick="doSomething()">Button Label</button>

is pretty much the same as

<input type="button" value="Button Label" onclick="doSomething()">



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum