CODEWITHSUNDEEP
javascriptjqueryhtml
pap
pap

Reputation: 133

How to add different values to more than one input after selecting only one radio button?

I have this issue:

The user inputs only gender (male/female) and the code must automatic fill the "Coefficient" 1 and "Coefficient 2" in two different input fields. I managed to do it for Coefficient 1, but my code for Coefficient 2 is not working. Or maybe there is a better an easy way.

function getC2 () {
    var cc = parseFloat($("#kog").val());

    if (cc == 1){
        $('#kocc').val(1);
    }
    else {
        $('#kocc').val("0.85");
    }
}

$(document).ready(function() {
    $('#kog').change(function(event) {
        getC2();
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="demo09a" class="gender" type="radio" name="gender" value="0.75" onClick="document.getElementById('kog').value=this.value">
<label for="demo09a">female</label>
<input type="radio" name="gender" id="demo09b" class="gender" value="1" onClick="document.getElementById('kog').value=this.value">
<label for="demo09b">male</label>
<br />

<input id="kog" type="text" name="Co1" readonly="true" placeholder="Coefficient 1 ">
<label for="kog">Coefficient 1 </label> 
<br />

<input id="kocc" type="text" name="kocc" readonly="true" placeholder="Coefficient 2">
<label for="kocc">Coefficient 2</label> 
<br />

Upvotes: 2

Views: 51

Answers (2)

Mouser
Mouser

Reputation: 13304

You were on the right track. But with jQuery you can always be more efficient. Take a look:

//lets set the event handlers
$('input[type=radio].gender').click(function(e){
  //if the click comes from the female radio set coefficients differently
  if ($(this).attr("id") == "demo09a")//female
  {
    $("#kog").val(0.75);
    $("#kocc").val(0.85);
  }
  else
  {
    //male, select both id's and set to 1.
    $("#kog, #kocc").val(1);

  }
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="demo09a" class="gender" type="radio" name="gender">
<label for="demo09a">female</label>
<input type="radio" name="gender" id="demo09b" class="gender" >
<label for="demo09b">male</label>
<br />

<input id="kog" type="text" name="Co1" readonly="true" placeholder="Coefficient 1 ">
<label for="kog">Coefficient 1 </label>
<br />

<input id="kocc" type="text" name="kocc" readonly="true" placeholder="Coefficient 2">
<label for="kocc">Coefficient 2</label>
<br />

Upvotes: 1

M0ns1f
M0ns1f

Reputation: 2725

Well you used jquery it would be easy to handle the radio button change using $('input[name=gender]').click(function(e) {}); see this example :

function getC2 () {
    var cc = parseFloat($("#kog").val());

    if (cc == 1){
    $('#kocc').val(1);
    }
    else {
    $('#kocc').val("0.85");
    }
    }

    $(document).ready(function() {
    $('input[name=gender]').click(function(e) {
      $('#kog').val($(this).val());
      getC2();
    });
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="demo09a" class="gender" type="radio" name="gender" value="0.75">
    <label for="demo09a">female</label>
    <input type="radio" name="gender" id="demo09b" class="gender" value="1">
    <label for="demo09b">male</label>
    <br />

    <input id="kog" type="text" name="Co1" readonly="true" placeholder="Coefficient 1 ">
    <label for="kog">Coefficient 1 </label> 
    <br />

    <input id="kocc" type="text" name="kocc" readonly="true" placeholder="Coefficient 2">
    <label for="kocc">Coefficient 2</label> 
    <br />

Upvotes: 4

Related Questions