/    Sign up×
Community /Pin to ProfileBookmark

Click a check box to disable some form fields

Copy linkTweet thisAlerts:
Jul 21.2005

Ive searched and havent found anything that I could use for what I am looking to do.

Basically I have two address parts on my form, I need something so that clicking a “same as” checkbox, the second address form becomes disabled and users cant input anything.

Problem is I need to disable some text boxes, another checkbox and three selects… but I would like when you click on the checkbox saying its “same as” — it will pop the values into the form, and THEN disable it, that way you see values. How can I do this?

*scratching head*

PayPal reward??

to post a comment
JavaScript

8 Comments(s) ↴

Copy linkTweet thisAlerts:
@Jonny_LangJul 21.2005 — I have a name, and it's not "first one." So, I deleted, "first one."
Copy linkTweet thisAlerts:
@bathurst_guyJul 21.2005 — I was whipping up this and the other guy posted
[CODE]<script type="text/javascript">
function sameAs(){
document.form.textfield3.disabled = "true";
document.form.textfield4.disabled = "true";
var textfield1 = document.form.textfield1.value;
var textfield2 = document.form.textfield2.value;
document.form.textfield3.value = textfield1;
document.form.textfield4.value = textfield2;
}
</script>
</head>

<body>
<form name="form" method="post" action="">
<p>
<input name="textfield1" type="text" id="textfield1">
</p>
<p>
<input type="text" name="textfield2">
</p>
<p>
<input type="checkbox" name="checkbox" value="checkbox" onChange="sameAs()">
Same As Above</p>
<p>
<input id="textfield3" type="text" name="textfield3" title="name2">
</p>
<p>
<input name="textfield4" type="text" id="textfield4">
</p>
</form>
</body>
</html>
[/CODE]
Simple version lol but woulda gave u an idea
Copy linkTweet thisAlerts:
@KorJul 21.2005 — Something like this?:
[code=php]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
var v=new Array()//pairs boxname/value
v[0]=['box1name','123'];
v[1]=['box2name','456'];
v[2]=['box3name','789'];
//and so on
function dis(f,c){
if(c.checked){
for(var i=0;i<v.length;i++){
subdis(f,v[i][0],v[i][1],true)
}
}
else{
for(var i=0;i<v.length;i++){
subdis(f,v[i][0],'',false)
}
}
}
function subdis(f,o,v,d){
f.elements[o].value=v;
f.elements[o].disabled=d;
}
</script>
</head>
<body>
<form>
<input type="checkbox" value="same as" onclick="dis(this.form,this)">
<br>
<br>
<input name="box1name" type="text"><br>
<input name="box2name" type="text"><br>
<input name="box3name" type="text"><br>

</form>
</body>
</html>
[/code]
Copy linkTweet thisAlerts:
@sparqauthorJul 21.2005 — First one worked, gonna look at the other two as well.

I really appreciate it, now ive just got to get some functionality in place and get it to work my way. Hopefully I wont have any problems, If I have any problems I will make a reply with the code as modified to fit my needs to see what you guys and gals can come up with.

<i>
</i>&lt;HTML&gt;
&lt;Head&gt;
&lt;Script Language=JavaScript&gt;

<i> </i>function xferData(isForm,isState){

<i> </i> if (isState)
<i> </i> {
<i> </i> isForm.shipAddress.value = isForm.billAddress.value;
<i> </i> isForm.shipCity.value = isForm.billCity.value
<i> </i> isForm.shipState.selectedIndex = isForm.billState.selectedIndex;
<i> </i> isForm.shipZip.selectedIndex = isForm.billZip.selectedIndex;
<i> </i> isForm.shipBox.checked = isForm.billBox.checked;
<i> </i> isForm.shipAddress.disabled = true;
<i> </i> isForm.shipCity.disabled = true;
<i> </i> isForm.shipState.disabled = true;
<i> </i> isForm.shipZip.disabled = true;
<i> </i> isForm.shipBox.disabled = true;

<i> </i> }
<i> </i> else {
<i> </i> isForm.shipAddress.value = "";
<i> </i> isForm.shipCity.value = "";
<i> </i> isForm.shipState.selectedIndex = 0;
<i> </i> isForm.shipZip.selectedIndex = 0;
<i> </i> isForm.shipBox.checked = false;
<i> </i> isForm.shipAddress.disabled = false;
<i> </i> isForm.shipCity.disabled = false;
<i> </i> isForm.shipState.disabled = false;
<i> </i> isForm.shipZip.disabled = false;
<i> </i> isForm.shipBox.disabled = false;
<i> </i> }
<i> </i>}

