JavaScript Calculate Button Doesn't Work - javascript

This script won't show the calculated total at the end. I can't figure it out! Any suggestions? What am I missing? I have the JavaScript code for the tax function too if that helps. Everything works until I get to the final calculation button.
<H2>Business Card Pricing Calculator</H2>
<P>
<STRONG>Type:</STRONG>
<BR /><BR />
<INPUT id="Horizontal" value="50" type="radio" name="type" />
<LABEL for="Horizontal">Horizontal</LABEL>
<BR />
<INPUT id="vertical" value="50" type="radio" name="type" />
<LABEL for="vertical">Vertical</LABEL>
<BR />
<INPUT id="foldover" value="65" type="radio" name="type" />
<LABEL for="foldover">Foldover</LABEL>
</P>
<P>
<STRONG>Options:</STRONG>
<BR /><BR />
<INPUT id="cutting" value="10" type="checkbox" name="cutting" />
<LABEL for="cutting">Cutting</LABEL>
<BR />
<INPUT id="laminating" value="15" type="checkbox" name="laminating" />
<LABEL for="laminating">Laminating</LABEL>
<BR />
<INPUT id="scoring" value="10" type="checkbox" name="scoring" />
<LABEL for="scoring">Scoring</LABEL>
</P>
<P>
<STRONG>Tax Rate:</STRONG>
<INPUT style="TEXT-ALIGN: right" id="tax_rate" maxLength="5" size="3" type="text"
name="tax_rate" />%
</P>
<P>
<STRONG>Total (Including Tax): </STRONG>
<SPAN id="total_cost"></SPAN>
</P>
<P>
<INPUT id="calculate-button" value="CALCULATE" type="button" />
</P>
JavaScript
$("#calculate-button").click(function () {
var price = 0;
var tax = 0;
var checkedValues = $('input:checked');
$(checkedValues).each(function (index) {
price += parseInt(checkedValues[index].value, 10);
});
tax = (price * $("#tax_rate").val() / 100);
$("#total_cost").html(price + tax);
});

Related

Getting values with javascript

