I have a query and I’m hopeful you can assist:
function UpdateTemperature() {
var selectedGrade = $( "input[name='radios']:checked" ).val();
$( ".c_f" ).text(selectedGrade);
var value1 = $("#tempMin").val();
var value2 = $("#tempMax").val();
$( "#minT" ).text(value1);
$( "#maxT" ).text(value2);
}
$("input[name='radios']").change( UpdateTemperature );
$("#tempMin").change( UpdateTemperature );
$("#tempMax").change( UpdateTemperature );
UpdateTemperature();
$("#radio1").click( function() {
//
});
$("#radio2").click( function() {
//
});<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<span class="temp">Min</span><span id="minT" class="min"></span><span class="c_f"></span><span class="max">Max</span><span id="maxT" class="max"></span><span class="c_f"></span>
<div class="row">
<div class="input-radio col s12 m12 offset-m5 offset-s5" style="margin-bottom: 0;">
<input type="radio" id="radio1" value="C" name="radios" checked>
<label clase ="radioLabel" for="radio1">C</label>
<br>
<input type="radio" id="radio2" name="radios" value="F">
<label clase ="radioLabel" for="radio2">F</label>
</div>
</div>
<div class="row" id="inline2">
<div class="col s12 m12 l12 offset-m3 offset-l4 temp_uv">
<div class="quantity">
<input type="number" id="tempMin" name="temp_min" step="1" min="-60" max="60" placeholder="-5 C" value="-5" />
</div>
<div class="line"><strong>—</strong></div>
<div class="quantity1">
<input type="number" id="tempMax" name="temp_max" step="1" min="-60" max="60" placeholder="40 C" value="40" />
</div>
</div>
</div>
<br>
<div class="row">
<div id="temp_Slider_C"></div>
</div>The code above contains two radio input types and two number input fields. The radio inputs allow the selection of temperature unit: °C or °F, while the number inputs are used to enter minimum and maximum temperatures. I am looking to convert values from °C to °F or vice versa by clicking on the radio input options. For instance, if the temperature is in °C and I click on the F value radio input, the temperature values should change accordingly in the number input fields... Do you have any suggestions on how I can achieve this using JS/jQuery?
Note: C = (F - 32) * 5 / 9 (Celsius)
F = ((C * 9) / 5 ) + 32 (Fahrenheit)