&lt;/Script&gt;
&lt;/Head&gt;
&lt;Body&gt;
&lt;Form name='Form1'&gt;
Bill To:&lt;br&gt;
Address: &lt;input type=text size=15 name='billAddress' &gt;&lt;br&gt;
City: &lt;input type=text size=15 name='billCity'&gt;&lt;br&gt;
State:
&lt;Select name='billState'&gt;
&lt;option selected value=''&gt; Make a Selection&lt;/option&gt;
&lt;option value='California'&gt; California &lt;/option&gt;
&lt;option value='Texa'&gt; Texas &lt;/option&gt;
&lt;/Select&gt;
&lt;br&gt;
Zip: &lt;Select name='billZip'&gt;
&lt;option selected value='0'&gt;Make a Selection&lt;/option&gt;
&lt;option value='12345'&gt; 12345 &lt;/option&gt;
&lt;option value='14523'&gt; 14523 &lt;/option&gt;
&lt;/Select&gt;&lt;br&gt;
&lt;br&gt;
Some box: &lt;input type=checkbox name='billBox'&gt;
&lt;br&gt;
&lt;br&gt;
Shipping Address Same As Billing Address? &lt;input type=checkbox onclick="xferData(this.form,this.checked)"&gt;
&lt;br&gt;
&lt;br&gt;
Ship To:&lt;br&gt;
Address: &lt;input type=text size=15 name='shipAddress'&gt;&lt;br&gt;
City: &lt;input type=text size=15 name='shipCity'&gt;&lt;br&gt;
State:
&lt;Select name='shipState'&gt;
&lt;option selected value=''&gt;Make a Selection&lt;/option&gt;
&lt;option value='California'&gt; California &lt;/option&gt;
&lt;option value='Texa'&gt; Texas &lt;/option&gt;
&lt;/Select&gt;&lt;br&gt;
Zip: &lt;Select name='shipZip'&gt;
&lt;option selected value='0'&gt;Make a Selection&lt;/option&gt;
&lt;option value='12345'&gt; 12345 &lt;/option&gt;
&lt;option value='14523'&gt; 14523 &lt;/option&gt;
&lt;/Select&gt;
&lt;br&gt;
Some box: &lt;input type=checkbox name='shipBox'&gt;
&lt;/Form&gt;
&lt;/Body&gt;
&lt;/HTML&gt;
Copy linkTweet thisAlerts:
@sparqauthorJul 21.2005 — Something like this?:
[code=php]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
var v=new Array()//pairs boxname/value
v[0]=['box1name','123'];
v[1]=['box2name','456'];
v[2]=['box3name','789'];
//and so on
function dis(f,c){
if(c.checked){
for(var i=0;i<v.length;i++){
subdis(f,v[i][0],v[i][1],true)
}
}
else{
for(var i=0;i<v.length;i++){
subdis(f,v[i][0],'',false)
}
}
}
function subdis(f,o,v,d){
f.elements[o].value=v;
f.elements[o].disabled=d;
}
</script>
</head>
<body>
<form>
<input type="checkbox" value="same as" onclick="dis(this.form,this)">
<br>
<br>
<input name="box1name" type="text"><br>
<input name="box2name" type="text"><br>
<input name="box3name" type="text"><br>

</form>
</body>
</html>
[/code][/QUOTE]
Kor, simple with text boxes... But my city / state / avenue ID boxes are all select boxes, and I have a checkbox as well that would need to get checked/disabled as well. So unfortunately something like this wont work.

The first example posted was fantastic, it works -- but I am just NOT getting it to work the way I need it yet. Gonna take one more stab at it before I post for some more help. Some days im better off just staying home and sleeping in bed :p
Copy linkTweet thisAlerts:
@KorJul 22.2005 — ok, I could have misunderstood... So, can u detail what u need? If a checkbox is checked some options are shown in some select elements and those selects should be disabled? back and forth (when unchecked, the selects are lead to their initial state)?
Copy linkTweet thisAlerts:
@sparqauthorJul 22.2005 — Kor, yeah heres what I needed.

I needed a user input area consisting of not just text boxes, but select boxes as well as checkboxes. The example posted by Jonny Lang was exactly what I was looking for, it works flawlessly -- even though he deleted his code, because I didn't call him by his name -- you can find a copy of it in my reply above.
Copy linkTweet thisAlerts:
@KorJul 22.2005 — [code=php]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
var s;
var names=[];
function autofill(isC){
var j=0;
var secObj = document.getElementById('second')
var cloned = document.getElementById('first').cloneNode(true);
var ele = cloned.getElementsByTagName('*');
for (var i=0;i<ele.length;i++){
if(ele[i].tagName.toLowerCase()=='select'){
ele[i].selectedIndex=s;
}
if(ele[i].name){
ele[i].name = names[j];
ele[i].disabled=(isC)?true:false;
j++}
}
cloned.setAttribute('id','second');
document.getElementById('first').parentNode.replaceChild(cloned,secObj)
}
onload=function(){
var ele = document.getElementById('second').getElementsByTagName('*')
for (var i=0;i<ele.length;i++){
if(ele[i].name){names[names.length]=ele[i].name}
}
}
</script>
</head>
<body>
<form>
<div id="first">
<input name="txt1" type="text">
<br>
<select name="sel1" onchange="s=this.selectedIndex">
<option value="1">1</option>
<option value="12">12</option>
<option value="123">123</option>
</select>
<br>
<input name="che1" type="checkbox">
</div>
<hr>
<input type="checkbox" onclick="autofill(this.checked)"> wanna fill below with the same values?
<hr>
<div id="second">
<input name="txt2" type="text">
<br>
<select name="sel2">
<option value="1">1</option>
<option value="12">12</option>
<option value="123">123</option>
</select>
<br>
<input name="che2" type="checkbox">
</div>
</form>
</body>
</html>
[/code]
×

Success!

Help @sparq spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.16,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...