I started learning javascript a few weeks ago, the problem is that with my code I don't get the values that I put and I don't find where the problem could be.
function muestraDatos(){
var var1=document.getElementById("clogin").value;
var var2=document.getElementById("cpassword").value;
var var3=document.getElementById("cemail").value;
var var4=document.getElementById("cnombre").value;
var var5=document.getElementById("capellido").value;
var var6=document.getElementById("cfecha").value;
var var7=document.getElementById("cedad").value;
var var8=document.getElementById("ccolor").value;
var var9=document.getElementById("ccalle").value;
var var10=document.getElementById("ccpostal").value;
var var11=document.getElementById("cpoblacion").value;
var var12=document.getElementById("cprovincia").value;
var var13=document.getElementById("ctelefono").value;
var var14=document.getElementById("csemestre").value;
var var15=document.getElementById("ccarrera").value;
var var16=document.getElementByName('cinteres').value;
alert("Login: "+var1+"\nPassword: "+var2+"\nEmail: "+var3+"\Nombre: "+var4+" "+var5+"\nFecha de nacimiento: "+var6+"\nEdad: "+var7+"\nColor preferido: "+var8+"\nCalle: "+var9+"\nCódigo postal: "+var10+"\nPoblación: "+var11+"\nProvincia: "+var12+"\nTeléfono: "+var13+"\nSemestre: "+var14+"\nCarrera: "+var15+"\nInterés: "+var16);
}
<form onsubmit="return muestraDatos()">
<fieldset>
<legend>Solicitud socio</legend>
<label>Login: </label>
<input type="text" id="clogin" />
<br/>
<label>Password: </label>
<input type="text" id="cpassword" />
<br/>
<label>Email: </label>
<input type="email" id="cemail" />
<br/>
<strong>Datos personales:</strong>
<br/>
<label>Nombre: </label>
<input type="text" id="cnombre" />
<br/>
<label>Apellido: </label>
<input type="text" id="capellido" />
<br/>
<label>Fecha de nacimiento: </label>
<input type="date" id="cfecha" />
<br/>
<label>Edad: </label>
<input type="number" min="18" max="100" step="1" value="18" id="cedad" />
<br/>
<label>Color preferido: </label>
<input type="color" id="ccolor" />
</fieldset>
<fieldset>
<legend>Contacto</legend>
<label>Calle: </label>
<input type="text" id="ccalle" />
<br/>
<label>Código postal: </label>
<input type="text" id="ccpostal" />
<br/>
<label>Población: </label>
<input type="text" id="cpoblacion" />
<br/>
<label>Provincia: </label>
<input type="text" id="cprovincia" />
<br/>
<label>Teléfono: </label>
<input type="tel" id="ctelefono" />
<br/>
<strong>Datos estudiante:</strong>
<br/>
<label>Semestre </label>
<select id="csemestre">
<option value="semestreP">primero</option>
<option value="semestreS">segundo</option>
</select>
<label>Carrera </label>
<select id="ccarrera">
<option value="disenyo">diseño</option>
<option value="arquitectura">arquitectura</option>
<option value="derecho">derecho</option>
<option value="otra">otra</option>
</select>
<br /> Interés
<br/>
<label>Pintar</label>
<input type="radio" name="cinteres" value="pintar" />
<label>Hacer deporte</label>
<input type="radio" name="cinteres" value="hacerdeporte" />
<label>Ver peliculas</label>
<input type="radio" name="cinteres" value="verpeliculas" />
<label>Escuchar musica</label>
<input type="radio" name="cinteres" value="escucharmusica" />
<label>Leer</label>
<input type="radio" name="cinteres" value="leer" />
<br />
<input type="submit" value="Enviar datos" />
</fieldset>
</form>
See this fiddle
You had a typo here in this line
var var16 = document.getElementByName('cinteres').value;
It's actually
var var16 = document.getElementsByName('cinteres').value;
You missed an 's' in getElementsByName.
Also, according to the docs, document.getElementsByName
Returns a nodelist collection with a given name in the (X)HTML
document.
Thus, your code needs to be replaced as
var var16 = document.getElementsByName('cinteres')[index].value;
where index is the index position of the nodelist that is returned.

Printing values of all radio buttons to a textarea?

