Populate input field based on radio button selection

Hi everyone,

The following html code show 2 radio buttons and also an input where I’d like to capture the value from whichever radio was clicked:

<span id="member-price" class="populated"><input type="radio" name="member-price" value="25" checked="checked" class="eventAmount" /> $25 Member</span>
<span id="student-price" class="populated"><input type="radio" name="student-price" value="10" class="eventAmount" /> $10 Student</span>

<p><input type="text" name="event-price" id="event-price" maxlength="255" style="display: none;/> </p>

The following is the javascript code that I was trying to use:

        <script type="text/javascript">

		// When the Event amount is checked
		$("#event-price").val(this.value); // Put the value into the Amount field

The problem is that the above code is not inserting the value of the radio button that’s selected. I wondered if someone could help me with the code?

Really appreciate any assistance.


It will do if you lose the “display:none” on the input.

Thanks for the reply,

I removed the display none which revealed the input however it didn’t populate with the value from the selected radio button.

I tested it out at the following url:

… but it didn’t work.

My js skills are quite basic but as the code seems to be a function, am I supposed to call the function in order to get it to work or could you help me revise the code so that it will just run without calling the function?

You are using jQuery, but you forgot to add it to the fiddle so “$” is undefined and the code won’t work.

Thanks so much for that tip. I tested and it’s populated correctly now. I still need the input field to be hidden though so I’m wondering if I can’t use display: none is there some other method to hide the field?


It sounds like you might be going about this the wrong way.

For a hidden input use <input type="hidden" /> as opposed to setting the display property.

What is it you are trying to acheive?

Ok thanks, I’ll try input=“hidden”. The reason why I need to insert the amount in the hidden input field is that it’s needed in another part of the script where the amount populates a variable as follows:

var price = $(‘#event-price’).text();

The rest of the code can be seen below.

I mentioned in an earlier post that the original code that I posted ended up working in jsfiddle but for some reason it’s not working amid the other surrounding code when placed on the full webpage so I’m wondering whether there’s some conflict between other javascript on the page.

Would you know why it wouldn’t be working on the web page or would you need to see the full code? If yes, could I PM you? I know that private messaging isn’t usually preferred but I would just need to make the page live temporarily so you could look at it and then disable it again as it’s not working.

var guests = 0;
function calc() {
  var numberOfGuests = 0;
  $(".guestrow").each(function() {
    numberOfGuests+= $(this).find(".cat_textbox").val()!="";
  var price = $('#event-price').text();
  var participants = numberOfGuests+1;// add the organiser
  var total = participants*price;
  $("#booked").toggle(numberOfGuests>0); // only show booked if guests

$(function () {
    $(".cat_textbox").on("keyup",function() { calc(); /* handle removal of gues*/});
    $("#catwebformbutton").on("click", function () {
        if (guests <= 10) {
    $("#removeGuest").on("click",function(e) {
        var $row = $(".guestrow").eq(guests);
    $('form[name="catwebformform81201"]').on("submit", function (e) {
        if (checkWholeForm81201(this)) {
            // ...
        else {
          e.preventDefault(); // cancel submit


Sorry for dropping off for a while, I was on vacation.

Did you get this sorted or is there anything else you need help with?


This is has been sorted now but thanks for coming back. I appreciate it.