I have a form with multiple groups of checkboxes (among other things). Some of these groups are mandatory fields (At least one checkbox needs to be checked within that group).
I am able to tell if a group has a checkbox checked, but I failed to make them mandatory. Also I am need to get one long string with the values of the selected checkbox(es). I would need to have a string where if the user checks, say the first 3 checkboxes from group1, the string to be:
"zero | 1 val | 2 val"
The code is a simplified version of my original. Here is the jFiddle: http://jsfiddle.net/QyY2P/1/
Also, for your convenience I am also including the code here:
jQuery:
function countChecked() {
//Group 1
var n = $("#group1 input:checked").length;
$("#count").text(n + (n <= 1 ? " is" : " are") + " checked!");
$("#group1 input:checked").each(function() {
txt += ($(this).val() + " | ");
$("#selection1").text(txt);
alert($(this).val() + " | ");
});
//Group 2
var n = $("#group2 input:checked").length;
$("#count").text(n + (n <= 1 ? " is" : " are") + " checked!");
$("#group2 input:checked").each(function() {
txt += ($(this).val() + " | ");
$("#selection3").text(txt);
alert($(this).val() + " | ");
});
}
countChecked();
$(":checkbox").click(countChecked);
HTML:
<form>
<div id="group1">
<p> *Please select a box (Mandatory)</p>
<input type="checkbox" name="ckb_unit[]" value="zero" />
<input type="checkbox" name="ckb_unit[]" value="1 val" />
<input type="checkbox" name="ckb_unit[]" value="2 val" />
<input type="checkbox" name="ckb_unit[]" value="3 val" />
<input type="checkbox" name="ckb_unit[]" value="4 val" />
</div>
<div id="group2">
<p>Please select a box</p>
<input type="checkbox" name="ckb_unit[]" value="zero" />
<input type="checkbox" name="ckb_unit[]" value="A" />
<input type="checkbox" name="ckb_unit[]" value="B" />
<input type="checkbox" name="ckb_unit[]" value="C" />
<input type="checkbox" name="ckb_unit[]" value="D" />
</div>
<div id="group3">
<p>*Please select a box (Mandatory)</p>
<input type="checkbox" name="ckb_unit[]" value="zero" />
<input type="checkbox" name="ckb_unit[]" value="1 A" />
<input type="checkbox" name="ckb_unit[]" value="2 B" />
<input type="checkbox" name="ckb_unit[]" value="3 C" />
<input type="checkbox" name="ckb_unit[]" value="4 D" />
</div>
</form>
<!-- For debugging purposes -->
<br/>
<div id="count"></div>
<div id="selection1"></div>
<div id="selection3"></div>
PS. I am a beginner, perhaps you noticed it by my not so elegant coding >_<
You can make it mandatory by checking if n is 0 when the user hits submit and then attracting the user's attention towards it somehow (appending an error message, for example). I'm talking about this n:
var n = $("#group1 input:checked").length;
Looking at JSFiddle, it seems you didn't declare txt as a variable, so this works for me:
//Group 1
var txt = ""; // initialise txt with an empty string, so you can append to it later
var n = $("#group1 input:checked").length;
$("#count").text(n + (n <= 1 ? " is" : " are") + " checked!");
$("#group1 input:checked").each(function() {
txt += ($(this).val() + " | ");
$("#selection1").text(txt);
alert($(this).val() + " | ");
});
Related
Basically I have 4 checkbox elements in my form and a text field up top. The text field has a placeholder with a product name — product price format. Each checkbox has a product name and product price as well, and I want to use javascript to change the placeholder value once a checkbox is checked. The issue is that the product price should be a SUM of default placeholder base price and the product price of the checkbox that was checked. The first part of the placeholder should change from product name to product name + product name.
So far I have only been able to use javascript to change the value of the placeholder entirely, which would work if I had only one checkbox, but I have 4 so it doesn't.
In a perfect world the placeholder should display Basic Package + Video + Picture + Tour + Emergency — €30 when all checkboxes are checked, and Basic Package + Picture + Tour — €20 when only Option2 and Option3 are checked. And so on, and so on.
Here is a simplified code of what I am trying to achieve (note: only Video works in my code):
$('.Option1').on('change', function(e) {
if ($(this).is(':checked') === true) {
$('.PriceInput').attr('placeholder', 'Basic Package + Video — €15');
} else $('.PriceInput').attr('placeholder', 'Basic Package — €10');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="ajax-contact-basic" method="post" action="mailer-basic.php">
<div class="field">
<input class="form-control PriceInput" type="text" name="basicpackage" id="basicpackage" placeholder="Basic Package — €10" disabled />
</div>
<div class="field">
<input class="Option1" type="checkbox" id="videobasic" name="optiesbasic[]" value="Video">
<label for="videobasic">Video — €5</label>
</div>
<div class="field">
<input class="Option2" type="checkbox" id="picturebasic" name="optiesbasic[]" value="Picture">
<label for="picturebasic">Picture — €5</label>
</div>
<div class="field">
<input class="Option3" type="checkbox" id="tourbasic" name="optiesbasic[]" value="Tour">
<label for="tourbasic">Tour — €5</label>
</div>
<div class="field">
<input class="Option4" type="checkbox" id="emergencybasic" name="optiesbasic[]" value="Emergency">
<label for="emergencybasic">Emergency — €5</label>
</div>
I've removed the number from each class="Option"
then you can do something like this:
$('.Option').on('change', function(e) {
var s = "";
var p = 10;
$('.Option').each(function() {
if ($(this).is(':checked') === true) {
s += " + " + $(this).val();
var tempP = +$(this).next().text().split('€')[1];
p = p + tempP;
}
});
$('.PriceInput').attr('placeholder', 'Basic Package' + s + ' — €' + p);
});
Demo
$('.Option').on('change', function(e) {
var s = "";
var p = 10;
$('.Option').each(function() {
if ($(this).is(':checked') === true) {
s += " + " + $(this).val();
var tempP = +$(this).next().text().split('€')[1];
p = p + tempP;
}
});
$('.PriceInput').attr('placeholder', 'Basic Package' + s + ' — €' + p);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="ajax-contact-basic" method="post" action="mailer-basic.php">
<div class="field">
<input class="form-control PriceInput" type="text" name="basicpackage" id="basicpackage" placeholder="Basic Package — €10" disabled />
</div>
<div class="field">
<input class="Option" type="checkbox" id="videobasic" name="optiesbasic[]" value="Video">
<label for="videobasic">Video — €5</label>
</div>
<div class="field">
<input class="Option" type="checkbox" id="picturebasic" name="optiesbasic[]" value="Picture">
<label for="picturebasic">Picture — €5</label>
</div>
<div class="field">
<input class="Option" type="checkbox" id="tourbasic" name="optiesbasic[]" value="Tour">
<label for="tourbasic">Tour — €5</label>
</div>
<div class="field">
<input class="Option" type="checkbox" id="emergencybasic" name="optiesbasic[]" value="Emergency">
<label for="emergencybasic">Emergency — €5</label>
</div>
This is JavaScript Code :
var clinicalStat;
var id;
var val;
var clinicalVals;
$(":checkbox").click(function() {
//alert(" you checked");
if ($(this).is(':checked')) {
var checked1 = $(this).val(); //Inital value of checkbox is '0'
alert("The inital value for selected checkbox = " + checked1);
var checkedVal = $(this).val('1'); //value is change to '1'
alert("The value after checked the checkbox is = " + $(this).val());
}
});
$(":checkbox").click(function() {
clinicalStat = document.getElementById('clinicalStat').value; //clinicalStat(type='textbox') inital value is '0'
alert("The initial value of clinicalStat = " + clinicalStat);
clinicalStat = document.getElementById('clinicalStat').value = "1"; //now clinicalStat value is '1'
alert("Later the value is changed to = " + clinicalStat);
id = (this.id);
alert("id = " + id);
val = (this.value);
alert("val = " + val);
clinicalVals = clinicalStat + "^" + id + ":" + val;
alert("clinicalVals = " + clinicalVals);
});
This is my Checkbox code .
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-2 right2 fon">
<h6>Clinical Practice/Procedure</h6>
<hr>
<p><input type="hidden" id="incidentClassifId" name="incidentClassifId" value="0"></p>
<p><input type="hidden" id="incidentViewIndex" name="incidentViewIndex" value="0"></p>
<p><input type="hidden" id="appendStockistStatus" value="0"></p>
<p><input type="hidden" name="clinicalStat" id="clinicalStat" value="0"></p>
<p><input type="checkbox" name="clinicalDoc" class="clinicalCheck" id="clinicalDoc" value="0">Documentation</p>
<p><input type="checkbox" name="clinicalDoc" class="clinicalCheck" id="clinicalMiss" value="0">Missing Files</p>
<p><input type="checkbox" name="clinicalDoc" class="clinicalCheck" id="clinicalPol" value="0"> Policy not available</p>
<p><input type="checkbox" name="clinicalDoc" class="clinicalCheck" id="clinicalMed" value="0"> Medical records unavailable</p>
<p><input type="checkbox" name="clinicalDoc" class="clinicalCheck" id="clinicalCon" value="0"> Confidentiality</p>
<p><input type="checkbox" name="clinicalDoc" class="clinicalCheck" id="clinicalProc" value="0">Procedures not followed</p>
<p><input type="hidden" name="clinicalVals" id="clinicalVals"></p>
<p><input type="checkbox" id="checkBox" onclick="EnableDisableTextBox(this)"> Other (Specify)</p>
<p><input type="text2" id="text" name="incidentClassClinicalVal" disabled="disabled" style="width: 92%"></p>
</div>
if i checked Documentation Checkbox iam getting ClinicalVal value like this clinicalVals=1^clinicalDoc:1
what my problem is how to get clinical values like this clinicalVals=1^clinicalDoc:1^1^0:0^1^0:0^1^0:0^1^0:0^1^0:0 i.e clinicalDoc checkbox is selected remaining are not selected.
if i select two checkboxes the clinicalVal has to show like this clinicalVals=1^clinicalDoc:1^1^clinicalMiss:1^1^0:0^1^0:0^1^0:0^1^0:0 i.e two checkboxes are selected remaining are not selected
Loop your all the check box's and check for checkbox is checked or not
var clinicalStat;
var id;
var val;
var clinicalVals ='';
$(":checkbox").click(function() {
//alert(" you checked");
if ($(this).is(':checked')) {
var checked1 = $(this).val(); //Inital value of checkbox is '0'
var checkedVal = $(this).val('1'); //value is change to '1'
}
});
$(":checkbox").click(function() {
clinicalVals = '';
clinicalStat = document.getElementById('clinicalStat').value; //clinicalStat(type='textbox') inital value is '0'
clinicalStat = document.getElementById('clinicalStat').value = "1"; //now clinicalStat value is '1'
var checkboxes = document.getElementsByClassName('clinicalCheck');
for(var i =0; i< checkboxes.length; i++){
id = checkboxes[i].id;
val = checkboxes[i].value;
if(checkboxes[i].checked){
clinicalVals += clinicalStat + "^" + id + ":" + val+"^";
}else{
clinicalVals += 1 + "^0:" + val+"^";
}
}
console.log(clinicalVals);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-2 right2 fon">
<h6>Clinical Practice/Procedure</h6>
<hr>
<p><input type="hidden" id="incidentClassifId" name="incidentClassifId" value="0"></p>
<p><input type="hidden" id="incidentViewIndex" name="incidentViewIndex" value="0"></p>
<p><input type="hidden" id="appendStockistStatus" value="0"></p>
<p><input type="hidden" name="clinicalStat" id="clinicalStat" value="0"></p>
<p><input type="checkbox" name="clinicalDoc" class="clinicalCheck" id="clinicalDoc" value="0">Documentation</p>
<p><input type="checkbox" name="clinicalDoc" class="clinicalCheck" id="clinicalMiss" value="0">Missing Files</p>
<p><input type="checkbox" name="clinicalDoc" class="clinicalCheck" id="clinicalPol" value="0"> Policy not available</p>
<p><input type="checkbox" name="clinicalDoc" class="clinicalCheck" id="clinicalMed" value="0"> Medical records unavailable</p>
<p><input type="checkbox" name="clinicalDoc" class="clinicalCheck" id="clinicalCon" value="0"> Confidentiality</p>
<p><input type="checkbox" name="clinicalDoc" class="clinicalCheck" id="clinicalProc" value="0">Procedures not followed</p>
<p><input type="hidden" name="clinicalVals" id="clinicalVals"></p>
<p><input type="checkbox" id="checkBox" onclick="EnableDisableTextBox(this)"> Other (Specify)</p>
<p><input type="text2" id="text" name="incidentClassClinicalVal" disabled="disabled" style="width: 92%"></p>
</div>
I'm using javascript for the first time and am trying to pass variables to another page via a cookie. However it doesn't appear to be working. Right now I'm just trying to check the cookie value using an alert box. I've looked but haven't been able to find anything that can help me figure out what's going wrong. I was originally trying to implement the solution from this page: How to use JavaScript to fill a form on another page
Any help is appreciated.
My code for the first page is:
<!DOCTYPE html>
<html lang="en">
<!--Matt Proctor -->
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<link rel="stylesheet/less" type="text/css" href="dealership.less">
<script src="less.js" type="text/javascript"></script>
</head>
<body>
<script>
//validate name
function checkName() {
var lastN = document.getElementById('lName').value;
var firstN = document.getElementById('fName').value;
if (lastN == "" || firstN == "" || (/[^A-Za-z]/.test(lastN)) || (/[^A-Za-z]/.test(firstN))) {
window.alert("Please enter ONLY alphabetical characters for First Name AND Last Name");
return false;
}
else{
return true;
}
}
//check if q1 answered
function checkQ1() {
if (document.getElementById('timeButton1').checked == false
&& document.getElementById('timeButton2').checked == false
&& document.getElementById('timeButton3').checked == false
&& document.getElementById('timeButton4').checked == false
&& document.getElementById('timeButton5').checked == false) {
window.alert("Please answer question 1");
return false;
}
else{
return true;
}
}
//check if q2 answered
function checkQ2() {
if (document.getElementById('vehicleButton1').checked == false
&& document.getElementById('vehicleButton2').checked == false
&& document.getElementById('vehicleButton3').checked == false
&& document.getElementById('vehicleButton4').checked == false
&& document.getElementById('vehicleButton5').checked == false
&& document.getElementById('vehicleButton6').checked == false
&& document.getElementById('vehicleButton7').checked == false
&& document.getElementById('vehicleButton8').checked == false
&& document.getElementById('vehicleButton9').checked == false
&& document.getElementById('vehicleButton10').checked == false
&& document.getElementById('vehicleButton11').checked == false) {
window.alert("Please answer question 2");
return false;
}
else{
return true;
}
}
//validate q3
function checkQ3() {
var min = document.getElementById('minPriceText').value;
var max = document.getElementById('maxPriceText').value;
if (min == "" || (/[^0-9]/.test(min)) || max == "" || (/[^0-9]/.test(max))) {
window.alert("Please enter a numerical value for both the minimum price and maximum price");
return false;
}
else{
return true;
}
}
//check q4 answered
function checkQ4() {
if (document.getElementById('problemsNo').checked == false
&& document.getElementById('problemsYes').checked == false) {
window.alert("Please answer question 4");
return false;
}
else {
return true;
}
}
//check q5 answered
function checkQ5() {
if (document.getElementById('cleanNo').checked == false
&& document.getElementById('cleanYes').checked == false) {
window.alert("Please answer question 5")
return false;
}
else {
return true
}
}
//check q6 answered
function checkQ6() {
if (document.getElementById('gasNo').checked == false
&& document.getElementById('gasYes').checked == false) {
window.alert("Please answer question 6")
return false;
}
else {
return true;
}
}
//check q7 answered
function checkQ7() {
if (document.getElementById('experience1').checked == false
&& document.getElementById('experience2').checked == false
&& document.getElementById('experience3').checked == false
&& document.getElementById('experience4').checked == false
&& document.getElementById('experience5').checked == false
&& document.getElementById('experience6').checked == false
&& document.getElementById('experience7').checked == false
&& document.getElementById('experience8').checked == false
&& document.getElementById('experience9').checked == false
&& document.getElementById('experience10').checked == false) {
window.alert("Please answer question 7")
return false;
}
else {
return true;
}
}
//check if all data correct, and then attempt to pass to another webpage via cookie.
function checkAndPass() {
var nameCorrect, q1Correct, q2Correct, q3Correect, q4Correct, q5Correct, q6Correct, q7Correct;
nameCorrect = checkName();
q1Correct = checkQ1();
q2Correct = checkQ2();
q3Correct = checkQ3();
q4Correct = checkQ4();
q5Correct = checkQ5();
q6Correct = checkQ6();
q7Correct = checkQ7();
if(nameCorrect==true &&
q1Correct==true &&
q2Correct==true &&
q3Correct==true &&
q4Correct==true &&
q5Correct==true &&
q6Correct==true &&
q7Correct==true) {
var name = document.getElementById('fName').value + " " + document.getElementById('lName').value;
var quest1 = document.querySelector('input[name = "Q1"]:checked').value;
var quest2 = document.querySelector('input[name = "Q2"]:checked').value;
var quest3 = document.getElementById('minPriceText').value + "-" + document.getElementById('maxPriceText').value;
var quest4 = document.querySelector('input[name = "Q4"]:checked').value;
var quest5 = document.querySelector('input[name = "Q5"]:checked').value;
var quest6 = document.querySelector('input[name = "Q6"]:checked').value;
var quest7 = document.querySelector('input[name = "Q7"]:checked').value;
var commentline = document.getElementById('comments').value;
document.cookie=name + "," + quest1 + "/" + quest2 + "/" + quest3 + "/" + quest4 + "/" + quest5 "/" + quest6 + "/" + quest7 + "/" + commentline + "; path=/lab5summary.html";
newSummary();
}
}
function newSummary() {
window.open('lab5summary.html',
'_blank');
}
</script>
<img class="displaycenter" src="AcuraLogo.png" alt="Acura Logo">
<h1 align ="center">After Purchase Customer Survey</h1>
<div class="customer">
<h4>Customer Information</h4>
<br>
<br>
First name:<br>
<input id="fName" type="text" name="firstname" value="">
<br>
Last name:<br>
<input id="lName" type="text" name="lastname" value="">
</div>
<br><br>
<!--Question 1 asking about how long a customer had to wait before an employee assisted them-->
<div class="border">
<p> Q1: What was your approximate wait time before an associate was available to assist you?</p>
<input id="timeButton1" type="radio" class ="larger" name="Q1" value=".25">15 minutes or less.
<input id="timeButton2" type="radio" class ="larger" name="Q1" value=".5">30 minutes.
<input id="timeButton3" type="radio" class ="larger" name="Q1" value=".75">45 minutes.
<input id="timeButton4" type="radio" class ="larger" name="Q1" value="1">1 hour.
<input id="timeButton5" type="radio" class ="larger" name="Q1" value="1.5">1 and 1/2 hours or more.
<p> Q2: What kind of vehicle(s) were you looking for?</p>
<input id="vehicleButton1" type="checkbox" class ="larger" name="Q2" value="Sedan"> Sedan
<input id="vehicleButton2" type="checkbox" class ="larger" name="Q2" value="SUV/Crossover"> SVU/Crossover
<input id="vehicleButton3" type="checkbox" class ="larger" name="Q2" value="Convertible"> Convertible
<input id="vehicleButton4" type="checkbox" class ="larger" name="Q2" value="Coupe"> Coupe
<input id="vehicleButton5" type="checkbox" class ="larger" name="Q2" value="Hatchback"> Sedan
<input id="vehicleButton6" type="checkbox" class ="larger" name="Q2" value="Hybrid/Electric"> Hybrid/Electric
<input id="vehicleButton7" type="checkbox" class ="larger" name="Q2" value="Luxury"> Luxury
<input id="vehicleButton8" type="checkbox" class ="larger" name="Q2" value="Van/Minivan"> Van/Minivan
<input id="vehicleButton9" type="checkbox" class ="larger" name="Q2" value="Truck"> Truck
<input id="vehicleButton10" type="checkbox" class ="larger" name="Q2" value="Wagon"> Wagon
<input id="vehicleButton11" type="checkbox" class ="larger" name="Q2" value="AWD/4WD"> AWD/4WD
<p> Q3: What price range were looking for in a vehicle? </p>
Minimum: $
<input id="minPriceText" type="text" name="minprice" value="">
Maximum: $
<input id="maxPriceText" type="text" name="minprice" value="">
<p> Q4: Did the vehicle(s) purchased have any problems?</p>
<input id="problemsNo" type="radio" class ="larger" name="Q4" value="Yes">Yes
<input id="problemsYes" type="radio" class ="larger" name="Q4" value="No">No
<p> Q5: Was the interior of the vehicle clean? </p>
<input id="cleanYes" type="radio" class ="larger" name="Q5" value="Yes">Yes
<input id="cleanNo" type="radio" class ="larger" name="Q5" value="No">No
<p> Q6: Did the vehicle come with a full tank of gas? </p>
<input id="gasYes" type="radio" class ="larger" name="Q6" value="Yes">Yes
<input id="gasNo" type="radio" class ="larger" name="Q6" value="No">No
<p> Q7: On the scale from 1 to 10, 1 being extremely unpleasant and
10 being absolutely perfect, how would you rate your overall experience? </p>
<input id="experience1" type="radio" class ="larger" name="Q7" value="1">1
<input id="experience2" type="radio" class ="larger" name="Q7" value="2">2
<input id="experience3" type="radio" class ="larger" name="Q7" value="3">3
<input id="experience4" type="radio" class ="larger" name="Q7" value="4">4
<input id="experience5" type="radio" class ="larger" name="Q7" value="5">5
<input id="experience6" type="radio" class ="larger" name="Q7" value="6">6
<input id="experience7" type="radio" class ="larger" name="Q7" value="7">7
<input id="experience8" type="radio" class ="larger" name="Q7" value="8">8
<input id="experience9" type="radio" class ="larger" name="Q7" value="9">9
<input id="experience10" type="radio" class ="larger" name="Q7" value="10">10
<p> Finally please feel free to leave any other comments about your purchase/purchase-process below: </p>
<input id="comments" type="textbox" name="comments" value="" size="100">
</div>
<br>
<br>
<input onclick="checkAndPass()" id="submitButton" class="button1" type="submit" value="Submit">
</body>
</html>
The code of the page I'm passing to is:
<!DOCTYPE html>
<html lang="en">
<!--Matt Proctor -->
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<link rel="stylesheet/less" type="text/css" href="dealership.less">
<script src="less.js" type="text/javascript"></script>
</head>
<body>
<script>
var COOKIES = {};
var cookieStr=document.cookie;
window.alert("Cookie: " + cookieStr);
</script>
<img class="displaycenter" src="AcuraLogo.png" alt="Acura Logo">
<h1 align ="center">After Purchase Customer Survey Summary</h1>
<div class="border">
<p> Q1: What was your approximate wait time before an associate was available to assist you?</p>
<p> Q2: What kind of vehicle(s) were you looking for?</p>
<p> Q3: What price range were looking for in a vehicle? </p>
Minimum: $
Maximum:
<p> Q4: Did the vehicle(s) purchased have any problems?</p>
<p> Q5: Was the interior of the vehicle clean? </p>
<p> Q6: Did the vehicle come with a full tank of gas? </p>
<p> Q7: On the scale from 1 to 10, 1 being extremely unpleasant and
10 being absolutely perfect, how would you rate your overall experience? </p>
<p> Finally please feel free to leave any other comments about your purchase/purchase-process below: </p>
</div>
</body>
</html>
Also, for some reason firefox web console seems to think I need to place a semi-colon here in the first page after quest5:
document.cookie=name + "," + quest1 + "/" + quest2 + "/" + quest3 + "/" + quest4 + "/" + quest5 "/" + quest6 + "/" + quest7 + "/" + commentline + "; path=/lab5summary.html";
As a final note, I can only use javascript for this, not jQuery or PHP.
In your example is missing a plus sign:
+ quest5+"/" + quest6
Cookies are bound by a domain, so if you open from your file system (e.g file://index.html), it won't work.
If you are on modern browsers, I suggest you use localStorage and sessionStorage.
sessionStorage lasts as long as the page is open and localStorage until the browser's cache be cleaned.
You can also use store.js
Store.js
And you also probably want to expurge your code by using objects and arrays for ids and variables.
<div data-role="fieldcontain">
<label for="selectmenu" class="select">Preferred Seating:</label> <!-- Following drop down checkbox -->
<select name="selectmenu" id="selectmenu">
<option name="selectmenu" value="200" id="lowerArea" >Lower Area($200)</option>
<option name="selectmenu" value="150" checked="checked" id="levelOne">Level 1($150)</option>
<option name="selectmenu" value="100" id="levelTwo">Level 2($100)</option>
<option name="selectmenu" value="200" id="balcony">Balcony($200)</option>
</select>
</div>
<!--End of DropDownBoxes-->
<!--START OF CHECK BOXES-->
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>Prefered night:</legend>
<input type="radio" name="checkbox1" id="checkbox1_0" class="custom" value="" checked="checked" /></option>
<label for="checkbox1_0">Thursday</label>
<br />
<input type="radio" name="checkbox1" id="checkbox1_1" class="custom" value="" />
<label for="checkbox1_1">Friday</label>
<br><!--Break as on Example-->
<input type="radio" name="checkbox1" id="checkbox1_2" class="custom" value="" />
<label for="checkbox1_2">Saturday</label>
</fieldset><!-- Above are check boxes -->
</div>
<!--END OF CHECK BOXES-->
<!--Put a tick box here that asks for weekly mail-->
<button type="submit" value="Register" onClick="validateGalaOrder()"></button>
<p id="OrderInput"></p><!--USERS INPUT RETURNS TO THIS <P>-->
<p id="tktCost"></p>
<p id="orderErrorMsg"></p><!--INCORRECT INPUT MESSAGES RETURN TO THIS <P>-->
There are suppose to be breaks inbetween the check boxes, at the moment I can't get the 'saturday' variable to print!
function validateGalaOrder() {
var orderErrorMsg = "";
var OrderInput = "";
var ValidateOrderName = document.getElementById('txtOrderName').value;
var numTickets = document.getElementById('numTickets').value;
var Orderemail = document.getElementById('txtOrderEmail');
var filter = /*Email Symbol and letter Validator*/ /^([a-zA-Z0-9_.\-])+\#(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;//This filters out the email input
var lowerLvl = document.getElementById('lowerArea').value;
var lvlOne = document.getElementById('levelOne').value;
var lvlTwo= document.getElementById('levelTwo').value;
var Balcony = document.getElementById('balcony').value;
var cost = '';
var prefNight;
if(ValidateOrderName.length <= 2){
orderErrorMsg += ("<b>-ERROR- Please enter a valid name with a length of at least 3 letters</b>");
document.getElementById('orderErrorMsg').innerHTML = orderErrorMsg;
document.getElementById('txtOrderName').value = '';//will clear input field if false.
document.getElementById('txtOrderName').focus();//this Focuses on textbox if input is wrong.
//alert("-ERROR- Please enter a name more than one letter!");
document.getElementById('OrderInput').innerHTML = '';//If someone decides to change there input and that changed input is wrong then this will clear the other data from under the button and just show the error message
return false;
}
if (!filter.test(Orderemail.value)) {
orderErrorMsg += ("<b>-ERROR- Please provide a valid email address.</b>");
document.getElementById('orderErrorMsg').innerHTML = orderErrorMsg;
document.getElementById('txtOrderEmail').value = '';
document.getElementById('txtOrderEmail').focus();//this Focuses on textbox if input is wrong.
// alert('Please provide a valid email address');
document.getElementById('OrderInput').innerHTML = '';//If someone decides to change there input and that changed input is wrong then this will clear the other data from under the button and just show the error message
return false;
}
if(numTickets <= 0){
orderErrorMsg += ("<b>-ERROR- Please enter an amount of tickets greater than zero</b>");
document.getElementById('orderErrorMsg').innerHTML = orderErrorMsg;
document.getElementById('numTickets').value = '';
document.getElementById('numTickets').focus();//this Focuses on textbox if input is wrong.
/*alert("-ERROR- Please enter a mobile number with exactly 10 numeric digits");*/
document.getElementById('OrderInput').innerHTML = '';//If someone decides to change there input and that changed input is wrong then this will clear the other data from under the button and just show the error message
return false;
}
if(document.getElementById('checkbox1_0').checked == true){
prefNight = 'Thursday';
}
if(document.getElementById('checkbox1_1').checked == true){
prefNight = 'Friday';
}
if(document.getElementById('checkbox1_2').checked == true){
prefNight = 'saturday';
}
else{
cost = parseInt(document.getElementById('selectmenu').value,10) * numTickets; //This calculates the cost
var Orderemail = document.getElementById('txtOrderEmail').value;
OrderInput += ("Thank You " + "<b>"+ValidateOrderName+"</b>" + " For ordering your tickets" + "<br /> <br />" + "Number of tickets ordered: " + "<b>" + numTickets +"</b>" +
"<br>" + "Your email is: " + "<b>" + Orderemail + "</b>" + "<br /> The total cost will be: "+ "<b>$"+ cost + "</b>" + prefNight);
document.getElementById('OrderInput').innerHTML = OrderInput;//This prints the users details.
document.getElementById('orderErrorMsg').innerHTML = '';
}
return true;
}
Hi guys I have updated my code and basically at the moment I can print 'Thursday' and 'Friday' But I cannot print 'Saturday'!
You are using radio buttons instead of check boxes!
<input type="radio" name="checkbox1" id="checkbox1_2" class="custom" value="" />
Instead it should be
<input type="checkbox" name="checkbox1" id="checkbox1_2" class="custom" value="" />
For radio buttons with id "checkbox1_2" you can use-
var rates = document.getElementById('checkbox1_2').value;
to see whether it is checked or not you can use--
var checked=document.getElementById('checkbox1_2').checked;
or by jquery
$('input[name=checkbox1]:checked').val();
These are my Radio Buttons( I have changed them from checkboxes ):
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>Prefered night:</legend>
<input type="radio" name="checkbox1" id="checkbox1_0" class="custom" value="" checked="checked" /></option>
<label for="checkbox1_0">Thursday</label>
<br />
<input type="radio" name="checkbox1" id="checkbox1_1" class="custom" value="" />
<label for="checkbox1_1">Friday</label>
<br /><!--Break as on Example-->
<input type="radio" name="checkbox1" id="checkbox1_2" class="custom" value="" />
<label for="checkbox1_2">Saturday</label>
</fieldset><!-- Above are check boxes -->
</div>
Here is the Javascript that is printing the checked radio button's value ( I have made a variable and used if statements to decide what variable(Answer) to use ), I have put my IF STATEMENTS in the else{ } section because that is where all my correct inputs go. Please bare in mind that my variables are all above this else statement( OR in the previous question ):
else{
//Below is the checkbox printing
if(document.getElementById('checkbox1_0').checked == true){
prefNight = 'Thursday';
}
if(document.getElementById('checkbox1_1').checked == true){
prefNight = 'Friday';
}
if(document.getElementById('checkbox1_2').checked == true){
prefNight = 'Saturday';
}
//Above is the checkbox printing
cost = parseInt(document.getElementById('selectmenu').value,10) * numTickets;//This calculates the cost(selectMenu*numTickets)
var Orderemail = document.getElementById('txtOrderEmail').value;//This will grab the email value Inputed.
OrderInput += ("Thank You " + "<b>"+ValidateOrderName+"</b>" + " For ordering your tickets" + "<br /> <br />" + "Number of tickets ordered: " + "<b>" + numTickets +"</b>" +
"<br>" + "Your email is: " + "<b>" + Orderemail + "</b>" + "<br /> The total cost will be: "+ "<b>$"+ cost + "</b>" + prefNight);
document.getElementById('OrderInput').innerHTML = OrderInput;//This prints the users details to a html element.
document.getElementById('orderErrorMsg').innerHTML = '';//Removes error messages when everything is correct.
}
return true;
I have two radio groups. I wish to put a condition where if pRange is checked (val=pRange) and periodType value is 'one', 'two' or 'three', it displays a div called message. but my js code below doesn't seem to work. Any help is much appreciated.
$("input[name$='periodType']").change(function() {
var grpname = $(this).val();
var pname = $("input:radio[name='mainPeriod']:checked").val();
if (((grpname == "one") || (grpname == "two") || (grpname == "three")) && (pname=="pRange")) {
alert( pname + ' gname= ' + 'yes'); $('.message').show;
}
else {
alert( pname + ' gname= ' + 'no');
}
});
GROUP 1
<input type="radio" name="mainPeriod" id="pRange" val="pRange" />
<input type="radio" name="mainPeriod" id="pHour" val="pHour" />
<input type="radio" name="mainPeriod" id="pDay" val="pDay" />
<input type="radio" name="mainPeriod" id="pWeek" val="pWeek" />
<input type="radio" name="mainPeriod" id="pMonth" val="pMonth" />
GROUP 2
<input type="radio" name="periodType" val="one" />
<input type="radio" name="periodType" val="two" />
<input type="radio" name="periodType" val="three" />
<input type="radio" name="periodType" val="four" />
<input type="radio" name="periodType" val="five" />
<div class="message" style="display:none;">Message</div>
Whipped up a quick fiddle jsfiddle
your radio values are written as val="" not value="" don't know if that was just for the test or in your actual code.
I checked the console of your values
var grpname = $(this).val();
var pname = $("input:radio[name='mainPeriod']:checked").val();
The both return on/off only which is causing the issue. What you need to get is the .attr('val') so you can check the values
var grpname = $(this).attr('val');
var pname = $("input:radio[name='mainPeriod']:checked").attr('val');
Here's a fiddle http://jsfiddle.net/B9GyV/