So I have a list of radio buttons all in one span that when encode is pressed I want to use JavaScript to print the values of these radio buttons to a text area (id of: BINARYBit), using the function bin2dec. I need these values to be 1 if the radio is selected and 0 if it is not. I have added a snippet below that shows my whole document.
Any thoughts ?
thanks!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="bootstrap.css" />
</head>
<body>
<div class="container">
<div class="col-lg-8">
<label for="HEXBit">Input the Bitmask Here</label>
<br/>
<input type="text" class="form-control" id="DECBit" />
<br/>
<input type="submit" class="btn btn-primary btn-sm" id="Submit" value="Decode" onclick="dec2bin();" />
<br/>
<input type="text" class="form-control" id="BINARYBit" disabled="disabled" />
<br/>
<input type="submit" class="btn btn-primary btn-sm" id="SubmitCon" value="Encode" onclick="bin2dec();" />
<br/>
<span id="radiocheck">
<br/>
<input type="radio" id="BinaryMessage" />
<label for="BinaryMessage">Send Binary Message</label>
<br/>
<input type="radio" id="Param1" />
<label for="Param1">Param1</label>
<br/>
<input type="radio" id="MDMID" />
<label for="MDMID">Modem ID </label>
<br/>
<input type="radio" id="GPIO" />
<label for="GPIO">GPIO</label>
<br/>
<input type="radio" id="AnalogDigi1" />
<label for="AnalogDigi1">Digital/Analog 1</label>
<br/>
<input type="radio" id="AnalogDigi2" />
<label for="AnalogDigi2">Digital/Analog 2</label>
<br/>
<input type="radio" id="StoreMsg" />
<label for="StoreMsg">Save Message if no GPRS</label>
<br/>
<input type="radio" id="InputNum" />
<label for="InputNum">Input Event Number</label>
<br/>
<input type="radio" id="GPSDate" />
<label for="GPSDate">GPS Date</label>
<br/>
<input type="radio" id="GPSStatus" />
<label for="GPSStatus">GPS Status</label>
<br/>
<input type="radio" id="GPSLat" />
<label for="GPSLat">Latitude</label>
<br/>
<input type="radio" id="GPSLong" />
<label for="GPSLong">Longitude</label>
<br/>
<input type="radio" id="GPSSpeed" />
<label for="GPSSpeed">GPS Speed (Knots)</label>
<br/>
<input type="radio" id="GPSHeading" />
<label for="GPSHeading">Heading</label>
<br/>
<input type="radio" id="GPSTime" />
<label for="GPSTime">GPS Time</label>
<br/>
<input type="radio" id="GPSAlt" />
<label for="GPSAlt">Altitude</label>
<br/>
<input type="radio" id="GPSNoSAT" />
<label for="GPSNoSAT">Number of GPS Satelites</label>
<br/>
<input type="radio" id="LowPowerMsg" />
<label for="LowPowerMsg">Stop Messages In Low Power</label>
<br/>
<input type="radio" id="SMSNoGPRS" />
<label for="SMSNoGPRS">Send SMS When No GPRS</label>
<br/>
<input type="radio" id="LastKnownGPS" />
<label for="LastKnownGPS">Use Last Known GPS When Unavaliable</label>
<br/>
<input type="radio" id="GPSOdo" />
<label for="GPSOdo">Odometer</label>
<br/>
<input type="radio" id="RTCTime" />
<label for="RTCTime">RTC Time</label>
<br/>
<input type="radio" id="ShortID" />
<label for="ShortID">Use Short Modem ID</label>
<br/>
<input type="radio" id="BattLVL" />
<label for="BattLVL">Power Level</label>
<br/>
<input type="radio" id="GPSOverSpeed" />
<label for="GPSOverSpeed">GPS Overspeed Data</label>
<br/>
<input type="radio" value="1" id="PCELL" />
<label for="PCELL">PCELL Data</label>
<br/>
<input type="radio" id="GPSALTOvr" />
<label for="GPSALTOvr">GPS Alternative Over Speed</label>
</span>
</div>
</div>
</body>
<script language="JavaScript">
function dec2bin() {
var dec = document.getElementById("DECBit").value
var val = (dec >>> 0).toString(2);
var pad = "00000000000000000000000000000000";
var answer = pad.substring(0, pad.length - val.length) + val;
var arr = [];
for (var i = 0; i < answer.length; i++) {
arr[i] = (answer.charAt(i) == "1" ? true : false);
}
arr.reverse();
console.log(answer);
console.log(arr);
document.getElementById("BINARYBit").value = answer;
var span = document.getElementById("radiocheck");
var inputs = span.getElementsByTagName("input");
for (var i = 0; i < arr.length; ++i) {
var thing = inputs[i];
thing.checked = arr[i];
}
function bin2dec() {
}
}
</script>
</html>
With native javascript, the best way would be to give all the inputs that you want to check a class like class="item" and then you search for all of these items in the function as so:
function bin2dec() {
var printableEncoded = "",
items = document.getElementsByClassName("item");
// For each item if it's checked include a '1', else a '0'
for (var i = 0; i < items.length; i++) {
printableEncoded += items[i].checked ? "1" : "0";
}
// Change the value of the disabled input to the encoded string
document.getElementById("BINARYBit").value = printableEncoded;
}
Example of HTML:
<input type="radio" value="1" id="PCELL" class="item" />
<label for="PCELL">PCELL Data</label>
solution using jquery
function encode()
{
var value="";
//select all radio buttons
$(".container input[type='radio']").filter(function(i,el){
//check if radio button is checked
value=value + ( ($(el).prop("checked")==true)? "1":"0");
});
$("#BINARYBit").val(value);
}
refereces:
http://api.jquery.com/filter/

Checkbox(javascript) selection, first item showing undefined?

