Question

I’ve got a form with some radio buttons in it. When a link is clicked, the value of the selected radio button is passed to a text field. If the value is ‘0’, the text ‘Not required’ is given to a div, overwriting where the output would have been if it wasn’t ‘0’.

When you click the ‘0’ radio button then click the link, it works as it should. The problem is that if you change to a different radio button then click the link again, the text remains. What I want to happen is for that message to only appear when the ‘0’ is selected and for it to be removed if a non-‘0’ is chosen.

I’ve set it up on http://jsfiddle.net/thewebdes/gnW2c/ so you can see what I mean. In the actual project, the ‘Not required’ text will overwrite anything else that would have appeared so clearing the html using jquery at the beginning of the click function is a no-go.

HTML

<form action="#" method="post">
    <label for="item1_qty1">0</label>
    <input type="radio" id="item1_qty1" name="item1_qty" value="0">
    <br>
    <label for="item1_qty1">100</label>
    <input type="radio" id="item1_qty1" name="item1_qty" value="100">
    <br>
    <label for="item1_qty1">250</label>
    <input type="radio" id="item1_qty1" name="item1_qty" value="250">
    <br>
    <label for="item1_qty1">500</label>
    <input type="radio" id="item1_qty1" name="item1_qty" value="500">

    <a href="javascript:;" class="gen_output">Get Value</a>

    <div class="output">
        <label for="item1_qty_output">Item 1 Output</label>
        <input type="text" id="item1_qty_output">
    </div>
</form>

JS

$('.gen_output').click(function() {
    $('#item1_qty_output').val($('input:radio:checked').val());
    if ($('input:radio:checked').val() == '0') {
        $('.output').html('Not required')
    }
});

Answer 1

You were replacing all the content with .html, so your inputs werent there when you tried to update them.

http://jsfiddle.net/loktar/gnW2c/6/

JS

$('.gen_output').click(function() {
    $('#item1_qty_output').val($('input:radio:checked').val());
    if ($('input:radio:checked').val() == '0') {
        $('#msg').html('Not required').show();
        $('#fields').hide();
    }else{
         $('#fields').show();   
        $('#msg').hide();
    }
});

Markup

<form action="#" method="post">
    <label for="item1_qty1">0</label>
    <input type="radio" id="item1_qty1" name="item1_qty" value="0">
    <br>
    <label for="item1_qty1">100</label>
    <input type="radio" id="item1_qty1" name="item1_qty" value="100">
    <br>
    <label for="item1_qty1">250</label>
    <input type="radio" id="item1_qty1" name="item1_qty" value="250">
    <br>
    <label for="item1_qty1">500</label>
    <input type="radio" id="item1_qty1" name="item1_qty" value="500">

    <a href="javascript:;" class="gen_output">Get Value</a>

    <div class="output">
        <div id="msg"></div>
        <div id="fields">        
            <label for="item1_qty_output">Item 1 Output</label>
            <input type="text" id="item1_qty_output">
            </div>
    </div>
</form>

Just added each one in the output container div, then do a hide/show.