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 bees 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

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 bees 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

• javascript
• jquery
• html

• 2 Why would you want that? You'll end up with the same value in both ZAAL_NAME and zaal_ID when you submit the form. Why not just use zaal_ID in your server-side processing? – lanzz Commented Jun 1, 2012 at 12:08
• @lanzz I wish I could +1 your ment multiple times – Xyan Ewing Commented Jun 1, 2012 at 12:24
• Because I need to enter the ID in one table and the zaal_NAME in another one. Also to give data to my database I must use the name attribute. That's why ! – Steaphann Commented Jun 1, 2012 at 12:27
• dont forget to mark answer as accepted if you got the info you want.. – Pranay Rana Commented Jun 4, 2012 at 13:43

6 Answers 6

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.

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

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

or

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

try -

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

Demo: http://jsfiddle/KMXnR/

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

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


}

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() ); 
 });