I am trying to select and return some items(checkbox). Everything is okay, but the first item is always showing UNDEFINED. can't fix this problem!
My code is as below
function checkList () {
var checked;
var i;
for( i = 0; i < document.form1.length; i++) {
var element = document.form1[i]
if (element.type == "checkbox"){
if (element.checked == true){
checked = checked + element.value + "<br/>";
}
}
}
document.getElementById('checked').innerHTML = checked;
}
<form name="form1">
<input type="checkbox" name="checkbox1" id="checkbox1" value="Pen" />
<label value="Earned" for="checkbox1">Pen</label>
<br />
<input type="checkbox" name="checkbox2" id="checkbox2" value="Book" />
<label value="Earned" for="checkbox2" >Book</label>
<br/>
<input type="checkbox" name="checkbox1" id="checkbox3" value="Sharpner" />
<label value="Earned" for="checkbox3">Sharpner</label>
<br/>
<input type="checkbox" id="checkbox4" name="checkbox1" value="Pencil" />
<label value="Earned" for="checkbox4">Pencil</label>
<br/> <br/>
<input type="button" id="done" value="Done" onclick="checkList()" />
<br/><br/>
</form>
<p >You are taking:</p>
<span id="checked"></span>
Try to Change
<form name="form1">
<input type="checkbox" name="checkbox1" id="checkbox1" value="Pen" />
<label value="Earned" for="checkbox1">Pen</label>
<br />
<input type="checkbox" name="checkbox2" id="checkbox2" value="Book" />
<label value="Earned" for="checkbox2" for="checkbox">Book</label>
<br/>
<input type="checkbox" name="checkbox1" id="checkbox3" value="Sharpner" />
<label value="Earned" for="checkbox3" for="checkbox" for="checkbox">Sharpner</label>
<br/>
<input type="checkbox" id="checkbox4" name="checkbox1" value="Pencil" />
<label value="Earned" for="checkbox4">Pencil</label>
<br/> <br/>
<input type="button" id="done" value="Done" onclick="checkList()" />
<br/><br/>
</form>
<p >You are taking:</p>
<span id="checked"></span>
to This....
<form name="form1">
<input type="checkbox" name="checkbox1" id="checkbox1" value="Pen" />
<label value="Earned" for="checkbox1">Pen</label>
<br />
<input type="checkbox" name="checkbox2" id="checkbox2" value="Book" />
<label value="Earned" for="checkbox2">Book</label>
<br/>
<input type="checkbox" name="checkbox3" id="checkbox3" value="Sharpner" />
<label value="Earned" for="checkbox">Sharpner</label>
<br/>
<input type="checkbox" id="checkbox4" name="checkbox4" value="Pencil" />
<label value="Earned" for="checkbox4">Pencil</label>
<br/> <br/>
<input type="button" id="done" value="Done" onclick="checkList()" />
<br/><br/>
</form>
<p >You are taking:</p>
<span id="checked"></span>
You have multiple duplications within the code such as (for="")
Let me know, Thanks
Change
var checked; // like this, checked is undefined
to
var checked = ""; // now it's simply empty
here's a fiddle
http://jsfiddle.net/sq9938b0/
The issue is that you initialize checked variable as undefined. When you append the string to undefined it is converted to string "undefined", hence it appearing at the beginning.
Just initialize it as an empty string: var checked = "";
function checkList () {
var checked = "";
var i;
for( i = 0; i < document.form1.length; i++) {
var element = document.form1[i]
if (element.type == "checkbox"){
if (element.checked == true){
checked = checked + element.value + "<br/>";
}
}
}
document.getElementById('checked').innerHTML = checked;
}
<form name="form1">
<input type="checkbox" name="checkbox1" id="checkbox1" value="Pen" />
<label value="Earned" for="checkbox1">Pen</label>
<br />
<input type="checkbox" name="checkbox2" id="checkbox2" value="Book" />
<label value="Earned" for="checkbox2" for="checkbox">Book</label>
<br/>
<input type="checkbox" name="checkbox1" id="checkbox3" value="Sharpner" />
<label value="Earned" for="checkbox3" for="checkbox" for="checkbox">Sharpner</label>
<br/>
<input type="checkbox" id="checkbox4" name="checkbox1" value="Pencil" />
<label value="Earned" for="checkbox4">Pencil</label>
<br/> <br/>
<input type="button" id="done" value="Done" onclick="checkList()" />
<br/><br/>
</form>
<p >You are taking:</p>
<span id="checked"></span>
Take a look of the following step
checked = checked + element.value + "";
In the first loop you have not defined checked. So first time it is
checked = undefined + pen
Intialize
var checked = ''

