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

Question

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.

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




<script>

    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;
    }
</script>

Answer 1

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.

 $('.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>

Answer 2

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

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