PDA

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



pxlcreations
Jul 26th, 2011, 07: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
Jul 26th, 2011, 11:14 PM
To toggle you can use something like this.



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

DaveyErwin
Jul 26th, 2011, 11:39 PM
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
Jul 27th, 2011, 12: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
Jul 27th, 2011, 03: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
Jul 27th, 2011, 11:24 AM
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
Jul 27th, 2011, 01: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
Jul 27th, 2011, 02: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
Jul 28th, 2011, 01: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
Jul 28th, 2011, 07:36 AM
jmrker - don't rise to the bait. This guy would go into an empty room and start an argument.

prosv
Feb 5th, 2012, 11:54 AM
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
Feb 5th, 2012, 01:22 PM
Looking at siberia-man's code:-

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

prosv
Feb 25th, 2012, 06:03 PM
Hi Bullant,
Can you please change the event handler from button mode to input button.

Philip M
Feb 25th, 2012, 06:51 PM
No use asking bullant! He has been banned from the forum. :cool:

jmrker
Feb 25th, 2012, 08:31 PM
Whoops, see next post ... :o

:)

jmrker
Feb 25th, 2012, 08: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()">