Javascript calculation not working.

I have one page and two separate script to calculate value but if I repeat two time Javascript in one page it is not working how can I do this?
Please help in this issue. Thanks in advance.
<script type="text/javascript"><!--
function updatesum() {
var total = (document.form.daysone.value -0)*(document.form.daystwo.value -0)* (document.form.amount.value -0)/ (document.form.year.value -0)/ (document.form.month.value -0);
document.form.total.value = total.toFixed(3);
}
//--></script>
<form name="form" action="enter.php" method="post" id="searchform">
<p>
<label class="field">15 Days</label>
<input name="daysone" type="text" value="15" onChange="updatesum()" />
</p>
<p>
<label class="field">686 Days</label>
<input name="daystwo" type="text" value="686" onChange="updatesum()" />
</p>
<p>
<label class="field">Amount </label>
<input name="amount" type="text" value="" onChange="updatesum()" />
</p>
<p>
<label class="field">year </label>
<input name="year" type="text" value="365" onChange="updatesum()" />
</p>
<p>
<label class="field">month </label>
<input name="month" type="text" value="30" onChange="updatesum()" />
</p>
<p>
<label class="field" >Total </label>
<input name="total" type="text" value="" />
</p>
<strong>next one</strong>
<script type="text/javascript"><!--
function updatesum() {
var total1 = (document.form1.days1.value -0)*(document.form1.days1.value -0)* (document.form1.amount1.value -0)/ ;
document.form1.total1.value = total1.toFixed(3);
}
//--></script>
<form name="form1" action="enter.php" method="post" id="searchform">
<p>
<label class="field">15 Days</label>
<input name="days1" type="text" value="15" onChange="updatesum()" />
</p>
<p>
<label class="field">686 Days</label>
<input name="days2" type="text" value="686" onChange="updatesum()" />
</p>
<p>
<label class="field">Amount </label>
<input name="amount1" type="text" value="" onChange="updatesum()" />
</p>
<p>
<label class="field" >Total </label>
<input name="total1" type="text" value="" />
</p>
I think the same name is creating a problem here, Is it necessary to have the same name for both the functions?
Please try to change the name from UpdateSum in second one to something else.
Try to use this function, and replace your with this one.
<script type="text/javascript">
function updatesum() {
var total = (document.form.daysone.value -0)*(document.form.daystwo.value -0)* (document.form.amount.value -0)/ (document.form.year.value -0)/ (document.form.month.value -0);
document.form.total.value = total.toFixed(3);
}
</script>
<form name="form" action="enter.php" method="post" id="searchform">
<p>
<label class="field">15 Days</label>
<input name="daysone" type="text" value="15" onChange="updatesum()" />
</p>
<p>
<label class="field">686 Days</label>
<input name="daystwo" type="text" value="686" onChange="updatesum()" />
</p>
<p>
<label class="field">Amount </label>
<input name="amount" type="text" value="" onChange="updatesum()" />
</p>
<p>
<label class="field">year </label>
<input name="year" type="text" value="365" onChange="updatesum()" />
</p>
<p>
<label class="field">month </label>
<input name="month" type="text" value="30" onChange="updatesum()" />
</p>
<p>
<label class="field" >Total </label>
<input name="total" type="text" value="" />
</p>
The issue is with the duplicate function name.
Since, both the functions have a different calculation, it is better you name them differently and update your html accordingly.
There is another way in which you can do this, but you'll have to pass a parameter to the function which will differentiate between the two forms.
function updatesum(formName) {
var total, total1;
if (formName == 'form') {
total = (document.form.daysone.value - 0) * (document.form.daystwo.value - 0) * (document.form.amount.value - 0) / (document.form.year.value - 0) / (document.form.month.value - 0);
document.form.total.value = total.toFixed(3);
} else if (formName == 'form1') {
total1 = (document.form1.days1.value - 0) * (document.form1.days1.value - 0) * (document.form1.amount1.value - 0);
document.form1.total1.value = total1.toFixed(3);
}
}

