SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast Kinaski's Avatar
    Join Date
    Dec 2007
    Location
    Macedonia
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    checkbox checked event (js or mootools)

    Hi all,

    I will appreciate some help on this problem. I'm constructing a form where I'll have an inter-dependable fields ie: when one checkbox is checked the next text field should appear.

    Was messing with this quite a bit but wasn't able to solve it. So what I need to know is there an event on checkboxes which can fire if checked /unchecked ?

    Either pure js or mootools code will do.
    HTML Code:
     <input name="myCheckbox" type="checkbox" class="check" id="myCheckbox" />
    And if checked the next text field should appear:
    HTML Code:
    <input type="text" size="20" name="myTextField" maxlength="80" class="textfield spec" id="myTextField" />
    The again if unchecked the textfield should dissapear.

    Thanx for any insight..

  2. #2
    SitePoint Enthusiast
    Join Date
    Oct 2006
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Use a onclick event or something on the check box and use style display none on the text box.

    <input onclick="checkChecked(this);" name="myCheckbox" type="checkbox" class="check" id="myCheckbox" />

    <input style="display:none:" type="text" size="20" name="myTextField" maxlength="80" class="textfield spec" id="myTextField" />

    then in checkChecked() do something like this

    function checkChecked(obj)
    {
    if(obj.checked)
    {
    document.getElementById('myTextField').style.display = '';
    }
    else
    {
    document.getElementById('myTextField').style.display = 'none';
    }
    }

    Its untested but you get the idea. Probably a better way with event handlers without having to use the onclick event inline.

  3. #3
    SitePoint Enthusiast Kinaski's Avatar
    Join Date
    Dec 2007
    Location
    Macedonia
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by tbobker View Post
    Use a onclick event or something on the check box and use style display none on the text box.

    <input onclick="checkChecked(this);" name="myCheckbox" type="checkbox" class="check" id="myCheckbox" />

    <input style="display:none:" type="text" size="20" name="myTextField" maxlength="80" class="textfield spec" id="myTextField" />

    then in checkChecked() do something like this

    function checkChecked(obj)
    {
    if(obj.checked)
    {
    document.getElementById('myTextField').style.display = '';
    }
    else
    {
    document.getElementById('myTextField').style.display = 'none';
    }
    }

    Its untested but you get the idea. Probably a better way with event handlers without having to use the onclick event inline.
    Hey Thanks A Lot mate! This really helped me!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •