Enabling textboxes

•

What is DaniWeb IT Discussion Community?

You're currently browsing the JavaScript / DHTML / AJAX section within the Web Development category of DaniWeb, a massive community of 423,538 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 4,292 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.

Join our community!

Please support our JavaScript / DHTML / AJAX advertiser: Lunarpages Web Hosting

Thread Tools Display Modes

Views: 727 | Replies: 2

•

Join Date: Dec 2007

Posts: 3

Reputation: saranya_arun is an unknown quantity at this point

Rep Power: 0

Solved Threads: 0

saranya_arun saranya_arun is offline

Offline

Newbie Poster

Enabling textboxes

Jan 5th, 2008

I have 4 radio buttons and 4 text boxes, say for eg: r1, r2, r3 and r4 and t1, t2, t3 and t4 respectively. On load of the page all 4 text boxes will be disabled, when i click on r1, t1 must get enabled. When i click on r2, t2 must be enabled, similarly the other two. This works fine for me. However, when i click r2 only t2 must be enabled and all the other text boxes must be disabled. That is, if i click r1 first (t1 will be enabled) then click r2 (t2 will be enabled in addition to t1 being enabled) i want only t2 being enabled. How do i disabled t1 and enable t2 on the same click?

Can some one help me?

•

Join Date: Sep 2005

Posts: 689

Reputation: digital-ether has a spectacular aura about

Rep Power: 6

Solved Threads: 41

digital-ether digital-ether is offline

Offline

Practically a Master Poster

Re: Enabling textboxes

Jan 7th, 2008

•

Originally Posted by saranya_arun

I have 4 radio buttons and 4 text boxes, say for eg: r1, r2, r3 and r4 and t1, t2, t3 and t4 respectively. On load of the page all 4 text boxes will be disabled, when i click on r1, t1 must get enabled. When i click on r2, t2 must be enabled, similarly the other two. This works fine for me. However, when i click r2 only t2 must be enabled and all the other text boxes must be disabled. That is, if i click r1 first (t1 will be enabled) then click r2 (t2 will be enabled in addition to t1 being enabled) i want only t2 being enabled. How do i disabled t1 and enable t2 on the same click?

Can some one help me?

Post some of your code so that we can take a look at it.

www.fijiwebdesign.com - web design and development and fun
Cpanel Email - Let users Register email accounts on your website upon registration
Ajax Chat - Fully browser based chat!

•

Join Date: Jun 2006

Location: India

Posts: 6,851

Reputation: ~s.o.s~ is a splendid one to behold

Rep Power: 23

Solved Threads: 344

~s.o.s~

Offline

Lazy, Useless & Apathetic

Re: Enabling textboxes

Jan 7th, 2008

You should be able to achieve what you want by making small changes in your existing code. Paste your code as digital-ether mentioned so we can give some suggestions. Here is how I would personally do it:

Help with Code Tags

(Toggle Plain Text)

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Test</title>
    <script type="text/javascript">
    function init() {
        initEvents();
    }

    function initEvents() {
        var radDiv = document.getElementById && document.getElementById("divRadio");
        var txtDiv = document.getElementById && document.getElementById("divText");
        if(!radDiv || !txtDiv) {
            return;
        }
        var radGroup = radDiv.getElementsByTagName("input");
        var txtGroup = txtDiv.getElementsByTagName("input");
        for(var i = 0, max = radGroup.length; i < max; ++i) {
            var r = radGroup[i];
            addEvent(r, "click", (function(r, i) {
                return(function() {
                    for(var j = 0, max = txtGroup.length; j < max; ++j) {
                        if(j == i) {
                            txtGroup[j].disabled = false;
                        }
                        else {
                            txtGroup[j].disabled = true;
                        }
                    }
                });
            })(r, i));
        }
    }

    function addEvent(el, ev, fn) {
        if(el.addEventListener) {
            el.addEventListener(ev, fn, false)
        }
        else {
            el.attachEvent('on' + ev, fn)
        }
    }
    window.onload = init;
    </script>
</head>
<body id="body">
    <form id="frm" name="frm" action="#">
        <div id="divText">
            <input name="txtOne" value="Text One" disabled="disabled" /><br />
            <input name="txtTwo" value="Text Two" disabled="disabled" /><br />
            <input name="txtThree" value="Text Three" disabled="disabled" /><br />
        </div>
        <br />
        <div id="divRadio">
            <input type="radio" name="rad" id="radOne" value="one" />
            <label for="radOne">One</label><br />
            <input type="radio" name="rad" id="radTwo" value="two" />
            <label for="radTwo">Two</label><br />
            <input type="radio" name="rad" id="radThree" value="three" />
            <label for="radThree">Three</label><br />
        </div>
    </form>
</body>
</html>

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Test</title>
    <script type="text/javascript">
    function init() {
        initEvents();
    }

    function initEvents() {
        var radDiv = document.getElementById && document.getElementById("divRadio");
        var txtDiv = document.getElementById && document.getElementById("divText");
        if(!radDiv || !txtDiv) {
            return;
        }
        var radGroup = radDiv.getElementsByTagName("input");
        var txtGroup = txtDiv.getElementsByTagName("input");
        for(var i = 0, max = radGroup.length; i < max; ++i) {
            var r = radGroup[i];
            addEvent(r, "click", (function(r, i) {
                return(function() {
                    for(var j = 0, max = txtGroup.length; j < max; ++j) {
                        if(j == i) {
                            txtGroup[j].disabled = false;
                        }
                        else {
                            txtGroup[j].disabled = true;
                        }
                    }
                });
            })(r, i));
        }
    }

    function addEvent(el, ev, fn) {
        if(el.addEventListener) {
            el.addEventListener(ev, fn, false)
        }
        else {
            el.attachEvent('on' + ev, fn)
        }
    }
    window.onload = init;
    </script>
</head>
<body id="body">
    <form id="frm" name="frm" action="#">
        <div id="divText">
            <input name="txtOne" value="Text One" disabled="disabled" /><br />
            <input name="txtTwo" value="Text Two" disabled="disabled" /><br />
            <input name="txtThree" value="Text Three" disabled="disabled" /><br />
        </div>
        <br />
        <div id="divRadio">
            <input type="radio" name="rad" id="radOne" value="one" />
            <label for="radOne">One</label><br />
            <input type="radio" name="rad" id="radTwo" value="two" />
            <label for="radTwo">Two</label><br />
            <input type="radio" name="rad" id="radThree" value="three" />
            <label for="radThree">Three</label><br />
        </div>
    </form>
</body>
</html>

Last edited by ~s.o.s~ : Jan 7th, 2008 at 1:27 pm.

I don't accept change. I don't deserve to live.

Happiness corrupts people.

Failing to value the lives of others cheapens your own.