Would you like to check what wrong in my code, I have 2 group radio button when I click the radio button variable r not have a value :
<script>
$(document).ready(function() {
var s = 0;
var l = 0;
var r = 0;
$('input[type=radio][name="saverity"]').change(function() {
s = $(this).val();
console.log(s);
});
$('input[type=radio][name="likehood"]').change(function() {
l = $(this).val();
console.log(l);
});
r = s * l;
console.log(r);
});
Thank you very much.
Something like this should work.
$(document).ready(function() {
var s = 0;
var l = 0;
var r = 0;
$('input[type=radio][name="saverity"]').change(function() {
s = $(this).val();
recalculate();
});
$('input[type=radio][name="likehood"]').change(function() {
l = $(this).val();
recalculate();
});
function recalculate(){
r = s * l;
console.log(r);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>
Saverity
<input type="radio" name="saverity" value="0">
<input type="radio" name="saverity" value="1">
</label>
<br>
<label>
Likehood
<input type="radio" name="likehood" value="0">
<input type="radio" name="likehood" value="1">
</label>
Related
I want all inputs (radios, checkboxes, etc..) to be disabled (I don't want to be able to check them/ type) until "Start Quiz" button is clicked.
(That's all I need, this code is a quiz and I don't want people to be able to start doing it before clicking that button that releases starting time. But I don't know how to do it, I'm new to all this.)
var tacniOdgovori = 0;
var netacniOdgovori = 0;
function pocniKviz(){
vreme1 = new Date();
var vremeOd = vreme1.getHours() + ":" + vreme1.getMinutes() + ":" + vreme1.getSeconds();
document.getElementById("vremeOd").innerHTML = vremeOd;
document.getElementById("btnZapocniKviz").disabled = true;
document.getElementById("btnZavrsiKviz").disabled = false;
}
function zavrsiKviz(){
var pitanje1 = document.getElementsByName('pitanje1');
for (var i = 0; i < pitanje1.length; i++)
{
if (pitanje1[i].checked)
{
if(pitanje1[i].value == "Da"){
tacniOdgovori = tacniOdgovori + 1;
}
}
}
var pitanje2 = document.getElementsByName('pitanje2');
for (var i = 0; i < pitanje2.length; i++)
{
if (pitanje2[i].checked)
{
if(pitanje2[i].value == "HTTP"){
tacniOdgovori++;
}
}
}
if(document.getElementById("pitanje3").value == "interakcija"){
tacniOdgovori++;
}
var pitanje4 = document.getElementsByName('pitanje4');
for (var i = 0; i < pitanje4.length; i++)
{
if (pitanje4[i].checked)
{
if(pitanje4[i].value == "Apache" && pitanje4[i].value == "IIS"){
tacniOdgovori++;
}
}
if (pitanje4[i].checked)
{
if(pitanje4[i].value == "Apache" || pitanje4[i].value == "IIS"){
tacniOdgovori=tacniOdgovori+0.5;
}
}
document.getElementById("btnResetujKviz").disabled = false;
}
vreme2 = new Date();
var vremeDo = vreme2.getHours() + ":" + vreme2.getMinutes() + ":" + vreme2.getSeconds();
document.getElementById("vremeDo").innerHTML = vremeDo;
document.getElementById("tacniOdgovori").innerHTML = tacniOdgovori;
document.getElementById("netacniOdgovori").innerHTML = 4 - tacniOdgovori;
document.getElementById("rezultat").innerHTML = (tacniOdgovori/4)*100 + "%";
document.getElementById("btnZavrsiKviz").disabled = true;
}
<html>
<head>
</head>
<body style="padding:1%;">
<h2 align="center">Kviz</h3>
<button onclick="pocniKviz()" id="btnZapocniKviz">Start Quiz</button>
<p>Vreme pocetka rada: <span id="vremeOd" style="color:red">span vreme od</span></p>
<hr>
<h3>1. Da li je moguce hostovati web sajt na vise web servera?</h3>
<input type="radio" value="Da" name="pitanje1">Da</input>
<input type="radio" value="Ne" name="pitanje1">Ne</input>
<input type="radio" value="Svaki" name="pitanje1">Svaki web sajt se hostuje na vise web servera</input>
<h3>2. Pomocu kojih protokola je moguce pristupiti sajtovima? (jedan ili vise odgovora)</h3>
<input type="checkbox" value="FTP" name="pitanje2">FTP</input>
<input type="checkbox" value= "HTTP" name="pitanje2">HTTP</input>
<input type="checkbox" value= "SMB" name="pitanje2">SMB</input>
<input type="checkbox" value= "SSH" name="pitanje2">SSH</input>
<input type="checkbox" value= "WSP" name="pitanje2">WSP</input>
<h3>3. Kada korisnik vrsi neku aktivnost na sajtu to se zove <input id="pitanje3"></h3>
<h3>4. Sta je od navedenog web server? (jedan ili više odgovora)</h3>
<input type="checkbox" value="Apache" name="pitanje4">Apache</input>
<input type="checkbox" value="Samba" name="pitanje4">Samba</input>
<input type="checkbox" value="IIS" name="pitanje4">IIS</input>
<hr>
<button onclick="zavrsiKviz()" id="btnZavrsiKviz" disabled>Zavrsi kviz</button>
<button onClick="window.location.reload()" id="btnResetujKviz" disabled>Resetuj kviz</button>
<p>Vreme kraja rada: <font color="red"><span id="vremeDo">span vreme do</span></font></p>
<p>Tacnih odgovora: <font color="green"><span id="tacniOdgovori">span tacnih odgovora</span></font></p>
<p>Netacnih odgovora: <font color="red"><span id="netacniOdgovori">span netacnih odgovora</span></font></p>
<p>Uspeh u procentima: <span id="rezultat">span rezultata</span></p>
</body>
</html>
First, add a disabled property to your input elements, like this
<input type="radio" value="Da" name="pitanje1" disabled="disabled">Da</input>
Then, inside your pocniKviz() function:
var inputs = document.querySelectorAll('input'); //get all inputs and store into an array
for (i = 0; i < inputs.length; i++) {
inputs[i].disabled = false; //enable the element
}
you can also disable your inputs through JS, on the first line of your script:
for (i = 0; i < inputs.length; i++) {
inputs[i].disabled = true; //disable the element
}
First, add a disabled property to your input elements and then
I implemented in some of the inputs
try to understand it and then do same thing with other inputs
Main Part Changed
put this code into your start Quiz button's click event
var input = document.getElementsByTagName("input"); // gets all the input tags as nodelist
var inputList = Array.prototype.slice.call(input); //convert it to array
inputList.forEach(function(element) { // loops through it and then sets disabled = false
element.disabled = false;
});
var tacniOdgovori = 0;
var netacniOdgovori = 0;
function pocniKviz(){
vreme1 = new Date();
var vremeOd = vreme1.getHours() + ":" + vreme1.getMinutes() + ":" + vreme1.getSeconds();
document.getElementById("vremeOd").innerHTML = vremeOd;
document.getElementById("btnZapocniKviz").disabled = true;
document.getElementById("btnZavrsiKviz").disabled = false;
var input = document.getElementsByTagName("input"); // gets all the input tags as nodelist
var inputList = Array.prototype.slice.call(input); //convert it to array
inputList.forEach(function(element) { // loops through it and then sets disabled = false
element.disabled = false;
});
}
function zavrsiKviz(){
var pitanje1 = document.getElementsByName('pitanje1');
for (var i = 0; i < pitanje1.length; i++)
{
if (pitanje1[i].checked)
{
if(pitanje1[i].value == "Da"){
tacniOdgovori = tacniOdgovori + 1;
}
}
}
var pitanje2 = document.getElementsByName('pitanje2');
for (var i = 0; i < pitanje2.length; i++)
{
if (pitanje2[i].checked)
{
if(pitanje2[i].value == "HTTP"){
tacniOdgovori++;
}
}
}
if(document.getElementById("pitanje3").value == "interakcija"){
tacniOdgovori++;
}
var pitanje4 = document.getElementsByName('pitanje4');
for (var i = 0; i < pitanje4.length; i++)
{
if (pitanje4[i].checked)
{
if(pitanje4[i].value == "Apache" && pitanje4[i].value == "IIS"){
tacniOdgovori++;
}
}
if (pitanje4[i].checked)
{
if(pitanje4[i].value == "Apache" || pitanje4[i].value == "IIS"){
tacniOdgovori=tacniOdgovori+0.5;
}
}
document.getElementById("btnResetujKviz").disabled = false;
}
vreme2 = new Date();
var vremeDo = vreme2.getHours() + ":" + vreme2.getMinutes() + ":" + vreme2.getSeconds();
document.getElementById("vremeDo").innerHTML = vremeDo;
document.getElementById("tacniOdgovori").innerHTML = tacniOdgovori;
document.getElementById("netacniOdgovori").innerHTML = 4 - tacniOdgovori;
document.getElementById("rezultat").innerHTML = (tacniOdgovori/4)*100 + "%";
document.getElementById("btnZavrsiKviz").disabled = true;
}
<html>
<head>
</head>
<body style="padding:1%;">
<h2 align="center">Kviz</h3>
<button onclick="pocniKviz()" id="btnZapocniKviz">Start Quizz</button>
<p>Vreme pocetka rada: <span id="vremeOd" style="color:red">span vreme od</span></p>
<hr>
<h3>1. Da li je moguce hostovati web sajt na vise web servera?</h3>
<input type="radio" value="Da" name="pitanje1" disabled>Da</input>
<input type="radio" value="Ne" name="pitanje1" disabled>Ne</input>
<input type="radio" value="Svaki" name="pitanje1" disabled>Svaki web sajt se hostuje na vise web servera</input>
<h3>2. Pomocu kojih protokola je moguce pristupiti sajtovima? (jedan ili vise odgovora)</h3>
<input type="checkbox" value="FTP" name="pitanje2" disabled>FTP</input>
<input type="checkbox" value= "HTTP" name="pitanje2" disabled>HTTP</input>
<input type="checkbox" value= "SMB" name="pitanje2" disabled>SMB</input>
<input type="checkbox" value= "SSH" name="pitanje2" disabled>SSH</input>
<input type="checkbox" value= "WSP" name="pitanje2" disabled>WSP</input>
<h3>3. Kada korisnik vrsi neku aktivnost na sajtu to se zove <input id="pitanje3"></h3>
<h3>4. Sta je od navedenog web server? (jedan ili više odgovora)</h3>
<input type="checkbox" value="Apache" name="pitanje4">Apache</input>
<input type="checkbox" value="Samba" name="pitanje4">Samba</input>
<input type="checkbox" value="IIS" name="pitanje4">IIS</input>
<hr>
<button onclick="zavrsiKviz()" id="btnZavrsiKviz" disabled>Zavrsi kviz</button>
<button onClick="window.location.reload()" id="btnResetujKviz" disabled>Resetuj kviz</button>
<p>Vreme kraja rada: <font color="red"><span id="vremeDo">span vreme do</span></font></p>
<p>Tacnih odgovora: <font color="green"><span id="tacniOdgovori">span tacnih odgovora</span></font></p>
<p>Netacnih odgovora: <font color="red"><span id="netacniOdgovori">span netacnih odgovora</span></font></p>
<p>Uspeh u procentima: <span id="rezultat">span rezultata</span></p>
</body>
</html>
I want to give each check box an integer value and then if the box is checked add the values and display the total in a text box with the ID="options". So far the code is not sending a value to the desired location. Any instruction on how to improve the code would be helpful. Thank you.
<html>
<body>
<form id="registration" name="registration">
<input name="opt1" value="5" type="checkbox"> Breakfast ($5)
<input name="opt2" value="10" type="checkbox"> Lunch ($10)
<input name="opt3" checked="checked" value="0" type="checkbox"> Happy Hour (free!)
<input id="options" name="options" type="text">
</form>
</body>
</html>
<script>
function getOptions() {
var form = document.getElementById("registration"),
inputs = form.getElementsByTagName("input"),
result = 0;
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].type === "checkbox" && inputs[i].checked) {
result += inputs[i].value;
document.getElementById("options").value = result;
}
}
}
getOptions();
</script>
You may need to attach onchange event handlers to the checkboxes as shown below. And you should parse inputs[i].value to a number using parseFloat() before adding it to result.
var form = document.getElementById("registration"),
inputs = form.getElementsByTagName("input");
function getOptions() {
var result = 0;
for (var i = 0, len = inputs.length; i < len; i++) {
if (inputs[i].type === "checkbox" && inputs[i].checked) {
result += parseFloat(inputs[i].value);
}
}
document.getElementById("options").value = result;
}
for (var i = 0, len = inputs.length; i < len; i++) {
if (inputs[i].type === "checkbox") {
inputs[i].onchange = function () {
getOptions();
}
}
}
getOptions();
JSFiddle
This is my code in html and java script. I coded same things thrice, I want to do it once... what to do...............
<input type="text" name="option1" id="option1" onblur="calc_amt(1);">
<input type="text" name="price1" id="price1" onblur="calc_amt(1);">
<input type="text" name="amount1" id="amount1" readonly>
<input type="text" name="option2" id="option2" onblur="calc_amt(2);">
<input type="text" name="price2" id="price2" onblur="calc_amt(2);">
<input type="text" name="amount2" id="amount2" readonly>
<input type="text" name="option3" id="option3" onblur="calc_amt(3);">
<input type="text" name="price3" id="price3" onblur="calc_amt(3);">
<input type="text" name="amount3" id="amount3" readonly>
<script>
function calc_amt(val){
if(val==1){
var option1 = document.getElementById("option1").value;
var pri1 = document.getElementById("price1").value;
....
document.getElementById("amount1").value=amoun1 ;
}
if(val==2){
var option2 = document.getElementById("option2").value;
var pri2 = document.getElementById("price2").value;
...
document.getElementById("amount2").value=amoun2;
}
if(val==3){
var option3 = document.getElementById("option3").value;
var pri3 = document.getElementById("price3").value;
....
document.getElementById("amount3").value=amoun3;
}
var amoun1=document.getElementById("amount1").value;
var amoun2=document.getElementById("amount2").value;
var amoun3=document.getElementById("amount3").value;
var tot = Number(amt1)+Number(amt2)+Number(amt3);
document.getElementById("amount").value=tot;
}
</script>
how do solve it by coding only once... I am beginner please help me.... any other ideas to solve this.. i need a solution like inheritance.
You can further reduce above script like this. Your amoun is unclear for though. However you can reduce the code like this. This is just an idea and make sure you match the variables with correct statement.
<script>
function calc_amt(val){
var option1 = document.getElementById("option"+val).value;
var pri1 = document.getElementById("price"+val).value;
....
document.getElementById("amount"+val).value=""+amount+val ;
var amoun1=document.getElementById("amount1").value;
var amoun2=document.getElementById("amount2").value;
var amoun3=document.getElementById("amount3").value;
var tot = Number(amt1)+Number(amt2)+Number(amt3);
document.getElementById("amount").value=tot;
}
</script>
Replace:
if(val==1){
var option1 = document.getElementById("option1").value;
var pri1 = document.getElementById("price1").value;
document.getElementById("amount1").value=amoun1 ;
}
with:
var amoun = document.getElementById("amount" + val).value;
var option = document.getElementById("option" + val).value;
var pri = document.getElementById("price" + val).value;
document.getElementById("amount" + val).value=amoun;
TRY...
Remove all inline handler and use blur handler like in demo
$("input[type=text]").on("blur", function () {
var id = this.id;
var last = id.charAt(id.length - 1); // get last id string value
var optionValue = $("#option" + last).val();
var priceValue = $("#price" + last).val();
var option = isNaN(optionValue) ? 0 : +optionValue; // check is nan
var price = isNaN(priceValue) ? 0 : +priceValue;
$("#amount" + last).val(option * price); // display multiply value
$("#amount").text($("input[type=text][id^=amount]").map(function () { // collect all amount1,2,3 values
var value = $(this).val();
return isNaN(value) ? 0 : +value;
}).get().reduce(function (a, b) { // add total value
return a + b;
}));
});
DEMO
OPTIMIZED CODE
$("input[type=text]:not([readonly])").on("blur", function () {
var obj = $();
obj = obj.add($(this)).add($(this).prevUntil('[readonly]')).add($(this).nextUntil('[readonly]'));
$(this).nextAll('[readonly]').first().val($.map(obj, function (val, i) {
return parseInt(val.value, 10) || 0;
}).reduce(function (a, b) {
return a * b
}, 1));
$("#amount").text($("input[type=text][id^=amount]").map(function () {
var value = $(this).val();
return isNaN(value) ? 0 : +value;
}).get().reduce(function (a, b) {
return a + b;
}));
});
DEMO
im trying to make a simple perimeter calculator for a projector screen.
The code should take the response from a radio button input and the diagonal length to calculate the perimeter accordingly.
here is my code atm:
<html>
<body>
<script language="javascript">
function calc() {
var form = document.forms.Calculator;
var A = Number(getSelectedValue(form.elements.A));
var B = Number(getSelectedValue(form.elements.B));
if (A = 0) {
L = 0.8;
H = 0.6;
} else if (A = 1) {
L = 0.872;
H = 0.49;
} else {
L = 0.922;
H = 0.386;
}
form.elements.Total.value = 2 * B * (L + H);
}
function getSelectedValue(flds) {
var i = 0;
var len = flds.length;
while (i < len) {
if (flds[i].checked) {
return flds[i].value;
}
i++;
}
return "";
}
</script>
<title>Calculator</title> <pre>
<form name="Calculator">
<label>A</label>
4:3: <input name="A" type="radio" onChange="calc()" value="0" checked>
16:9: <input name="A" type="radio" onChange="calc()" value="1">
2.39:1: <input name="A" type="radio" onChange="calc()" value="2">
<label>B</label>
Screen Size: <input name="B" type="text" onChange="calc()" checked>
<label>Total</label>
<input type="text" name="Total" onChange="calc()" readonly size="10"><br>
<input type="submit" value="Submit Calculation"> <input type="reset" value="Clear">
</form>
</pre>
</body>
</html>
Your function getSelectedValue is wrong. It loops trough an array of elements to see which one is checked. You are trying to do the same for B which is only one element so that is not going trough the loop and thus returns ''.
So instead of
var B = Number(getSelectedValue(form.elements.B));
try
var B = Number(form.elements.B.value);
Also, your if else statements are wrong. It should be == instead of =:
if (A == 0) {
L = 0.8;
H = 0.6;
} else if (A == 1) {
L = 0.872;
H = 0.49;
} else {
L = 0.922;
H = 0.386;
}
Here's what i'm trying to achieve: I want to create a HTML page with a form, when you submit the form it goes to 1 of 4 locations. There is a default hidden main option thats auto-selected on page load and 2 sub-options that are optional.
Oh, and it calculates the amounts on selection!
Here's my code so far:
<html>
<head></head>
<body>
<form onSubmit="submitForm();" id="myForm" type="get">
<input id="myCheckbox1" name="myCheckbox1" type="checkbox" value="20" onClick="calcNow();" />Default option<br/>
<input id="myCheckbox2" name="myCheckbox2" type="checkbox" value="30" onClick="calcNow();" />Add-on option 1<br/>
<input id="myCheckbox2" name="myCheckbox2" type="checkbox" value="40" onClick="calcNow();" />Add-on option 2<br/>
<input id="myTotal" name="myTotal" type="text" value="" disabled="disabled" /><br/>
<input type="button" id="myButton" onClick="submitForm();" value="Continue" />
</form>
<script type="text/javascript">
var pages = [[["http://mysite.com/page1.html"],["http://mysite.com/page2.html"],["http://mysite.com/page3.html","http://mysite.com/page4.html"]]];
function calcNow()
{
var cb = document.getElementById("myCheckbox1");
var cb = document.getElementById("myCheckbox2");
var cost1 = cb.checked ? parseInt(cb.value) : 0;
var cost2 = cb.checked ? parseInt(cb.value) : 0;
var costTotal = cost1 + cost2;
document.getElementById("myTotal").value = costTotal;
var op1 = cb.checked ? 1 : 0;
if (op1 != undefined)
{
return pages[op1];
}
return undefined;
}
function submitForm()
{
var page = calcNow();
if (page != undefined)
{
alert(page);
// ---- To navigate ----
//location.href = page;
// ---- To alter post ----
//var form = document.getElementById("myForm");
//form.action = page;
//form.submit();
}
else
{
alert("Please answer all questions.");
}
}
function getRadioValue(name)
{
var controls = document.getElementsByName(name);
for (var i = 0; i < controls.length; i++) {
if (controls[i].checked) {
return parseInt(controls[i].value);
}
}
return 0;
}
function getRadioData(name, attribute)
{
var controls = document.getElementsByName(name);
for (var i = 0; i < controls.length; i++) {
if (controls[i].checked) {
return parseInt(controls[i].dataset[attribute]);
}
}
return undefined;
}
</script>
</body>
</html>
Try this
EDIT:
function submitForm()
{
//The code goes inside here, you have to decide where to redirect from if or the else
window.location.assign("http://www.w3schools.com/");
var page = calcNow();
if (page != undefined)
{
alert(page);
}
else
{
alert("Please answer all questions.");
}
}