I am simply trying to read the value from a radio button but it returns undefined.
I am not using jquery. I think the code is fine but in chrome and explorer it doesnt do anything and when I print out the length of the variable "opi" it gives undefined.
Code:
function calc() {
var v1 = document.getElementById("Text1").value;
var v2 = document.getElementById("Text2").value;
var opi = document.getElementsByName("op");
for (var i = 0; i < opi.length; i++) {
if (opi[i].checked == true) {
var operator = opi[i].value;
break;
}
}
if (operator == "+") {
var v3 = parseInt(v1) + parseInt(v2);
}
if (operator == "-") {
var v3 = parseInt(v1) - parseInt(v2);
}
if (operator == "*") {
var v3 = parseInt(v1) * parseInt(v2);
}
if (operator == "/") {
var v3 = parseInt(v1) / parseInt(v2);
}
document.write(v3);
}
<head>
<title></title>
<script src="JScript1.js" type="text/javascript"></script>
</head>
<body>
<h2> My calculator </h2>
<p>First Value:
<input id="Text1" type="text" />
<br />
</p>
<p>Second value:
<input id="Text2" type="text" />
<br />
</p>
<p>
<input id="Radio1" type="radio" value="+" name="op" />"+"</p>
<p>
<input id="Radio2" type="radio" value="-" name="op" />"-"</p>
<p>
<input id="Radio3" type="radio" value="*" name="op" />"*"</p>
<p>
<input id="Radio4" type="radio" name="op" value="/" />"/"</p>
<input id="Button1" type="button" value="Calculate" onclick="calc()" />
</body>
Related
I'm practicing if statements and I'm trying to make a calculator. I can enter the numbers but clicking on the add, subtract, multiply or divide buttons does not give me any results. I know there are easier ways to do it but it was just for practice. What have I done wrong?
function operar(boton) {
var num1, num2, resultado;
num1 = document.getElementById("num1");
num2 = document.getElementById("num2");
resultado = document.getElementById("resultado");
if (boton.value == '+') {
resultado.value = Number(num1.value) + Number(num2.value);
} else {
if (boton.value == '-') {
resultado.value = Number(num1.value) - Number(num2.value);
} else {
if (boton.value == '*') {
resultado.value = Number(num1.value) * Number(num2.value);
} else {
if (boton.value == '/') {
resultado.value = Number(num1.value) / Number(num2.value);
}
}
}
}
}
<form>
<div>
<label>Número 1</label>
<input id="num1" type="text" />
</div>
<div>
<label>Número 2</label>
<input id="num2" type="text" />
</div>
<input type="button" value="+" onclick="operar(this)" />
<input type="button" value="-" onclick="operar(this)" />
<input type="button" value="*" onclick="operar(this)" />
<input type="button" value="/" onclick="operar(this)" />
<div>
<label>Resultado</label>
<input type="text" id="resultado" />
</div>
</form>
The snippet you gave here, this code is running perfectly. What else do you want to do?
I am trying to create a touchscreen calculator like where the button value will be placed on the textbox after i set it on a focus by clicking but it appears on all the textboxes.I tried to use the code
if ($(impo).is(":focus")) {
but it doesnt work. Please see my snippet
Thanks in advance!
var impo = document.getElementById("imp_text");
var tess = document.getElementById("tess_text");
var FKeyPad = document.Keypad;
var Accumulate = 0;
var FlagNewNum = false;
var PendingOp = "";
document.getElementById('tess').onclick = function() {
document.getElementById('tess_text').focus();
}
document.getElementById('imp').onclick = function() {
document.getElementById('imp_text').focus();
}
function NumPressed(Num) {
if (impo) {
if (FlagNewNum) {
FKeyPad.ReadOut.value = Num;
FlagNewNum = false;
} else {
if (FKeyPad.ReadOut.value == " ")
FKeyPad.ReadOut.value = Num;
else
FKeyPad.ReadOut.value += Num;
}
}
if (tess) {
if (FlagNewNum) {
FKeyPad.readtess.value = Num;
FlagNewNum = false;
} else {
if (FKeyPad.readtess.value == " ")
FKeyPad.readtess.value = Num;
else
FKeyPad.readtess.value += Num;
}
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<html lang="en">
<head>
</head>
<body>
<form name="Keypad" action="">
<input type="button" value="Imp" id="imp" /> Importo :
<input name="ReadOut" id="imp_text" type="Text" value=" "> <br>
<input type="button" value="Tes" id="tess" /> Card Tess :
<input name="readtess" id="tess_text" type="Text" value=" ">
<br>
<input type="button" value=" 1" onclick="NumPressed(1)" />
<input type="button" value=" 2" onclick="NumPressed(2)" />
<input type="button" value=" 3" onclick="NumPressed(3)" /> <br>
</form>
</body>
</html>
if (impo) and if (tess) just tests whether the element exists, which they do, so the value gets written to both of them because they both exist. In a desktop environment, you can't do what you're asking - you can give a textbox the focus, but once the user clicks on one of the buttons in order to select that number, the textbox no longer has the focus (because the button has it).
You need a separate way to maintain which textbox is currently selected, something like the snippet below. It will update the currently "selected" element both on the click of the Imp/Tes buttons and whenever either of the textbox gains focus (e.g. by mouse click or touch).
var impo = document.getElementById("imp_text");
var tess = document.getElementById("tess_text");
var current_input = impo;
impo.onfocus = function() {
current_input = impo;
}
tess.onfocus = function() {
current_input = tess;
}
document.getElementById('tess').onclick = function() {
current_input = tess;
tess.focus();
}
document.getElementById('imp').onclick = function() {
current_input = impo;
impo.focus();
}
function NumPressed(Num) {
current_input.value += Num;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<html lang="en">
<head>
</head>
<body>
<form name="Keypad" action="">
<input type="button" value="Imp" id="imp" /> Importo :
<input name="ReadOut" id="imp_text" type="Text" value=""> <br>
<input type="button" value="Tes" id="tess" /> Card Tess :
<input name="readtess" id="tess_text" type="Text" value="">
<br>
<br>
<input type="button" value="1" onclick="NumPressed(this.value)" />
<input type="button" value="2" onclick="NumPressed(this.value)" />
<input type="button" value="3" onclick="NumPressed(this.value)" /> <br>
<input type="button" value="4" onclick="NumPressed(this.value)" />
<input type="button" value="5" onclick="NumPressed(this.value)" />
<input type="button" value="6" onclick="NumPressed(this.value)" /> <br>
<input type="button" value="7" onclick="NumPressed(this.value)" />
<input type="button" value="8" onclick="NumPressed(this.value)" />
<input type="button" value="9" onclick="NumPressed(this.value)" /> <br>
<input type="button" value="0" onclick="NumPressed(this.value)" /> <br>
</form>
</body>
</html>
Here is my code:
<form id="F2" onsubmit="return false;">
Which do you want?<br />
<input name="a" onclick="TotalCheckedValues()" type="checkbox" value="10" />New (10.00)<br />
<input name="b" onclick="TotalCheckedValues()" type="checkbox" value="0" />Broken (Free)<br />
<input name="c" onclick="TotalCheckedValues()" type="checkbox" value="55" />Antique (55.00)<br />
<input name="d" onclick="TotalCheckedValues()" type="checkbox" value="4.95" />Refurbished (4.95)<br />
Total: <input name="T" readonly="readonly" size="5" type="text" /><br />
<input onclick="TotalCheckedValues()" type="button" value="Click" /> </form>
function TotalCheckedValues() {
var total = 0;
if(document.getElementById("F2").a.checked == true) { total += parseFloat(document.getElementById("F2").a.value); }
if(document.getElementById("F2").b.checked == true) { total += parseFloat(document.getElementById("F2").b.value); }
if(document.getElementById("F2").c.checked == true) { total += parseFloat(document.getElementById("F2").c.value); }
if(document.getElementById("F2").d.checked == true) { total += parseFloat(document.getElementById("F2").d.value); }
var ts = new String(total);
if(ts.indexOf('.') < 0) { ts += '.00'; }
if(ts.indexOf('.') == (ts.length - 2)) { ts += '0'; }
document.getElementById("F2").T.value = ts;
document.getElementById("F3").innerHTML = ts;
}
I want to show the updated result whenever I click and untick the checkbox.
Just add "script" tag in your html before function start which indicate javascripts code.
Hi here is the codes bellow, I've tried many things but I couldnt get value of selected radio button.As you can see I need to get that value for diffrent situations.
<div style="display: inline-block">
<div>
Log Out<span> Welcome </span>YS User 1 noName </div>
<br />
<br />
<br />
<br />
<input type="button" onclick="submitCreate();" value="New Survey" /><br />
<input type="button" onclick="submitEdit();" value="Edit Survey" /><br />
<input type="button" onclick="submitDelete();" value="Delete Survey" /><br />
<input type="button" onclick="submitPreview();" value="Preview Survey" />
</div>
<div style="display: inline-block">
<div>
<table class="MyTable"><thead><tr class="columnHead"><th scope="col"></th><th scope="col">CreatedBy</th><th scope="col">Created Date</th><th scope="col">Is Running</th></tr></thead><tbody><tr><td> <input name="selected" id="1"
type="radio" value="1" /></td><td>1</td><td>12/12/2011 3:43:57 PM</td><td>False</td></tr><tr class="altRow"><td> <input name="selected" id="2"
type="radio" value="2" /></td><td>1</td><td>12/13/2011 4:42:37 PM</td><td>False</td></tr><tr><td> <input name="selected" id="3"
type="radio" value="3" /></td><td>1</td><td>12/13/2011 6:27:38 PM</td><td>False</td></tr></tbody></table>
</div>
</div>
</body>
</html>
<script type="text/javascript">
// var value = $$('input[name=selected]:checked')[0].get('value');
// var selectFoo;
// $$('input[name=selected]').each(function (el) {
// if (el.checked == true) {
// selectFoo = el.value;
// }
// });
function getCheckedValue(radioObj) {
if (!radioObj)
return "";
var radioLength = radioObj.length;
if (radioLength == undefined)
if (radioObj.checked)
return radioObj.value;
else
return "";
for (var i = 0; i < radioLength; i++) {
if (radioObj[i].checked) {
return radioObj[i].value;
}
}
return "";
};
function submitCreate() {
var adress = "/User/CreateSurvey/";
document.location = adress;
};
function submitEdit() {
var adress = "/Den/Index/" + getCheckedValue('selected');
document.location = adress;
};
function submitDelete() {
var adress = "/User/DeleteSurvey/" + getCheckedValue('selected');
document.location = adress;
};
function submitPreview() {
var adress = "/User/PreviewSurvey/" + getCheckedValue('selected');
document.location = adress;
};
</script>
You can use document.getElementsByName(<button_name>) or document.getElementsByTagName("input") to get an array of input elements. Loop through those elements to check which is checked.
Here is an example of how to get the value of the checked button from a set of radio buttons with the name "selected":
<html>
<head>
<script type="text/javascript">
function get_radio_value() {
var inputs = document.getElementsByName("selected");
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].checked) {
return inputs[i].value;
}
}
}
function onSubmit() {
var id = get_radio_value();
alert("selected input is: " + id);
}
</script>
</head>
<body>
<form onsubmit="onSubmit();">
<input name="selected" value="1" type="radio"/>1<br/>
<input name="selected" value="2" type="radio"/>2<br/>
<input name="selected" value="3" type="radio"/>3<br/>
<input type="submit" value="submit"/>
</form>
</body>
</html>
I choose let number of code for a required function. The one worked for me is given below from api.jquery.com. Hope this helps others.
HTML
<input type="radio" name="option" value="o1">option1</input>
<input type="radio" name="option" value="o2">option2</input>
JavaScript
var selectedOption = $("input:radio[name=option]:checked").val()
The variable selectedOption will contain the value of the selected radio button (i.e) o1 or o2
I have a form that I need to figure out the code on how to make sure a radio button is selected
Here is the form
<body>
<div id="content">
<p>Enter the values below and click "Calculate".</p>
<label for="length">Length:</label>
<input type="text" id="length" /><br />
<label for="width">Width:</label>
<input type="text" id="width" /><br />
<label for="answer">Answer:</label>
<input type="text" id="Answer" disabled="disabled" /><br />
<input type="radio" name="Area" value="Area" check="checked"/>Area<br />
<input type="radio" name="Parimeter" value="Parimeter" />Parimeter<br />
<label> </label>
<input type="button" id="calculate" value="Calculate" /><br />
</div>
</body>
</html>
here is the code
var $ = function (id) {
return document.getElementById(id);
}
var calculate_click = function () {
var length = parseFloat( $("length").value );
var width = parseFloat( $("width").value );
// $("area").value = "";
if (isNaN(length) || length <= 0) {
alert("Length must be a valid number\nand greater than zero.");
} else if(isNaN(width) || width <= 0) {
alert("Width must be a valid number\nand greater than zero.");
}
} else {
var area = width * length;
var perimeter = 2 * width + 2 * length;
$("area").value = area.toFixed(2);
$("perimeter").value = perimeter.toFixed(2);
}
}
window.onload = function () {
$("calculate").onclick = calculate_click;
$("length").focus();
}
Here are some links that may help you finish your homework:
http://www.w3schools.com/html/html_forms.asp
http://www.w3schools.com/jquery/default.asp
http://jsfiddle.net