Form with radio buttons and one input field. Calculate the value depending on radio button selcted
Question
I would like to convert the temperature given in Celsius to Fahrenheit degrees or the other way round. I would like the unit to be chosen via radio button form and the converted units calculated with JS function. However, I am doing something wrong, and I am not sure what exactly. Any help would be appreciated. Thanks.
<body>
<p>Convert temperatures to and from celsius, fahrenheit.</p>
<p id="myForm>
<form name="units" onsubmit="return convertTemp();" method="post">
<input type="number" id="temp"><br>
Temperature in:
<fieldset>
<input type="radio" name="Temperature" id="c" value="c" checked><label for="c">Celsius degrees</label>
<input type="radio" name="Temperature" id="f" value="f"><label for="f">Fahrenheit degrees</label>
</fieldset>
<input type="submit" value="Oblicz">
<form>
</p>
<p id="wynik"></p>
And here is my JavaScript function:
function convertTemp() {
alert("Włączyła się");
var x = document.Jednostki.Temperature.value;
if (x == "c"){
alert("Celsjusz");
}
else if (x == "f"){
alert("Fahrenheit");
}
returns false;
}
3 answers
solution1
1 2015-07-24 19:16:18
First issue I see: returns false; should be return false; (no s).
You should also retrieve the values using document.getElementById():
function convertTemp() {
alert("Włączyła się");
var celsius = document.getElementById('c');
var fahr = document.getElementById('f');
if (c.checked){
alert("Celsjusz");
}
else{
alert("Fahrenheit");
}
return false;
}
document.getElementById("units").onsubmit = convertTemp;
solution2
1 ACCPTED 2015-07-24 19:29:11
Here is what I would suggest
window.addEventListener("load", function() { document.getElementById("units").addEventListener("submit", function(e) { e.preventDefault(); console.log("Włączyła się"); var num = parseInt(document.getElementById("temp").value, 10); if (document.getElementById("c").checked) { console.log("Celsjusz"); document.getElementById("wynik").innerHTML = num + "C," + (Math.round(num * 9 / 5) + 32) + "F"; } else if (document.getElementById("f").checked) { console.log("Fahrenheit"); document.getElementById("wynik").innerHTML = num + "F," + (Math.round((num - 32) * 5 / 9)) + "C"; } }); });
<p>Convert temperatures to and from celsius, fahrenheit.</p> <p> <form id="units"> <input type="number" id="temp"><br> Temperature in: <fieldset> <input type="radio" name="Temperature" id="c" value="c" checked><label for="c">Celsius degrees</label> <input type="radio" name="Temperature" id="f" value="f"><label for="f">Fahrenheit degrees</label> </fieldset> <input type="submit" value="Oblicz"> <form> </p> <p id="wynik"></p>
Using querySelector:
window.addEventListener("load", function() { document.getElementById("units").addEventListener("submit", function(e) { e.preventDefault(); console.log("Włączyła się"); const num = parseInt(document.getElementById("temp").value, 10); const type = document.querySelector("[name=Temperature]:checked").value; if (type==="c") { console.log("Celsjusz"); document.getElementById("wynik").innerHTML = num + "C," + (Math.round(num * 9 / 5) + 32) + "F"; } else { console.log("Fahrenheit"); document.getElementById("wynik").innerHTML = num + "F," + (Math.round((num - 32) * 5 / 9)) + "C"; } }); });
<p>Convert temperatures to and from celsius, fahrenheit.</p> <p> <form id="units"> <input type="number" id="temp"><br> Temperature in: <fieldset> <input type="radio" name="Temperature" id="c" value="c" checked><label for="c">Celsius degrees</label> <input type="radio" name="Temperature" id="f" value="f"><label for="f">Fahrenheit degrees</label> </fieldset> <input type="submit" value="Oblicz"> <form> </p> <p id="wynik"></p>
solution3
-1 2015-07-24 19:25:13
using jquery you can do it raplce this line
var x = document.Jednostki.Temperature.value;
to
var x = $('input[name="Temperature"]:checked').val()
you can see it working here to get jquery click here
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Pre-populate a value HTML form input depending on another another form field (radio buttons)
Make a field required depending on the value of a radio button
radio buttons + input field for one of them
Fill input depending on radio button
Change a value depending on the Radio button
Add/Remove form field depending on radio select value
Set hidden input value depending on radio button selection
Display image depending on two input radio buttons
Create an input text box depending on the radio button value
Update form redirection URL depending on radio button value with JS
Related Tags