Which Is Better? 2

[arpan]

An HTML Form has 3 textboxes & each of the 3 textboxes has a corresponding checkbox (meaning 3 checkboxes). I want that when a user checks the 1st checkbox, the 1st textbox should get disabled. When he unchecks the 1st checkbox, the 1st textbox should be made editable. Same with the other 2 textboxes & checkboxes. In order to disable/enable the 3 textboxes, I framed the following code:

<script language=&quot;JavaScript&quot;>
function dt1(){
   if(document.myForm.chk1.checked==true){
       document.myForm.txt1.disabled=true
   }
   else{
        document.myForm.txt1.disabled=false
   }
}

function dt2(){
   if(document.myForm.chk2.checked==true){
       document.myForm.txt2.disabled=true
   }
   else{
        document.myForm.txt2.disabled=false
   }
}

function dt3(){
   if(document.myForm.chk3.checked==true){
       document.myForm.txt3.disabled=true
   }
   else{
        document.myForm.txt3.disabled=false
   }
}
</script>

<form name=&quot;myForm&quot; action=&quot;SomePage.html&quot;>
<input type=text name=&quot;txt1&quot;>
<input type=checkbox name=&quot;chk1&quot; onClick=&quot;dt1()&quot;>

<input type=text name=&quot;txt2&quot;>
<input type=checkbox name=&quot;chk2&quot; onClick=&quot;dt2()&quot;>

<input type=text name=&quot;txt3&quot;>
<input type=checkbox name=&quot;chk3&quot; onClick=&quot;dt3()&quot;>
</form>

The above code is working fine. But the same thing can be done in the following way also:

<script language=&quot;JavaScript&quot;>
function dt(){
   if(document.myForm.chk1.checked==true){
       document.myForm.txt1.disabled=true
   }
   else{
        document.myForm.txt1.disabled=false
   }
   
   if(document.myForm.chk2.checked==true){
       document.myForm.txt2.disabled=true
   }
   else{
        document.myForm.txt2.disabled=false
   }

   if(document.myForm.chk3.checked==true){
       document.myForm.txt3.disabled=true
   }
   else{
        document.myForm.txt3.disabled=false
   }
}
</script>

<form name=&quot;myForm&quot; action=&quot;SomePage.html&quot;>
<input type=text name=&quot;txt1&quot;>
<input type=checkbox name=&quot;chk1&quot; onClick=&quot;dt()&quot;>

<input type=text name=&quot;txt2&quot;>
<input type=checkbox name=&quot;chk2&quot; onClick=&quot;dt()&quot;>

<input type=text name=&quot;txt3&quot;>
<input type=checkbox name=&quot;chk3&quot; onClick=&quot;dt()&quot;>
</form>

As shown in the above 2 codes, in the 1st code, the 3 checkboxes invoke 3 different JavaScript functions whereas in the 2nd code snippet, only one JavaScript function is invoked by the 3 checkboxes. What I would like to know is which of the above 2 methods is better & why? Or is it because both the codes are client-side scripts, it doesn't make any difference whether the 1st route is adopted or the 2nd one?

Thanks,

Arpan

 

[dwarfthrower]

Code re-use is good because it promotes good programming techniques. It also means you have to type less. The second script you have is starting to look impressive.

Even Better:
[tt]
<script language=&quot;JavaScript&quot;>
function dt(objChkBox,objTxtFld){
if(objChkBox.checked==true){
objTxtFld.disabled=true
}
else{
objTxtFld.disabled=false
}
}
</script>

<form name=&quot;myForm&quot; action=&quot;SomePage.html&quot;>
<input type=text name=&quot;txt1&quot;>
<input type=checkbox name=&quot;chk1&quot; onClick=&quot;dt(this,document.myForm.txt1)&quot;>

<input type=text name=&quot;txt2&quot;>
<input type=checkbox name=&quot;chk2&quot; onClick=&quot;dt(this,document.myForm.txt2)&quot;>

<input type=text name=&quot;txt3&quot;>
<input type=checkbox name=&quot;chk3&quot; onClick=&quot;dt(this,document.myForm.txt2)&quot;>
</form>
[/tt]

_{Never be afraid to share your dreams with the world.
There's nothing the world loves more than the taste of really sweet dreams.}

 

[jemminger]

functionally, (no pun intended) i don't think one is any better than the other.

from a code-reuse/maintainability standpoint, the second would be better in my opinion, since you only have to maintain one function if the number of fields changes.

even better than that would be no maintenance at all:

<script type=&quot;text/javascript&quot;>
function dt(oCB){
	var x = oCB.name.match(/\d+/);		
	oCB.form[&quot;txt&quot; + x].disabled = oCB.checked;
}
</script>

<form name=&quot;myForm&quot; action=&quot;SomePage.html&quot;>
<input type=text name=&quot;txt1&quot;>
<input type=checkbox name=&quot;chk1&quot; onClick=&quot;dt(this)&quot;>

<input type=text name=&quot;txt2&quot;>
<input type=checkbox name=&quot;chk2&quot; onClick=&quot;dt(this)&quot;>

<input type=text name=&quot;txt3&quot;>
<input type=checkbox name=&quot;chk3&quot; onClick=&quot;dt(this)&quot;>
</form>

=========================================================
-jeff

http://www.jeffemminger.com

try { succeed(); } catch(E) { tryAgain(); }

 

[clarkin]

Good solutions - [smilejap]

Posting code? Wrap it with code tags: [ignore]

[/ignore][code]CodeHere

[ignore][/code][/ignore].