How to check if at least one radio button is checked in this function?

I'm making a quiz with PHP, but I am using JavaScript to go between the questions first and then I submit the form and let PHP do the rest.
I made two JavaScript functions called ChangeQuestion() and BackQuestion().
function ChangeQuestion(prev, next) {
$('#' + prev).fadeOut(600, function() {
$('#' + next).fadeIn(600);
});
}
function BackQuestion(last, prev) {
$('#' + prev).fadeOut(600, function() {
$('#' + last).fadeIn(600);
});
}
They're pretty basic. But what I would like to do is check if their is at least one radio button checked in a question before continuing with the function. You'll be able to see in my markup/HTML how I'm using the above functions.
First of all, here's a jsFiddle: http://jsfiddle.net/3XdUA/
Here's my markup:
<form id="quiz1" name="quiz1" method="post" action="<?php echo $_SERVER['REQUEST_URI']; ?>">
<div id="starter">
Hello! Welcome to the HTML Quiz powered by PHP. Click on Start to begin.
<br /><br />
<button type="button" onclick="ChangeQuestion('starter','question1');$('#qIndicator').fadeIn(800);">Start »</button>
</div>
<div id="question1" style="display:none;">
1. What does HTML stand for?
<br />
<br />
<input type="radio" name="q1" id="q1-a1" />
<label for="q1-a1">Hyperlinks and Text Markup Language</label>
<br />
<input type="radio" name="q1" id="q1-a2" />
<label for="q1-a2">Home Text Markup Language</label>
<br />
<input type="radio" name="q1" id="q1-a3" />
<label for="q1-a3">Hyper Text Markup Language</label>
<br />
<input type="radio" name="q1" id="q1-a4" />
<label for="q1-a4">Hyper Text Marking Language</label>
<br /><br />
<button type="button" onclick="ChangeQuestion('question1','question2');$('#qIndicator').html('Question 2 of 10');">Next »</button>
</div>
<div id="question2" style="display:none;">
2. What is the proper way to add a blue background to the <code><body></code> and remove the margin & padding?
<br />
<br />
<input type="radio" name="q2" id="q2-a1" />
<label for="q2-a1"><body backgroundColor="blue" padding="0" margin="0"></label>
<br />
<input type="radio" name="q2" id="q2-a2" />
<label for="q2-a2"><body style="background-color: blue; margin: 0; padding: 0;"></label>
<br />
<input type="radio" name="q2" id="q2-a3" />
<label for="q2-a3"><body style="backgroundColor: blue; margin: 0px; padding: 0px;"></label>
<br />
<input type="radio" name="q2" id="q2-a4" />
<label for="q2-a4"><body background="blue" padding="0" margins="0"></label>
<br /><br />
<button type="button" onclick="BackQuestion('question1','question2');$('#qIndicator').html('Question 1 of 10');">« Back</button>
<button type="button" onclick="ChangeQuestion('question2','question3');$('#qIndicator').html('Question 3 of 10');">Next »</button>
</div>
<div id="question3" style="display:none;">
3. Which of the following font styling tags isn't valid?
<br />
<br />
<input type="radio" name="q3" id="q3-a1" />
<label for="q3-a1"><small></label>
<br />
<input type="radio" name="q3" id="q3-a2" />
<label for="q3-a2"><strong></label>
<br />
<input type="radio" name="q3" id="q3-a3" />
<label for="q3-a3"><em></label>
<br />
<input type="radio" name="q3" id="q3-a4" />
<label for="q3-a4"><large></label>
<br /><br />
<button type="button" onclick="BackQuestion('question2','question3');$('#qIndicator').html('Question 2 of 10');">« Back</button>
<button type="button" onclick="ChangeQuestion('question3','question4');$('#qIndicator').html('Question 4 of 10');">Next »</button>
</div>
<div id="question4" style="display:none;">
4. Suppose you have this HTML on your page:
<br /><br />
<code>
<a name="target4">Old listing</a>
</code>
<br /><br />
How would you link to the above target?
<br />
<br />
<input type="radio" name="q4" id="q4-a1" />
<label for="q1-a1"><a url="#target4">Check Old Listing as well</a> </label>
<br />
<input type="radio" name="q4" id="q4-a2" />
<label for="q1-a2"><a href="#target4">Check Old Listing as well</a></label>
<br />
<input type="radio" name="q4" id="q4-a3" />
<label for="q1-a3"><link url="target4">Check Old Listing as well</link> </label>
<br />
<input type="radio" name="q4" id="q4-a4" />
<label for="q1-a4"><a href="Listing.target4">Check Old Listing as well</a></label>
<br /><br />
<button type="button" onclick="BackQuestion('question3','question4');$('#qIndicator').html('Question 3 of 10');">« Back</button>
<button type="button" onclick="ChangeQuestion('question4','question5');$('#qIndicator').html('Question 5 of 10');">Next »</button>
</div>
<div id="question5" style="display:none;">
5. What does HTML stand for?
<br />
<br />
<input type="radio" name="q2" id="q2-a1" />
<label for="q1-a1">Hyper Tool Markup Language</label>
<br />
<input type="radio" name="q2" id="q2-a2" />
<label for="q1-a2">Home Text Markup Language</label>
<br />
<input type="radio" name="q2" id="q2-a3" />
<label for="q1-a3">Hyper Text Markup Language</label>
<br />
<input type="radio" name="q2" id="q2-a4" />
<label for="q1-a4">Hyper Text Marking Language</label>
<br /><br />
<button type="button" onclick="BackQuestion('question4','question5');$('#qIndicator').html('Question 4 of 10');">« Back</button>
<button type="button" onclick="ChangeQuestion('question5','question6');$('#qIndicator').html('Question 6 of 10');">Next »</button>
</div>
<div id="question6" style="display:none;">
6. What does HTML stand for?
<br />
<br />
<input type="radio" name="q2" id="q2-a1" />
<label for="q1-a1">Hyper Tool Markup Language</label>
<br />
<input type="radio" name="q2" id="q2-a2" />
<label for="q1-a2">Home Text Markup Language</label>
<br />
<input type="radio" name="q2" id="q2-a3" />
<label for="q1-a3">Hyper Text Markup Language</label>
<br />
<input type="radio" name="q2" id="q2-a4" />
<label for="q1-a4">Hyper Text Marking Language</label>
<br /><br />
<button type="button" onclick="BackQuestion('question5','question6');$('#qIndicator').html('Question 5 of 10');">« Back</button>
<button type="button" onclick="ChangeQuestion('question6','question7');$('#qIndicator').html('Question 7 of 10');">Next »</button>
</div>
</form>
Yes, it is long. Sorry about that. But, I provided a jsFiddle which would be much easier to understand. (because of the preview, etc.)
I do know how to check if a radio is selected, but I do not know how to make sure that one is selected with this function.
use :radio:checked
function ChangeQuestion(prev, next) {
var current = $('#' + prev);
var selection = current.find(":radio:checked").attr("id");
if (selection) {
alert(selection);
}
current.fadeOut(600, function() {
$('#' + next).fadeIn(600);
});
}
an alternative to my update would be
function ChangeQuestion(prev, next) {
var current = $('#' + prev);
if (prev != "starter") {
var selection = current.find(":radio:checked").attr("id");
if (selection === undefined) {
alert("no selection");
} else {
alert(selection);
current.fadeOut(600, function() {
$('#' + next).fadeIn(600);
});
}
} else {
current.fadeOut(600, function() {
$('#' + next).fadeIn(600);
});
}
}
I just didn't like repeating
current.fadeOut(600, function() {
$('#' + next).fadeIn(600);
});
see here
Use the :checked pseudo selector.
function ChangeQuestion(prev, next) {
var prevQ = $('#'+prev);
var numChecked = prevQ.find('input[type=radio]:checked').length;
if( prev !=='starter' && numChecked == 0 ) {
// no radio checked in this question
return;
}
prevQ.fadeOut(600, function() {
$('#' + next).fadeIn(600);
});
}
You can also use $("[name=q1]").is(":checked") just to check if something is selected. Of course, substitute q1 with whichever question you are on. In your case it looks like you'll be using q1, q2, etc.

Categories