How to pass the value of a text box input field to the value of a radio button in jQuery-CodePudding

I am very new to jquery and i need help with the following problem. I have a form with three radio buttons with different values, i also have a forth radio button that has no value, i want it to have the value of the the number text box below it. How can i assign the value of the text box to the value of the radio button as i increase or decrease it.

function increaseValue() {
  var value=parseInt(document.getElementById('number').value, 10);
  value=isNaN(value) ? 0: value;
  value  ;
  document.getElementById('number').value=value;
}

function decreaseValue() {
  var value=parseInt(document.getElementById('number').value, 10);
  value=isNaN(value) ? 0: value;
  value < 1 ? value=1: '';
  value--;
  document.getElementById('number').value=value;
}

<div class="custom-control custom-radio mb-3">
  <input name=“coins” value="1" class="custom-control-input fixed-coin" id="1coin" type="radio">
  <label class="custom-control-label" for="1coin">1 Coin</label>
</div>

<div class="custom-control custom-radio mb-3">
  <input name="coins" value="10" class="custom-control-input fixed-coin" id="10coin" type="radio">
  <label class="custom-control-label" for="10coin">10 Coins</label>
</div>

<div class="custom-control custom-radio mb-3">
  <input name="coins" value="100" class="custom-control-input fixed-coin" id="100coin" type="radio">
  <label class="custom-control-label" for="100coin">100 Coins</label>
</div>

<div class="custom-control custom-radio mb-3">
  <input name="coins" value="0" class="custom-control-input custom-coin" id="custom" type="radio">
  <label class="custom-control-label" for="custom">Custom Coin</label>
</div>

<div class="custom-coin" style="display: none;">

  <div class="value-button" id="decrease" onclick="decreaseValue()" value="Decrease Value">-</div>
  <input type="number" class="custom-count" id="number" value="0" />
  <div class="value-button" id="increase" onclick="increaseValue()" value="Increase Value"> </div>
</div>

<div class="book-button text-center">

  <button class="btn btn-primary" type="submit"> Coin </button>

</div>




<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
    $("input[class$='custom-coin']").click(function() {
      var trig = $(this).val();

      $("div.custom-coin").show();
    });

    $("input[class$='fixed-coin']").click(function() {
      var trig = $(this).val();

      $("div.custom-coin").hide();

    });
  });
</script>

CodePudding user response：

You can do it like this:

$('.custom-count').change(function() {
  $('input.custom-coin:radio').val($(this).val())
})

so when ever your input changes then it will add the value of the input to the radio button.

Show code snippet

$('.custom-control-input').change(function() {
  $("div.custom-coin").toggle($(this).hasClass("custom-coin"))
})

$('.custom-count').change(function() {
  $('input.custom-coin:radio').val($(this).val())
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="custom-control custom-radio mb-3">
  <input name=“coins” value="1" class="custom-control-input fixed-coin" id="1coin" type="radio">
  <label class="custom-control-label" for="1coin">1 Coin</label>
</div>

<div class="custom-control custom-radio mb-3">
  <input name="coins" value="10" class="custom-control-input fixed-coin" id="10coin" type="radio">
  <label class="custom-control-label" for="10coin">10 Coins</label>
</div>

<div class="custom-control custom-radio mb-3">
  <input name="coins" value="100" class="custom-control-input fixed-coin" id="100coin" type="radio">
  <label class="custom-control-label" for="100coin">100 Coins</label>
</div>

<div class="custom-control custom-radio mb-3">
  <input name="coins" value="0" class="custom-control-input custom-coin" id="custom" type="radio">
  <label class="custom-control-label" for="custom">Custom Coin</label>
</div>

<div class="custom-coin" style="display: none;">

  <div class="value-button" id="decrease" onclick="decreaseValue()" value="Decrease Value">-</div>
  <input type="number" class="custom-count" id="number" value="0" />
  <div class="value-button" id="increase" onclick="increaseValue()" value="Increase Value"> </div>
</div>

<div class="book-button text-center">

  <button class="btn btn-primary" type="submit"> Coin </button>

</div>

CodePudding user response：

You can assign input field value to the radio button like this way.

$('#number').on("change", function() {
   $('.custom-coin').val($('#number').val())
})