jQuery in Forms

JavaScript
1

I have a set of radio buttons in a form with the last option being other. I would like to disable (or hide) a textfield next to other unless if it is selected. I would also like the textfield to be required if other is selected. It shouldn’t be required if other is not selected. And finally, I would like it if when the form is submitted and other is selected, instead of other being posted, the textfield information is inserted into the form. I am currently using jQuery on this page already for another form option. Please help.

I asked a similar question that was answered in this thread: http://www.sitepoint.com/forums/javascript-15/radio-buttons-controlling-textfields-750516.html#post4857055. I didn’t quite ask the question right though.

Thanks in advance.

2

Something like this should do…


<script>

$(document).ready(function() {
    $('#myForm').submit(function() {
        if ($('input:radio[name=required]:checked').val() == 1) {
            return $('#myText').val() != '';
        }
    });
    $('input:radio[name=required]').change(function() {
        if ($('input:radio[name=required]:checked').val() == 1) {
            $('#myText').show();
        } else {
            $('#myText').hide();
        }
    });
});
</script>

<form id="myForm" action="/" method="post">

<input type="radio" name="required" value="1" />
<input type="radio" name="required" value"0" />

<input type="text" id="myText" name="input" value="" />
</form>