i want to consult issue about javascript jquery
i want this value > 20 && < 40 clear or reset option in jquery suggestion please.
It looks function error in javascript and function no clear and reset option. but function show display block wrong position .
<script>
function Checkbox() {
var length = document.tester.selection.length;
var $result = "";
var chked = 0;
for (i = 0; i < length; i++) {
if (document.tester.selection[i].checked) {
$result += document.tester.selection[i].value;
}
}
var getdata = $result;
}
var checked, checkedValues = new Array();
$("input[type=checkbox]").change(function(e) {
var selectedtext = ($(this).next().text());
if ($(this).is(':checked')) {
$("#showdatacheckbox").append('<option value="' + selectedtext + '">' + selectedtext + '</option>');
} else {
$('option[value*="' + selectedtext + '"]').remove();
}
});
function range(val) {
document.getElementById('number').value = val;
}
prefer = document.getElementById("number").value;
if (prefer > 20 && prefer < 40) {
document.getElementById("wordingprogrammer").style.display = "none";
document.getElementById("wordingsenior").style.display = "none";
} else {
document.getElementById("wordingprogrammer").style.display = "block";
document.getElementById("wordingsenior").style.display = "block";
}
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="" method="post" id="tester" name="tester">
<input type="checkbox" class="iconDirector" name="selection" id="Director" value="1" onclick="Checkbox()">
<label id="wordingdirector">Director</label>
<input type="checkbox" class="iconProgrammer" name="selection" id="Programmer" value="2" onclick="Checkbox()">
<label id="wordingprogrammer">Programmer</label>
<input type="checkbox" class="iconSenior" name="selection" id="Senior" value="3" onclick="Checkbox()">
<label id="wordingsenior">Senior</label>
<input type="range" name="rangeInput" min="0" max="100" onchange="range(this.value);">
<input type="text" id="number" value="">
</form>
<a id="showdatacheckbox"></a>
function Checkbox() {
var length = document.tester.selection.length;
var $result = "";
var chked = 0;
for (i = 0; i < length; i++) {
if (document.tester.selection[i].checked) {
$result += document.tester.selection[i].value;
}
}
var getdata = $result;
}
var checked, checkedValues = new Array();
$("input[type=checkbox]").change(function (e) {
var selectedtext = ($(this).next().text());
if ($(this).is(':checked')) {
$("#showdatacheckbox").append('<option value="' + selectedtext + '">' + selectedtext + '</option>');
} else {
$('option[value*="' + selectedtext + '"]').remove();
}
});
function range(val) {
document.getElementById('number').value = val;
if (val > 20 && val < 40) {
$("input[type='checkbox']:checked").click();
}
}
prefer = document.getElementById("number").value;
if (prefer > 20 && prefer < 40) {
document.getElementById("wordingprogrammer").style.display = "none";
document.getElementById("wordingsenior").style.display = "none";
} else {
document.getElementById("wordingprogrammer").style.display = "block";
document.getElementById("wordingsenior").style.display = "block";
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="" method="post" id="tester" name="tester">
<input type="checkbox" class="iconDirector" name="selection" id="Director" value="1" onclick="Checkbox()" />
<label id="wordingdirector">Director</label>
<input type="checkbox" class="iconProgrammer" name="selection" id="Programmer" value="2" onclick="Checkbox()" />
<label id="wordingprogrammer">Programmer</label>
<input type="checkbox" class="iconSenior" name="selection" id="Senior" value="3" onclick="Checkbox()" />
<label id="wordingsenior">Senior</label>
<input type="range" name="rangeInput" min="0" max="100" onchange="range(this.value);" />
<input type="text" id="number" value="" />
</form>
<a id="showdatacheckbox"></a>
Related
Why this code is not returning the value.When I click Calculate, it does not work.
Comparison is ==
Assignment is =.
You need ageNumerical = 0;
Check out this fiddle.
Here is the snippet.
function getValue() {
var a = patientAge();
var b = patientBmi();
var c = history();
var d = patientDiet();
var totalValue;
totalValue = a + b + c + d;
document.getElementById('message').innerHTML = totalValue;
}
function patientAge() {
var age = document.getElementsByName('ageRange');
var ageBracket;
var ageNumerical;
for (var i = 0; i < age.length; i++) {
if (age[i].checked) {
ageBracket = age[i].value;
}
}
if (ageBracket == "1-25") {
ageNumerical = 0;
} else if (ageBracket == "26-40") {
ageNumerical = 5;
} else if (ageBracket == "41-60") {
ageNumerical = 8;
} else {
ageNumerical = 10;
}
return ageNumerical;
}
function patientBmi() {
var bmi = document.getElementsByName('bmiRange');
var bmiValue;
var bmiNumerical;
for (var i = 0; i < bmi.length; i++) {
if (bmi[i].checked) {
bmiValue = bmi[i].value;
}
}
if (bmiValue == "0-25") {
bmiNumerical = 0;
} else if (bmiValue == "26-30") {
bmiNumerical = 0;
} else if (bmiValue == "31-35") {
bmiNumerical = 9;
} else {
bmiNumerical = 10;
}
return bmiNumerical;
}
function history() {
var patientHistory = document.getElementsByName('familyHistory');
var historyAnswer;
var historyNumerical;
for (var i = 0; i < patientHistory.length; i++) {
if (patientHistory[i].checked) {
historyAnswer = patientHistory[i].value;
}
}
if (historyAnswer == "No") {
historyNumerical = 0;
} else if (historyAnswer == "Grandparent") {
historyNumerical = 7;
} else if (historyAnswer == "Sibling") {
historyNumerical = 15;
} else {
historyNumerical = 15;
}
return historyNumerical;
}
function patientDiet() {
var dietQuestion = document.getElementsByName('dietHabits');
var dietAnswer;
var dietNumerical;
for (var i = 0; i < dietQuestion.length; i++) {
if (dietQuestion[i].checked) {
dietAnswer = dietQuestion[i].value;
}
}
if (dietAnswer == "Low sugar") {
dietNumerical = 0;
} else if (dietAnswer == "Normal sugar") {
dietNumerical = 0;
} else if (dietAnswer == "Quite high sugar") {
dietNumerical = 7;
} else {
dietNumerical = 10;
}
return dietNumerical;
}
<div id="ageQuestion">
<p>How old are you?</p>
<label for="age1">1-25</label>
<input type="radio" name="ageRange" value="1-25" />
<label for="age2">26-40</label>
<input type="radio" name="ageRange" value="26-40" />
<label for="age3">41-60</label>
<input type="radio" name="ageRange" value="41-60" />
<label for="age4">60+</label>
<input type="radio" name="ageRange" value="60+" />
</div>
<div id="bmi">
<p>What is your BMI?</p>
<label for="bmiLevel">0-25</label>
<input type="radio" name="bmiRange" value="0-25" />
<label for="bmiLevel">26-30</label>
<input type="radio" name="bmiRange" value="26-30" />
<label for="bmiLevel">31-35</label>
<input type="radio" name="bmiRange" value="31-35" />
<label for="bmiLevel">35+</label>
<input type="radio" name="bmiRange" value="35+" />
</div>
<div id="family">
<p>Does anybody in your family have Diabetes?</p>
<label for="history">No</label>
<input type="radio" name="familyHistory" value="No" />
<label for="history">Grandparent</label>
<input type="radio" name="familyHistory" value="Grandparent" />
<label for="history">Sibling</label>
<input type="radio" name="familyHistory" value="Sibling" />
<label for="history">Parent</label>
<input type="radio" name="familyHistory" value="Parent" />
</div>
<div id="diet">
<p>How would you describe your diet?</p>
<label for="diet">Low sugar</label>
<input type="radio" name="dietHabits" value="Low sugar" />
<label for="diet">Normal sugar</label>
<input type="radio" name="dietHabits" value="Normal sugar" />
<label for="diet">Quite high sugar</label>
<input type="radio" name="dietHabits" value="Quite high sugar" />
<label for="diet">High sugar</label>
<input type="radio" name="dietHabits" value="High sugar" />
</div>
<button onclick="getValue()">Calculate</button>
<p id="message"></p>
Change == to = when assigning values.
ageNumerical == 0;
to
ageNumerical = 0;
I'm very new to Javascript and Jquery and am attempting to use this script externally to calculate the value of a users selections (Radio buttons and Checkboxes) and then output the value of the function into my HTML page (id cost) by pressing a button (id submit). This is what I have so far, I would be very appreciative if someone could help me understand why it isn't working.
function add() {
var val1 = 0;
for (i = 0; i < document.form1."radio-choice-v-1"; i++)
{
if (document.form1."radio-choice-v-1"[i].checked === true)
{
val1 = document.form1."radio-choice-v-1"[i].value;
}
}
var val2 = 0;
for (i = 0; i < document.form2."radio-choice-v-2"; i++)
{
if (document.form2.radio-"choice-v-2"[i].checked === true)
{
val2 = document.form2."radio-choice-v-2"[i].value;
}
}
var val3 = 0;
for (i = 0; i < document.form3."radio-choice-v-3"; i++)
{
if (document.form3."radio-choice-v-3"[i].checked === true)
{
val3 = document."form3.radio-choice-v-3"[i].value;
}
}
var val4 = 0;
for (i = 0; i < document.form4."radio-choice-v-4"; i++)
{
if (document.form4."radio-choice-v-4"[i].checked === true)
{
val4 = document.form4."radio-choice-v-4"[i].value;
}
}
var val5 = 0;
for (i = 0; i < document.form5."radio-choice-v-5"; i++)
{
if (document.form5."radio-choice-v-5"[i].checked === true)
{
val5 = document.form5."radio-choice-v-5"[i].value;
}
}
var val6 = 0;
for( i = 0; i < document.form6."checkselection"; i++ )
{
val6 = document.form6."checkselection"[i].value;
}
$("cost").html(" = " + (val1 + val2 + val3 + val4 + val5 + val6));
}
<form name="form1" id="form1">
<fieldset data-role="controlgroup">
<legend>Please select a case:</legend>
<input id="radio-choice-v-1a" name="radio-choice-v-1" value="40" CHECKED="checked" type="radio">
<label for="radio-choice-v-1a">Choice 1 (£40)</label>
<input id="radio-choice-v-1b" name="radio-choice-v-1" value="45" type="radio">
<label for="radio-choice-v-1b">Choice 2 (£45)</label>
<input id="radio-choice-v-1c" name="radio-choice-v-1" value="140" type="radio">
<label for="radio-choice-v-1c">Choice 3 (£140)</label>
</fieldset>
</form>
<form name="form6" id="form6">
<fieldset data-role="controlgroup">
<legend>Select your extras</legend>
<input type="Checkbox" name="checkselection" id="checkbox-extra-1" value="20">
<label for="checkbox-extra-1"> Selection 1 (£20) (recommended)</label>
<input type="Checkbox" name="checkselection" id="checkbox-extra-2" value="12">
<label for="checkbox-extra-2">Selection 2 (£12)</label>
<input type="Checkbox" name="checkselection" id="checkbox-extra-3" value="4">
<label for="checkbox-extra-3">Selection 3 (£4)</label>
<input type="Checkbox" name="checkselection" id="checkbox-extra-4" value="30">
<label for="checkbox-extra-4">Selection 4 (£30)</label>
</fieldset>
</form>
<form>
<input id="submit" type="button" value="Submit" onclick="add();">
</form>
£<u id="cost"></u>
There where quite a few problems with your code. Please have a look at the working example I created on JSFiddle for you:
http://jsfiddle.net/95SrV/1/
I had to comment out the val2+ because you did not have those other forms in the sample HTML you provided:
Pure JavaScript
var val1 = 0;
for (i = 0; i < document.form1["radio-choice-v-1"].length; i++) {
if (document.form1["radio-choice-v-1"][i].checked === true) {
val1 = document.form1["radio-choice-v-1"][i].value;
}
}
However, if you do want to full use jQuery you could use the following code instead:
Full jQuery
var val1 = 0;
$('[name="radio-choice-v-1"]').each(function() {
currentItem = $(this);
if (currentItem.is(":checked")) {
val1 = currentItem.val();
}
});
Try with this one. Make sure all elements will be available like "radio-choice-v-2".
function add() {
var val1 = 0;
for (var i = 0; i < document.form1["radio-choice-v-1"].length; i++)
{
if (document.form1["radio-choice-v-1"][i].checked === true)
{
val1 = document.form1["radio-choice-v-1"][i].value;
}
}
var val2 = 0;
for (i = 0; i < document.form2["radio-choice-v-2"].length; i++)
{
if (document.form2["radio-choice-v-2"][i].checked === true)
{
val2 = document.form2["radio-choice-v-2"][i].value;
}
}
var val3 = 0;
for (i = 0; i < document.form3["radio-choice-v-3"].length; i++)
{
if (document.form3["radio-choice-v-3"][i].checked === true)
{
val3 = document.form3["form3.radio-choice-v-3"][i].value;
}
}
var val4 = 0;
for (i = 0; i < document.form4["radio-choice-v-4"].length; i++)
{
if (document.form4["radio-choice-v-4"][i].checked === true)
{
val4 = document.form4["radio-choice-v-4"][i].value;
}
}
var val5 = 0;
for (i = 0; i < document.form5["radio-choice-v-5"].length; i++)
{
if (document.form5["radio-choice-v-5"][i].checked === true)
{
val5 = document.form5["radio-choice-v-5"][i].value;
}
}
var val6 = 0;
for( i = 0; i < document.form6["checkselection"].length; i++ )
{
if (document.form6["checkselection"][i].checked === true) //Are you missing check here
val6 += document.form6["checkselection"][i].value; // += added here
}
$("#cost").html(" = " + (val1 + val2 + val3 + val4 + val5 + val6));
}
</script>
<form name="form1" id="form1">
<fieldset data-role="controlgroup">
<legend>Please select a case:</legend>
<input id="radio-choice-v-1a" name="radio-choice-v-1" value="40" CHECKED="checked" type="radio">
<label for="radio-choice-v-1a">Choice 1 (£40)</label>
<input id="radio-choice-v-1b" name="radio-choice-v-1" value="45" type="radio">
<label for="radio-choice-v-1b">Choice 2 (£45)</label>
<input id="radio-choice-v-1c" name="radio-choice-v-1" value="140" type="radio">
<label for="radio-choice-v-1c">Choice 3 (£140)</label>
</fieldset>
</form>
<form name="form6" id="form6">
<fieldset data-role="controlgroup">
<legend>Select your extras</legend>
<input type="Checkbox" name="checkselection" id="checkbox-extra-1" value="20">
<label for="checkbox-extra-1"> Selection 1 (£20) (recommended)</label>
<input type="Checkbox" name="checkselection" id="checkbox-extra-2" value="12">
<label for="checkbox-extra-2">Selection 2 (£12)</label>
<input type="Checkbox" name="checkselection" id="checkbox-extra-3" value="4">
<label for="checkbox-extra-3">Selection 3 (£4)</label>
<input type="Checkbox" name="checkselection" id="checkbox-extra-4" value="30">
<label for="checkbox-extra-4">Selection 4 (£30)</label>
</fieldset>
</form>
<form>
<input id="submit" type="button" value="Submit" onclick="add();">
</form>
£<u id="cost"></u>
I can able to load value from databases to text-box...so now named as auto..from this i want to create a auto search with multiple check box to select multiple value in text-box java script...its possible ...??
<form name="form1">
<input type="checkbox" name="checkboxname" value="a">
<input type="checkbox" name="checkboxname" value="b">
<input type="checkbox" name="checkboxname" value="c">
</form>
<form name="form2">
<input type="text" name="textname">
</form>
var textbox = document.getElementsByName("textname")[0];
var checkboxes = document.getElementsByName("checkboxname");
for (var i = 0; i < checkboxes.length; i++) {
var checkbox = checkboxes[i];
checkbox.onclick = (function(chk){
return function() {
var value = "";
for (var j = 0; j < checkboxes.length; j++) {
if (checkboxes[j].checked) {
if (value === "") {
value += checkboxes[j].value;
} else {
value += "," + checkboxes[j].value;
}
}
}
textbox.value = value;
}
})(checkbox);
}
Try this,
<form name="form1" class="form_chk">
<input type="checkbox" name="checkboxname" value="a" class="chk_box">a
<input type="checkbox" name="checkboxname" value="b" class="chk_box">b
<input type="checkbox" name="checkboxname" value="c" class="chk_box">c
</form>
$( "#txt_search" ).blur(function(e) {
var $search = $(e.currentTarget),
search_str = $search.val().toLowerCase(), $chk,
$chk_ele = $('.chk_box').filter(function(index, chk){
if($(chk).val().toLowerCase().search(search_str) !== -1){
return $(chk);
}
});
$('.chk_box').prop('checked', false);
$chk_ele.prop('checked', true);
});
See the output : http://jsfiddle.net/J7dUz/
It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.
Closed 11 years ago.
How to save log to .txt ?
<html>
<head>
<title>Javascript Stopwatch</title>
<script language="javascript">
var base = 60;
var clocktimer,dateObj,dh,dm,ds,ms;
var readout='';
var h=1;
var m=1;
var tm=1;
var s=0;
var ts=0;
var ms=0;
var show=true;
var init=0;
var filePath = "/Users/ResetOfDirectoryPath/testWrite.txt";
function getCheckedValue(radioObj) {
if(!radioObj)
return "";
var radioLength = radioObj.length;
if(radioLength == undefined)
if(radioObj.checked)
return radioObj.value;
else
return "";
for(var i = 0; i < radioLength; i++) {
if(radioObj[i].checked) {
return radioObj[i].value;
}
}
return "";
}
function uncheckedRadio() {
var radio_1 = document.clockform.gName;
var radio_2 = document.clockform.aName;
if(radio_1.length == undefined)
radio_1.checked = false;
else
for(var i = 0; i < radio_1.length; i++)
radio_1[i].checked = false;
if(radio_2.length == undefined)
radio_2.checked = false;
else
for(var i = 0; i < radio_2.length; i++)
radio_2[i].checked = false;
}
unction clearALL() {
clearTimeout(clocktimer);
h=1;m=1;tm=1;s=0;ts=0;ms=0;
init=0;show=true;
readout='00:00:00.00';
document.clockform.clock.value=readout;
document.clockform.m0.value = '';
uncheckedRadio();
nrGola = 1;
}
var nrGola = 1;
function addMEM() {
if (init>0)
{
var mC = document.clockform.m0;
var gol = getCheckedValue(document.clockform.gName);
var asy = getCheckedValue(document.clockform.aName);
if(gol != '')
{
var mesOut = nrGola + " G: " + gol;
if(asy != '')
{
if(asy == gol)
{
alert('Error, asysta taki sam jak strzelca');
uncheckedRadio();
return false;
}
mesOut = mesOut + ", A: " + asy;
}
else
mesOut = mesOut + ", A: brak";
mesOut = mesOut + ", " + readout;
if(mC.value != '')
mC.value = mC.value + "\n" + mesOut;
else
mC.value = mesOut;
nrGola++;
uncheckedRadio();
}
else
alert('Nie wybrano strzelcy');
}
}
function startTIME() {
var cdateObj = new Date();
var t = (cdateObj.getTime() - dateObj.getTime())-(s*1000);
if (t>999) { s++; }
if (s>=(m*base)) {
ts=0;
m++;
} else {
ts=parseInt((ms/100)+s);
if(ts>=base) { ts=ts-((m-1)*base); }
}
if (m>(h*base)) {
tm=1;
h++;
} else {
tm=parseInt((ms/100)+m);
if(tm>=base) { tm=tm-((h-1)*base); }
}
ms = Math.round(t/10);
if (ms>99) {ms=0;}
if (ms==0) {ms='00';}
if (ms>0&&ms<=9) { ms = '0'+ms; }
if (ts>0) { ds = ts; if (ts<10) { ds = '0'+ts; }} else { ds = '00'; }
dm=tm-1;
if (dm>0) { if (dm<10) { dm = '0'+dm; }} else { dm = '00'; }
dh=h-1;
if (dh>0) { if (dh<10) { dh = '0'+dh; }} else { dh = '00'; }
readout = dh + ':' + dm + ':' + ds + '.' + ms;
if (show==true) { document.clockform.clock.value = readout; }
clocktimer = setTimeout("startTIME()",1);
}
function findTIME() {
if (init==0) {
dateObj = new Date();
startTIME();
init=1;
}
}
/*
var times = {};
window.onload=function() {
var inpt = document.getElementsByTagName("input");
for (var i=0,n=inpt.length;i<n;i++) {
if (inpt[i].type=="radio") inpt[i].onclick=function() {
times[this.id]=this.form.m0.value=this.form.clock.value;
}
}
}
*/
function showTimes() {
var temp = document.clockform.m0.value;
if(temp != '')
{
uriContent = "data:text/plain;charset=utf-8," + encodeURIComponent(temp);
newWindow=window.open(uriContent, 'txt');
}
}
</script>
</head>
<body bgcolor=tan>
<form name="clockform">
<table bgcolor=cornsilk align=center cellpadding=5 border=1 bordercolor=burlywood><tr><td>
<table cellpadding=3 cellspacing=0 border=0 align=center>
<tr>
<td bgcolor=wheat><input name=clock value="00:00:00.00" style="text-align:center; width:174px; height:35px; font-size:24; font-weight:bold"></td>
<td valign=top bgcolor=wheat><input name=clearer type=button value="Reset" onclick="clearALL()"></td>
</tr>
<tr>
<td colspan=2 bgcolor=wheat>
<input name=starter type=button value="Start" style="width:97px; font-weight:bold" onclick="findTIME()"> <input name=marker type=button id ="dupa" value="Mark" style="width:84px" onclick="addMEM()"><br><font style="font-size:9pt"> </font></td>
</tr>
<tr><td>
<input type="radio" name="gName" value="1" /> 1<br>
<input type="radio" name="gName" value="2" /> 2<br>
<input type="radio" name="gName" value="3" /> 3<br>
<input type="radio" name="gName" value="4" /> 4<br>
<input type="radio" name="gName" value="5" /> 5<br>
<input type="radio" name="gName" value="6" /> 6<br>
</td>
<td>
<input type="radio" name="aName" value="1" /> 1<br>
<input type="radio" name="aName" value="2" /> 2<br>
<input type="radio" name="aName" value="3" /> 3<br>
<input type="radio" name="aName" value="4" /> 4<br>
<input type="radio" name="aName" value="5" /> 5<br>
<input type="radio" name="aName" value="6" /> 6<br>
</td>
</tr>
<tr><td colspan="2">
<textarea name="m0" style="text-align:left; width:83px cols="40" rows="5" readonly="readonly">
</textarea>
<input type="button" onclick="showTimes()" value="show times">
</td>
</tr>
</table>
</form>
</body>
</html>
JavaScript, running in a browser, under normal security conditions, cannot access the user's file system.
You need to have ajax or something else that can write to the server with the right permissions to write to a log file on the server. The JavaScript itself can not write a log file to the server or the client as it is executed off the server and it does not have access to the clients computer (Image getting viruses through JavaScript if this was true)....Unless you give explicit write access which is very unsafe and very complicated to do.
I have the following code. I need to see how many checkboxes have been checked in my form and if there are 4 or less submit the form and if there are more display an error and don't submit.
function SetHiddenFieldValue()
{
var checks = document.getElementById('toppings').getElementsByTagName('input');
var toppings = new Array();
var randomNumber = Math.floor((Math.random() * 9000) + 100);
var totalChecked = 0;
var itemPrice = 5.99;
for (i = 0; i < checks.length; i++)
{
if (checks[i].checked)
{
toppings[i] = checks[i].value;
totalChecked += 1;
}
}
if (totalChecked > 4) {
alert("You can only choose up to Max of 4 Toppings");
} else {
itemPrice = itemPrice + (totalChecked * 0.99);
document.getElementById('my-item-name').value = toppings.join("\t");
document.getElementById('my-item-id').value = randomNumber;
document.getElementById('my-item-price').value = itemPrice;
}
And my form is:
<form id="pizza" name="pizza" method="post" action="" class="jcart" onsubmit="return SetHiddenFieldValue();">
<input type="hidden" name="my-item-id" id="my-item-id" value="" />
<input type="hidden" name="my-item-name" id="my-item-name" value="" />
<input type="hidden" name="my-item-price" id="my-item-price" value="" />
<input type="hidden" name="my-item-qty" value="1" />
<input type="submit" name="my-add-button" value=" add " />
</form>
any help would be appreciated.
Your javascript looks correct. I think the only you should need to do is return false; on your if (totalChecked > 4) statement.
Edit: Here's the section of your javascript function to modify:
if (totalChecked > 4) {
alert("You can only choose up to Max of 4 Toppings");
return false;
} else {
itemPrice = itemPrice + (totalChecked * 0.99);
document.getElementById('my-item-name').value = toppings.join("\t");
document.getElementById('my-item-id').value = randomNumber;
document.getElementById('my-item-price').value = itemPrice;
return true;
}
Your function needs to return false to cancel the submission or true to proceed. That's why your onsubmit form attribute is set to "return XXX()" rather than just "XXX()"
As mentioned, you should return false from your check function to cancel the submit, and true if the check is okay.
How about something like this?
<html>
<head>
<title>Pizza Order Form</title>
</head>
<body>
<script>
function SetHiddenFieldValue() {
var totalChecked = 0;
var itemPrice = 5.99;
var toppings = new Array();
var randomNumber = Math.floor((Math.random() * 9000) + 100);
var checks = document.getElementsByName('topping');
for (i = 0; i < checks.length; i++) {
if (checks[i].checked) {
toppings[i] = checks[i].value;
totalChecked += 1;
}
}
if (totalChecked > 4) {
alert("You can only choose up to Max of 4 Toppings");
return false;
}
else {
itemPrice = itemPrice + (totalChecked * 0.99);
document.getElementById('my-item-name').value = toppings.join("\t");
document.getElementById('my-item-id').value = randomNumber;
document.getElementById('my-item-price').value = itemPrice;
return true;
}
}
</script>
<form id="pizza" name="pizza" method="post" action="" class="jcart" onsubmit="return SetHiddenFieldValue();">
<input type="hidden" name="my-item-id" id="my-item-id" value="" />
<input type="hidden" name="my-item-name" id="my-item-name" value="" />
<input type="hidden" name="my-item-price" id="my-item-price" value="" />
<input type="hidden" name="my-item-qty" value="1" />
<div id="toppings">
<input type="checkbox" name="topping" id="pepperoni" />Pepperoni
<input type="checkbox" name="topping" id="tomato" />Tomato
<input type="checkbox" name="topping" id="mushrooms" />Mushrooms
<input type="checkbox" name="topping" id="peppers" />Peppers
<input type="checkbox" name="topping" id="olives" />Olives
</div>
<input type="submit" name="my-add-button" value=" Add " />
</form>
</body>
</html>