根据单选按钮值更改提交按钮文本

Question

How to change submit button text based on which radio-button is active?

Here is my code, but it does not work. It changes text only once.

I have two radio-buttons:

<input type="radio" name="build-team" class="choose" value="build" /> Yes
<input type="radio" name="build-team" class="choose" value="show" /> No
<button class="show-result" data-chooseyes="Yes" data-chooseno="No">Yes</button>

And I have script:

$(document).on('click', '.choose', function() {
    var target = $('.show-result');
    if ($(this).attr('checked') == 'checked') {
      target.html(target.data('chooseyes'));
    }
    else {
      target.html(target.data('chooseno'));
    }
})

JSFiddle example

Answer 1

 $(document).on('click', '.choose', function() { var target = $('.show-result'); target.html($(this).val()); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="radio" name="build-team" class="choose" value="Yes" /> Yes <input type="radio" name="build-team" class="choose" value="No" /> No <button class="show-result" data-chooseyes="Yes" data-chooseno="No">Yes</button> 

Answer 2

 $('.opt').click(function(){ $('#button').html($(this).val()); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input class="opt" name="opt" type="radio" value="Yes" checked="checked">Yes <input class="opt" name="opt" type="radio" value="No">No <button id="button" type="submit">Yes</button> 

This is the easiest answer, no added attributes, only clean HTML + jQuery, it is also important to realize that there must always be a radio selected/checked by default, if not, you would have to validate the field and validating a radio is not cool haha :) have a nice day!