Web Analytics Made Easy - StatCounter Enable Input Boxes upon Checkbox being Checked - CodingForum

Announcement

Collapse
No announcement yet.

Enable Input Boxes upon Checkbox being Checked

Collapse
X
Collapse
 
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
  • #1

    Enable Input Boxes upon Checkbox being Checked

    Hi

    I have a series of input boxes on a form (text fields) - these will be populated with data.

    Initially I would like them all disabled (read only) and when a checkbox is checked at the top of the form (to say - update?) - the input boxes will then be enabled....

    Any idea how to do this?

    Ta
    Tags: None
  • #2
    PHP Code:
    <html>
    <    head>
    </    head>
    <    script>
    function     enable(){
    document.forms[0].a.disabled = false;
    }
    </    script>
    <    body>
    <    form>
    <    input type="checkbox" onclick="enable()">
    <    input name="a" type="text" disabled>
    </    form>
    </    body>
    </    html> 
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

    Comment

    • #3
      In addition to Kor's method.
      Here's another method which loops thru all of the elements.
      Code:
      <script type="text/javascript">
 <!--//
  function upDate(){
   var obj = document.forms[0];
    for(var i=0; i<obj.elements.length; i++){
      if(obj.enable.checked==true){
         obj.elements[i].disabled = false;
      }
      else{
       obj.elements[i].disabled = true;
       obj.enable.disabled = false;
      }         
    }
  }
 // -->
</script>
</HEAD>

<BODY onload="upDate()">
<form>
Check to update: <input type="checkbox" name="enable" onclick="upDate()"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="submit" value="submit"><br>
</form>
      .....Willy

      Comment

      • #4
        Wicked - cheers!!

        Comment

        • #5
          This stuff is real good! I've tried it out my self, but I'm kind of stuck.

          Basically, how would I alter this code if I had say 5 checkboxes next to 5 text boxes, and I wanted the relevant text box to be enabled as soon as the checkbox adjacent to it was ticked.

          I've tried doing it myself, but I ended up with repeating the code for each set of checkboxes and text boxes! Is there a more efficient way?

          Thanks!

          Comment

          • #6
            Use Kor's method but pass the element name thru the function.
            Code:
            <html>
<head>
</head>
<script type="text/javascript">
function enable(elm){
document.forms[0][elm].disabled = false;
}
</script>
<body>
<form>
<input type="checkbox" onclick="enable([color=red]'a'[/color])">
<input name="a" type="text" disabled><br>
<input type="checkbox" onclick="enable([color=red]'b'[/color])">
<input name="b" type="text" disabled><br>

</form>
</body>
</html>
            .....Willy

            Comment

            • #7
              Hey willy... Any apparent errors here? Its showing errors. I had your original workin' and did some editations to it and had them working for the most part. Here's what I have now and returning errors.


              //MY JAVASCRIPT


              var obj = document.payment;
              function creditUpdate(){
              if(obj.credit.checked==true){
              obj.cardnumber.disabled = false;
              obj.nameoncard.disabled = false;
              obj.routingnumber.disabled = true;
              obj.accountnumber.disabled = true;
              obj.accountname.disabled = true;
              obj.check.checked = false;
              obj.check.disabled = false;
              obj.submission.value = 'Payment: Credit';
              }
              }
              function checkUpdate(){
              if(obj.check.checked==true){
              obj.cardnumber.disabled = true;
              obj.nameoncard.disabled = true;
              obj.routingnumber.disabled = false;
              obj.accountnumber.disabled = false;
              obj.accountname.disabled = false;
              obj.credit.checked = false;
              obj.credit.disabled = false;
              obj.submission.value = 'Payment: Check';
              }
              }


              //MY FORM BELOW

              <form name="payment">
              Credit: <input type="checkbox" name="credit" onclick="creditUpdate()"><br>
              Card Number<input type="text" name="cardnumber"><br>
              Name<input type="text" name="nameoncard"><p>

              Check: <input type="checkbox" name="check" onclick="checkUpdate()"><br>
              Name<input type="text" name="accountname"><br>
              Routing Number<input type="text" name="routingnumber"><br>
              Account Number<input type="text" name="accountnumber"><p>
              <input type="submit" name="submission" value="submit"><br>
              </form>

              Comment

              • #8
                There is no need to use two of those functions.
                One will do by passing the form reference thru the function. eg: (obj)

                Also, Radio Buttons are meant to be used for such a form choice (credit or check) and although you can use checkboxes as radio buttons you will need to loop thru the checkbox array to do it. The way you had it coded did not and will not work.

                Here is a working example of your script using radio buttons:
                Code:
                <script type="text/javascript">
 <!--//
  function chkType(obj){
    if(obj.payType[0].checked==true){
       obj.cardnumber.disabled = false;
       obj.nameoncard.disabled = false;
       obj.routingnumber.disabled = true;
       obj.accountnumber.disabled = true;
       obj.accountname.disabled = true;
       obj.submission.value = 'Payment: Credit';
       obj.cardnumber.focus();
    }

    if(obj.payType[1].checked==true){
       obj.cardnumber.disabled = true;
       obj.nameoncard.disabled = true;
       obj.routingnumber.disabled = false;
       obj.accountnumber.disabled = false;
       obj.accountname.disabled = false;
       obj.submission.value = 'Payment: Check';
       obj.accountname.focus();
    }
  }
 //-->
</script>
</HEAD>

<BODY>
<form name="payment">
Credit: <input type="radio" name="payType" onclick="chkType(form)"><br>
Card Number<input type="text" name="cardnumber"><br>
Name<input type="text" name="nameoncard"><p>

Check: <input type="radio" name="payType" onclick="chkType(form)"><br>
Name<input type="text" name="accountname"><br>
Routing Number<input type="text" name="routingnumber"><br>
Account Number<input type="text" name="accountnumber"><p>
<input type="submit" name="submission" value="submit"><br>
</form>
                .....Willy

                Comment

                Previous template Next
                Working...
                X