CODEWITHSUNDEEP
javascriptjqueryhtml
Steaphann
Steaphann

Reputation: 2777

Change a hidden input fields value when a radio button is selected

I want to change the value of an hidden input field each time a user checks a radio button.

This is how my HTML looks like.

<input type="hidden" id="ZAAL_NAME" value="" name="ZAAL_NAME" />

<input type="radio" name="zaal_ID" value="ROOM1" onclick="change">
<input type="radio" name="zaal_ID" value="ROOM2" onclick="change"> 
<input type="radio" name="zaal_ID" value="ROOM3" onclick="change">

Now I want that each time I check a radio button, the value of that radio button becomes also the value of the hidden input field. Does anybody knows how to do that? Here is what I have so far.

   $('input[name="radbut"]').click(function() {
    console.log(this.value);
    $('ZAAL_NAME').val(this.value);
});

Could anybody help ?

Kind regards,

Steaphann

Upvotes: 3

Views: 11861

Answers (6)

Ram
Ram

Reputation: 144689

$('input[name="zaal_ID"]').change(function(){
   $('#ZAAL_NAME').val( this.value );
})

Upvotes: 4

Maneesh mehta
Maneesh mehta

Reputation: 43

use onclick="change(this.value);" and the function use like this

function change(e){
    $("ZAAL_NAME").val(e) ;


}

Upvotes: 1

nnnnnn
nnnnnn

Reputation: 150030

Your inline onclick handler won't work since you didn't include parentheses: it needs to be onclick="change()" to actually call your function. But you should change it to onclick="change(this);" to pass a reference to the clicked button to your function, then:

function change(el){
    $("#ZAAL_NAME").val(el.value) ;
}

Also you jQuery selector need a # to select by id.

Better though would be to remove the inline onclick from your markup and do it like this:

$('input[name="zaal_ID"]').click(function() {
    $('#ZAAL_NAME').val(this.value);
});

The latter would need to be in a document ready handler and/or in a script block that appears after your radio buttons in the page source.

Note: when getting the value of the clicked element you can say $(el).val() or $(this).val() (depending on which of the two functions you are looking at), but given that el and this are references to the DOM element you can just get its value property directly with el.value or this.value.

Upvotes: 6

Pranay Rana
Pranay Rana

Reputation: 176896

You can use is

$("input:radio[name=ZAAL_NAME]").click(function() {
     var value =  $(this).val(); 
     // or $('input:radio[name=theme]:checked').val(); 
     $("#ZAAL_NAME").val(value); 
 });

in short

$("input:radio[name=ZAAL_NAME]").click(function() {
     $("#ZAAL_NAME").val( $(this).val() ); 
 });

Upvotes: 0

Dipak
Dipak

Reputation: 12190

try - 

$(':radio').change(function(){
   $('#ZAAL_NAME').val($(this).val());
})

Demo: http://jsfiddle.net/KMXnR/

Upvotes: 1

Pethical
Pethical

Reputation: 1482

function change(){
   $("ZAAL_NAME").val( $(this).val() ) ;
}

or

function change(){
   $("ZAAL_NAME").val($("input[type='radio']:checked").val()) ;
}

Upvotes: 1

Related Questions