CODEWITHSUNDEEP
javascriptjqueryhtml
halubilo Saya
halubilo Saya

Reputation: 141

Radio Button Value to appear in a input box

I have 2 radio button groups named group1 and group2 in a form, the value of group 1 and group2 should appear in a the input box name total_size without clicking the submit button of the form

Example: 

<form>
<input type="radio" id="m1" name="group1" value=1/>
<input type="radio" id="m2" name="group1" value=2/>

<input type="radio" id="cm1" name="group2" value=1/>
<input type="radio" id="cm2" name="group2" value=2/>


<input type="text" id="total_size" name="total_size" value="RADIO BUTTON GROUP 1 VALUE and RADIO BUTTON GROUP2 VALUE"/>

the format should be group1,group2m

Upvotes: 1

Views: 1067

Answers (2)

Kees C. Bakker
Kees C. Bakker

Reputation: 33381

I also used jQuery:

$('input[type=radio]').change(function() {
    var v = '';
    $('input[type=radio]:checked').each(function() {

        if (v != '') {
            v += ',';
        }
        v += $(this).val();
    });

    $('#total_size').val(v);
});

You can do it many ways. This example takes the values of all the checked radio groups. So if you have more, they will appear as well.

Note:
1. The code will execute when a value is changed
2. Click didn't work for me in all cases

Upvotes: 2

Claudio Carta
Claudio Carta

Reputation: 319

Hi I think you mean something like this.

<form>
<input type="radio" id="m1" name="group1" value='1' />
<input type="radio" id="m2" name="group1" value='2' />

<input type="radio" id="cm1" name="group2" value='1' />
<input type="radio" id="cm2" name="group2" value='2' />


<input type="text" id="total_size" name="total_size" value="RADIO BUTTON GROUP 1 VALUE and RADIO BUTTON GROUP2 VALUE"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
(function($) {
    $(function() {
        $('input[type="radio"]').click(function(e){
            value = $("input[name=group1]:checked").val() + ',' + $("input[name=group2]:checked").val();
            $('#total_size').val(value);
        });
    });
})(jQuery);
</script>

Upvotes: 1

Related Questions