Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

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

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.
Form consisting of radio button and textbox

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>

>Solution :

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

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>
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading