CODEWITHSUNDEEP
jquerywordpress
Christian Mayne
Christian Mayne

Reputation: 1749

Changing Radio Button Label on Wordpress form in jQuery

I have a Wordpress form with a Radio Button input label and value that I need to dynamically generate depending on the input of a another field.

I have no control over how the form is generated (without digging into the plugin, and time is is very much against me, so I just need a quick solution)

Wordpress is generating html as follows

<input type="text" name="vfb-22" id="vfb-4-50-22" value="" class="vfb-text  vfb-medium number" />
<label for="vfb-4-50-22" class="vfb-desc">Number * 4.50:></label>     

<span>
  <input type="radio" name="vfb-28" id="vfb-and-then-28-1" value="4.50" class="vfb-radio inline" /> 
  <label for="vfb-and-then-28-1" class="vfb-choice">4.50</label>
</span>

If someone enters a value into field A(vfb-22). I need jQuery to change the value of the input radio button and the label to A * the current value

I currently get all the relevant figures and update another field (vfb-42) correctly as follows

$('#vfb-monthly-tickets-4-50-each-86').change(function() { 
  var number=$('input[name=vfb-86]').val();
  var multiplier=4.50;
  total=number*multiplier;
  $('input[name=vfb-42]').val(total);
})

All I'm missing is changing the values of the radio button (vfb-28). I've had a few stabs, with no success to either label of value.

Grateful for any thoughts

Upvotes: 0

Views: 877

Answers (2)

Sushanth --
Sushanth --

Reputation: 55740

If the HTML is always structured this way .. you can try this 

$('.vfb-text').on('change' , function() {  // change event of textbox
  var $this = $(this);      // cache the selector

  var count = this.value ;  // textbox value
  var cost = $this.nextAll('span:first').find('.vfb-choice').text(); 
  // Label text value
  total=number * cost ;

  $this.next('vfb-desc').text(total);    // populate label
  $this.nextAll('span:first').find('.vfb-radio').val(total); 
  // new value of checkbox
});

Upvotes: 1

Joel Etherton
Joel Etherton

Reputation: 37523

Admittedly this is just a refactor of your own method, but you could try:

$('input[name=vfb-22]').change(function() { 
  var number=$('input[name=vfb-22]').val();
  var current = $('input[name=vfb-28]').val();

  total=number*current;

  $('input[name=vfb-22]').val(total);
  $('.vfb-choice').text(total);
});

Upvotes: 0

Related Questions