How to dynamically display value of a textbox

Question

I am having 3 radio buttons approved and rejected and 4 text fields and text boxes..

If i am clicking r1, all the text field and text boxes should be hided. but if i am clicking r2 and r3 the text field and text box should be displayed..

This is the code which i have used

if(approved.checked == true) {

  reason.style.visibility="hidden";

  Reason.style.visibility="hidden";
  sanction.style.visibility="display";
  sanctioned.style.visibility="display";
}

if(rejected.checked == true) {
    reason.disabled =false;
  reason.style.display="none";
  Reason.style.display="none";
  sanction.style.visibility="hidden";
  sanctioned.style.visibility="hidden";
}

This code is working for the first time when i click those radio buttons. But if am clicking rejected and then clicking approved it is not working.

Please try to use the formatting tool when posting code samples. (fixed it for you this time) :] — Tieson T.
– Tieson T., Commented Nov 23, 2011 at 5:07
Hmm. display:none and visibility:hidden are not completely analogous. I'd use one or the other, but not both. — Tieson T.
– Tieson T., Commented Nov 23, 2011 at 5:10
@TiesonT. I tried without using display:none also. Even then it was not working — Amith
– Amith, Commented Nov 23, 2011 at 5:12

RobG · Accepted Answer · 2011-11-23 05:22:45Z

2

Valid values for visibility are: visible | hidden | collapse | inherit

The short answer: use visible instead of display.

So your code can be (assuming the variables are references to suitable DOM elements):

if(approved.checked) {
  reason.disabled = true;   // keep symetry with next loop
  reason.style.visibility = "hidden";
  Reason.style.visibility = "hidden";
  sanction.style.visibility = "visible";
  sanctioned.style.visibility = "visible";
}

if(rejected.checked) {
  reason.disabled = false;
  reason.style.visibility = "hidden";
  Reason.style.visibility  = "hidden";
  sanction.style.visibility = "hidden";
  sanctioned.style.visibility = "hidden";
}

Note that it is simpler to hide the form controls by putting them inside another element (say a div) and hiding that. But why not just disable them? Hiding and showing them might annoy, distract or just plain confuse users.

edited Nov 23, 2011 at 5:22

answered Nov 23, 2011 at 5:17

RobG

148k32 gold badges180 silver badges216 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Amith Over a year ago

This is working fine. Thanks for your valuable quick suggestion.

Artur Keyan · Accepted Answer · 2011-11-23 05:26:40Z

0

in the first instead of reason.style.visibility="hidden you can use a jQuery function .hide() and .show(),

<script type="text/javascript">
    $(function () {

        $('input[type="radio"]').change(function () {
            if (this.id == r1) { 
                $('#textes').hide();
            }
            else
            {
                $('#textes').shwo();
            }
        })
        if (approved.checked == true)

    })
</script>

<div id="textes">
/*your chack  text fields and text boxes..*/
</div>

http://jsfiddle.net/rEK87/1/

edited Nov 23, 2011 at 5:26

answered Nov 23, 2011 at 5:14

Artur Keyan

7,69312 gold badges54 silver badges65 bronze badges

2 Comments

Artur Keyan Over a year ago

in my answer I use jQuery, do you know jQuery?

Amith Over a year ago

I have not yet used jQuery. So if you could give up with a solution in JavaScript that would be greatfull..

Tieson T. · Accepted Answer · 2017-01-02 08:12:52Z

0

Per your examples and our comments above, is this what you are after?

Markup:

<form>
    <input type="radio" name="rdo" id="r1" />
    <label for="r1">Approved</label>
    <input type="radio" name="rdo" id="r2" />
    <label for="r2">Rejected</label>
</form>
<div id="accepted">
    <p>This is the accepted block.</p>
</div>
<div id="rejected">
    <p>This is the rejected block.</p>
</div>

CSS:

#accepted, #rejected
{
    display:none;
}

jQuery:

$(function(){
    $('#r1').click(function(e){
        $('#accepted').show();
        $('#rejected').hide();
    }); 

        $('#r2').click(function(e){
        $('#accepted').hide();
        $('#rejected').show();
    }); 
});

http://jsfiddle.net/rEK87/

edited Jan 2, 2017 at 8:12

answered Nov 23, 2011 at 5:21

Tieson T.

21.2k6 gold badges82 silver badges99 bronze badges

Collectives™ on Stack Overflow

How to dynamically display value of a textbox

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related