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/
Related
I have created multiple checkbox with different names as seen in the code snippet and will like to get the values of each of them i.e if the user clicks on a checkbox the value 1 is stored and 0 if not clicked but I keep getting only the 0 value for all of them. It doesn't seem to be reading if I click it or not. I have tried various answers I have seen online and on this platform but to no avail.
My code snippet is:
<div class="col-xs-6 col-sm-4 border-pdf-td">
<div class="checkbox">
<label for="telecommunication">
<input name="telecommunication" type="hidden" value="0" />
<input type="checkbox" value="1" name="telecommunication" />
Telecommunication
</label>
</div>
</div>
<div class="col-xs-6 col-sm-5 border-pdf-td">
<div class="checkbox">
<label for="grocery">
<input name="grocery" type="hidden" value="0" />
<input type="checkbox" value="1" name="grocery" />
Grocery and Supermarkets
</label>
</div>
</div>
<div class="col-xs-6 col-sm-3 border-pdf-d">
<div class="checkbox">
<label for="petroleum">
<input name="petroleum" type="hidden" value="0" />
<input type="checkbox" value="1" name="petroleum" />
Petroleum
</label>
</div>
</div>
<div class="col-xs-12 col-sm-4 border-pdf-d">
<div class="checkbox">
<label for="ecommerce">
<input name="ecommerce" type="hidden" value="0" />
<input type="checkbox" value="1" name="ecommerce" />
E-Commerce
</label>
</div>
</div>
<div class="col-xs-12 col-sm-5 border-pdf-d">
<div class="checkbox">
<label for="mailorder">
<input name="mailorder" type="hidden" value="0" />
<input type="checkbox" value="1" name="mailorder" />
Mail order/telephone order (MOTO)
</label>
</div>
</div>
The current state of my JavaScript code to get the values is
var telecommunication = document.getElementsByName("telecommunication")[0].value;
var grocery = document.getElementsByName("grocery")[0].value;
var petroleum = document.getElementsByName("petroleum")[0].value;
var ecommerce = document.getElementsByName("ecommerce")[0].value;
var mailorder = document.getElementsByName("mailorder")[0].value;
I previously tried the code below but keep getting same results.
var telecommunication = document.querySelector('input[name="telecommunication"]:checked').value;
var grocery = document.querySelector('input[name="grocery"]:checked').value;
var petroleum = document.querySelector('input[name="petroleum"]:checked').value;
var ecommerce = document.querySelector('input[name="ecommerce"]:checked').value;
var mailorder = document.querySelector('input[name="mailorder"]:checked').value;
Please note that I have these checkbox and more on same form to get their values by their unique name.
I think you don't need this
<input name="telecommunication" type="hidden" value="0" />
So grab the value
var telecommunication = document.querySelector('input[name="telecommunication"]:checked') ? 1 : 0;
I think you are using a bad pattern of design for your form. If you want to send a 1 or a 0 then you should use radio buttons instead of checkboxes.
Checkboxes (and radios) are designed to be included in a request only when they are checked.
You can use a FormData object to get all the values from the form.
const form = document.querySelector('form');
form.addEventListener('change', event => {
const formData = new FormData(form);
for (const [ name, value ] of formData) {
console.log(`${name}:`, value);
}
});
.as-console-wrapper {
max-height: 100px !important;
}
<form>
<div class="form-group">
<h4>Telecommunication</h4>
<label>
Yes
<input type="radio" value="1" name="telecommunication" checked />
</label>
<label>
No
<input type="radio" value="0" name="telecommunication" />
</label>
</div>
<div class="form-group">
<h4>Grocery and Supermarkets</h4>
<label>
Yes
<input type="radio" value="1" name="grocery" checked />
</label>
<label>
No
<input type="radio" value="0" name="grocery" />
</label>
</div>
<div class="form-group">
<h4>Petroleum</h4>
<label>
Yes
<input type="radio" value="1" name="petroleum" checked />
</label>
<label>
No
<input type="radio" value="0" name="petroleum" />
</label>
</div>
<div class="form-group">
<h4>E-Commerce</h4>
<label>
Yes
<input type="radio" value="1" name="ecommerce" checked />
</label>
<label>
No
<input type="radio" value="0" name="ecommerce" />
</label>
</div>
<div class="form-group">
<h4>Mail order/telephone order (MOTO)</h4>
<label>
Yes
<input type="radio" value="1" name="mailorder" checked />
</label>
<label>
No
<input type="radio" value="0" name="mailorder" />
</label>
</div>
</form>
I am working on making a form that should take the three questions in the form and add them up. If the end value is equal to three it should open call another function called toggletab() when the submit button is clicked. I tried this with it telling me pass or false depending on the value but it won't work. I am not good at JavaScript and it is really confusing to me. It looks like it is running each question separately instead of waiting until the end and calculating them all together. I cannot figure out why this is happening. I also am not sure how to call another function that is in a separate file if someone would know how to do that.
Thank you. This is the HTML
<fieldset class="article">
<legend>Have you had your record expunged before?</legend>
<input type="radio" name="field1" value="0" />
<label>
Yes
</label>
<input type="radio" name="field1" value="1" />
<label>
No
</label>
</fieldset>
<fieldset class="article">
<legend>Do you have any charges pending against you?</legend>
<input type="radio" name="field2" value="0" onclick="getscores2(this)" />
<label>
Yes
</label>
<input type="radio" name="field2" value="1" onclick="getscores2(this)" />
<label>
No
</label>
</fieldset>
<fieldset>
<legend>Is your drivers license suspended?</legend>
<input type="radio" name="field3" value="0" onclick="getscores3(this)"/>
<label>
Yes
</label>
<input type="radio" name="field3" value="1" onclick="getscores3(this)"/>
<label>
No
</label>
</fieldset>
<fieldset id="submitbutton" class="article">
<input type="button" id="submit" value="submit" onclick='answer()' />
</fieldset>
</form>
<p id="totalScore">this is answer </p>
<button onclick = "toggletab()" id="tabButton"><h3>first results</h3>
</button>
<form>
<div id="first" >
<fieldset>
<label>
<fieldset class="article">
<legend>Have you had your record expunged before?</legend>
<input type="radio" name="field1" value="0" />
<label>
Yes
</label>
<input type="radio" name="field1" value="1" />
<label>
No
</label>
</fieldset>
<fieldset class="article">
<legend>Do you have any charges pending against you?</legend>
<input type="radio" name="field2" value="0" onclick="getscores2(this)" />
<label>
Yes
</label>
<input type="radio" name="field2" value="1" onclick="getscores2(this)" />
<label>
No
</label>
</fieldset>
<fieldset>
<legend>Is your drivers license suspended?</legend>
<input type="radio" name="field3" value="0"
onclick="getscores3(this)"/>
<label>
Yes
</label>
<input type="radio" name="field3" value="1"
onclick="getscores3(this)"/>
<label>
No
</label>
</fieldset>
<fieldset id="submitbutton" class="article">
<input type="button" id="submit" value="submit" onclick='answer()' />
</fieldset>
</form>
<p id="totalScore">this is answer </p>
<button onclick = "toggletab()" id="tabButton"><h3>first results</h3>
</button>
<form>
<div id="first" >
<fieldset>
<label>
<legend>Is your arrest record a:</legend>
<input type="radio" name="field4" value="1"
onclick="getscores4(this)"/>
IC 35-38-9-1
</label>
<label>
<input type="radio" name="field4" value="2"
onclick="getscores4(this)"/>
IC 35-38-9-2
</label>
<label>
<input type="radio" name="field4" value="3"
onclick="getscores4(this)"/>
IC 35-38-9-3
</label>
<label>
<input type="radio" name="field4" value="4"
onclick="getscores4(this)"/>
IC 35-38-9-4
</label>
<label>
<input type="radio" name="field4" value="5"
onclick="getscores4(this)"/>
IC 35-38-9-5
</label>
</fieldset>
This is the JavaScript
function getscores1(score1) {
var getscores1 = (score1.value);
sendScores(getscores1);
}
function getscores2(score2) {
var getscores2 = (score2.value);
sendScores(getscores2);
}
function getscores3(score3) {
var getscores3 = (score3.value);
sendScores(getscores3);
}
function sendScores(getscores1, getscores2, getscores3){
var total = getscores1 + getscores2 + getscores3;
answer(total);
}
function answer(total) {
if (total == 3) {
document.getElementById('totalScore').innerHTML = "false";
} else{
document.getElementById('totalScore').innerHTML = "pass";
}
}
The variables your functions are defining are not global. Their values disappear after the function returns. So your sendScores function does not actually have access to those values unless you pass them as arguments. But while sendScores takes 3 arguments, you are only sending one (the one you have access too when you call the function).
One option would be to store these as global variables, but global variables are Generally Evil™. Alternatively, you can get all the values when you click submit. Here is a working example. Note this does not catch the case when the user does not respond to one or more of the questions. Click the "run snippet" button below to see it in action.
For your final question, you can put your js in a separate file and then put <script src="path/to/your/file/js"></script> in your html to load it.
function answer(total) {
var score = 0;
if (document.getElementById('exp_yes').checked) {
score++;
}
if (document.getElementById('chg_yes').checked) {
score++;
}
if (document.getElementById('sus_yes').checked) {
score++;
}
if (score > 0) {
document.getElementById('totalScore').innerHTML = "false";
} else {
document.getElementById('totalScore').innerHTML = "pass";
}
}
<fieldset class="article">
<legend>Have you had your record expunged before?</legend>
<input id=exp_yes type="radio" name="field1" value="0" />
<label>
Yes
</label>
<input id=exp_no type="radio" name="field1" value="1" />
<label>
No
</label>
</fieldset>
<fieldset class="article">
<legend>Do you have any charges pending against you?</legend>
<input id=chg_yes type="radio" name="field2" value="0" />
<label>
Yes
</label>
<input id=chg_no type="radio" name="field2" value="1" />
<label>
No
</label>
</fieldset>
<fieldset>
<legend>Is your drivers license suspended?</legend>
<input id=sus_yes type="radio" name="field3" value="0" />
<label>
Yes
</label>
<input id=sus_no type="radio" name="field3" value="1" />
<label>
No
</label>
</fieldset>
<fieldset id="submitbutton" class="article">
<input type="button" id="submit" value="submit" onclick='answer()' />
</fieldset>
</form>
<p id="totalScore">this is answer </p>
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.
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 = ''
<form>
<p class="question"> Hold Old are you</p>
<p ><input name="1" type="radio" value="15"> 12</p>
<p ><input name="1" type="radio" value="8"> 45</p>
<p ><input name="1" type="radio" value="2"> 23</p>
<p class="question"> What is you name<p/>
<p ><input name="2" type="radio" > Jerry</p>
<p ><input name="2" type="radio" > Tom</p>
<p ><input name="2" type="radio" > Becky</p>
<p class="question"> Are you single</p>
<p ><input name="3" type="radio" > yes</p>
<p ><input name="3" type="radio" > no</p>
<p ><input name="4" type="radio" > married</p>
</form>
Hello How are you?
I have a form here that ask 3 questions and each have 3 answers has a point and there will be a score:
if the score is >= 91, then after submitting it should take them to 90.html page
if the score is < 90 And >= 21) then after submitting it should take them to 20.html page
if the score is <= 20) then it should take them to the below20.html
the form should validate to make sure all question have an answer chosen
I need some direction on how i should set this up
HELP please thanks
I think I know what you're looking for. Here is a working sample: http://jsfiddle.net/NLJvZ/
var $rs = $(':radio');
$(':button').click(function(){
var $ch = $(':radio:checked');
if($ch.length < 3)
alert('Please answer all questions');
else{
var score = 0;
$ch.each(function(){
score += parseInt($(this).val(), 10);
});
var url = 'below20.html';
if(score >= 91)
url = '90.html';
else if(score < 90 && score >= 21)
url = '20.html';
alert('Going to URL: ' + url);
location.href = url;
}
});
HTML:
<div id="question1">
<h3>What is your name?</h3>
<label>
<input type="radio" name="first1" value="1" />
Tom
</label>
<label>
<input type="radio" name="first2" value="3" />
Jerry
</label>
<label>
<input type="radio" name="first3" value="2" />
Becky
</label>
</div>
<br />
<div id="question2">
<h3>Are you single?</h3>
<label>
<input type="radio" name="second1" value="1" />
Yes
</label>
<label>
<input type="radio" name="second2" value="3" />
No
</label>
<label>
<input type="radio" name="second3" value="2" />
Married
</label>
</div>
<br />
<div id="question3">
<h3>How old are you?</h3>
<label>
<input type="radio" name="third" value="1" />
12
</label>
<label>
<input type="radio" name="third" value="3" />
23
</label>
<label>
<input type="radio" name="third" value="2" />
45
</label>
</div>
<br />
<input type="button" value="Submit" />