...

View Full Version : trying to validate checkboxes are checked



jarv
09-15-2011, 03:09 PM
Can someone please help, I don't understand why my code doesn't work?!
I just want to check to see if a checkbox has been checked...




<script language="JAVASCRIPT" type="text/djs">
function checkCheckBoxes() {
if (document.f1.Times[].checked == false
{
alert ('You didn\'t choose any of the checkboxes!');
return false;
}
else
{
return true;
}
}
</script>


<form onsubmit="return checkCheckBoxes();" action="add-booking-script.php" name="f1" method="post">
<input type="checkbox" name="Times[]" value="07:00:00"> 07:00 - 10:00<br />
<input type="checkbox" name="Times[]" value="10:00:00"> 10:00 - 13:00<br />
<input type="checkbox" name="Times[]" value="13:00:00"> 13:00 - 16:00<br />
<input type="checkbox" name="Times[]" value="16:00:00"> 16:00 - 19:00<br />
</form>

DanInMa
09-15-2011, 03:30 PM
your code is missing somethigns, also the lanuguage tag is deprecated and I'm not sure what text/djs is never seen that one.

also [] typically refers to an array index, you shouldnt be using it in a name.

Oh an also, are you sure you want to use checkeboxes, meaning they can pick multiple choices for the time?

here:


<script type="text/javascript">
function checkCheckBoxes() {
if (document.f1.Times.checked == false)
{
alert ("You didn't choose any of the checkboxes!");
return false;
}
else
{
return true;
}
}
</script>

jarv
09-15-2011, 03:46 PM
ok thanks,

I have now changed my javascript to the following:



<script language="javascript" type="text/javascript">
function checkCheckBoxes() {
if (document.f1.Times.checked == false)
{
alert ('You didn\'t choose any of the checkboxes!');
return false;
}
else
{
return true;
}
}
</script>


it's still not working?! yes my checkboxes are in an array still but I removed the [] from the javascript

DanInMa
09-15-2011, 04:33 PM
well since they all have the same name, it looks like youd have to write a loop function to check each checkbox.

Are you sure you want to allow the user to pick multiple selections for the times? This really looks like a job for radio's and not checkboxes

jarv
09-16-2011, 06:17 PM
loop?

I have to leave them as checkboxes!

StHelensBull
09-16-2011, 09:01 PM
Try this:



function checkCheckBoxes() {
f1 = "";
f1Len = document.f1.Times.length;
for(i = 0; i < f1Len; i++){
if(document.f1.Times[i].checked){
f1 = document.f1.Times[i].value;
}
}
if(f1 == ""){
alert("You didn\'t choose any of the checkboxes!");
return false;
}
return true;
}

jarv
09-16-2011, 09:22 PM
aww, it still not working?!

here's my page



<?php
session_start();
include_once("config.php");
if (!isset($_SESSION['rsUser'])) {
$msg = "Username and/or Password incorrect!";
header('Location: index.php?msg='.$msg.'');
}
?>



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Affordable Appliance Repairs Admin - Edit Booking Date/Time</title>

<!-- CSS -->

<!-- Reset Stylesheet -->
<link rel="stylesheet" href="resources/css/reset.css" type="text/css" media="screen" />

<!-- Main Stylesheet -->
<link rel="stylesheet" href="resources/css/style.css" type="text/css" media="screen" />

<!-- Invalid Stylesheet. This makes stuff look pretty. Remove it if you want the CSS completely valid -->
<link rel="stylesheet" href="resources/css/invalid.css" type="text/css" media="screen" />

<!-- Colour Schemes

Default colour scheme is green. Uncomment prefered stylesheet to use it.

<link rel="stylesheet" href="resources/css/blue.css" type="text/css" media="screen" />

<link rel="stylesheet" href="resources/css/red.css" type="text/css" media="screen" />

-->

<!-- Internet Explorer Fixes Stylesheet -->

<!--[if lte IE 7]>
<link rel="stylesheet" href="resources/css/ie.css" type="text/css" media="screen" />
<![endif]-->
<link rel="stylesheet" href="../thickbox.css" type="text/css" media="screen" />
<!-- Javascripts -->

<!-- jQuery -->

<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("fieldset input[type=text]").focus(function(){
$(this).parent().find(".input-notification").css("visibility", "visible");
}).blur(function(){
$(this).parent().find(".input-notification").css("visibility", "hidden");
});
});
</script>
<!-- jQuery Configuration -->
<script type="text/javascript" src="resources/scripts/simpla.jquery.configuration.js"></script>

<!-- Facebox jQuery Plugin -->
<script type="text/javascript" src="resources/scripts/facebox.js"></script>

<!-- jQuery WYSIWYG Plugin -->
<script type="text/javascript" src="resources/scripts/jquery.wysiwyg.js"></script>
<!-- jQuery -->

<script type="text/javascript" src="http://www.affordableappliancerepairs.co.uk/bookings/app/web/js/admin-core.js"></script>
<script type="text/javascript" src="http://www.affordableappliancerepairs.co.uk/bookings/core/libs/jquery/ui/js/jquery.ui.core.min.js"></script>
<script type="text/javascript" src="http://www.affordableappliancerepairs.co.uk/bookings/core/libs/jquery/ui/js/jquery.ui.widget.min.js"></script>
<script type="text/javascript" src="http://www.affordableappliancerepairs.co.uk/bookings/core/libs/jquery/ui/js/jquery.ui.tabs.min.js"></script>
<script type="text/javascript" src="http://www.affordableappliancerepairs.co.uk/bookings/core/libs/jquery/ui/js/jquery.ui.button.min.js"></script>
<script type="text/javascript" src="http://www.affordableappliancerepairs.co.uk/bookings/core/libs/jquery/ui/js/jquery.ui.position.min.js"></script>
<script type="text/javascript" src="http://www.affordableappliancerepairs.co.uk/bookings/core/libs/jquery/ui/js/jquery.ui.dialog.min.js"></script>
<script type="text/javascript" src="http://www.affordableappliancerepairs.co.uk/bookings/core/libs/jquery/ui/js/jquery.effects.core.min.js"></script>
<script type="text/javascript" src="http://www.affordableappliancerepairs.co.uk/bookings/core/libs/jquery/ui/js/jquery.ui.datepicker.min.js"></script>
<script type="text/javascript" src="http://www.affordableappliancerepairs.co.uk/bookings/core/libs/jquery/plugins/validate/js/jquery.validate.min.js"></script>
<script type="text/javascript" src="../scripts/thickbox.js"></script>
<!-- Internet Explorer .png-fix -->

<!--[if IE 6]>
<script type="text/javascript" src="resources/scripts/DD_belatedPNG_0.0.7a.js"></script>
<script type="text/javascript">
DD_belatedPNG.fix('.png_bg, img, li');
</script>
<![endif]-->



<!-- Reset Stylesheet -->
<link rel="stylesheet" href="resources/css/reset.css" type="text/css" media="screen" />

<!-- Main Stylesheet -->
<link rel="stylesheet" href="resources/css/style.css" type="text/css" media="screen" />
<link rel="stylesheet" href="resources/css/blue.css" type="text/css" media="screen" />
<link type="text/css" rel="stylesheet" href="http://www.affordableappliancerepairs.co.uk/bookings/core/libs/jquery/ui/css/smoothness/jquery.ui.core.css" />
<link type="text/css" rel="stylesheet" href="http://www.affordableappliancerepairs.co.uk/bookings/core/libs/jquery/ui/css/smoothness/jquery.ui.theme.css" />
<link type="text/css" rel="stylesheet" href="http://www.affordableappliancerepairs.co.uk/bookings/core/libs/jquery/ui/css/smoothness/jquery.ui.tabs.css" />

<link type="text/css" rel="stylesheet" href="http://www.affordableappliancerepairs.co.uk/bookings/index.php?controller=AdminCalendars&amp;action=css&amp;cid=1" />
<link type="text/css" rel="stylesheet" href="http://www.affordableappliancerepairs.co.uk/bookings/core/libs/jquery/ui/css/smoothness/jquery.ui.button.css" />
<link type="text/css" rel="stylesheet" href="http://www.affordableappliancerepairs.co.uk/bookings/core/libs/jquery/ui/css/smoothness/jquery.ui.dialog.css" />
<link type="text/css" rel="stylesheet" href="http://www.affordableappliancerepairs.co.uk/bookings/core/libs/jquery/ui/css/smoothness/jquery.ui.datepicker.css" />


<script>
$(function() {
$( "#datepicker" ).datepicker();
});

</script>
<script language="javascript" type="text/javascript">

//Browser Support Code

function datecheckFunction(){
var datecheckRequest; // The variable that makes Ajax possible!

try{
// Opera 8.0+, Firefox, Safari
datecheckRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
datecheckRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
datecheckRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
// Create a function that will receive data sent from the server
datecheckRequest.onreadystatechange = function(){
if(datecheckRequest.readyState == 4){
var ajaxDisplay = document.getElementById('ajaxDiv');
ajaxDisplay.innerHTML = datecheckRequest.responseText;
}
}
var datepicker = document.getElementById('datepicker').value;

var queryString = "?datepicker=" + datepicker+'&r='+Math.random();
//Add the following line
datecheckRequest.open("GET", "http://www.affordableappliancerepairs.co.uk/admin/checkdate.php" + queryString, true);

datecheckRequest.send(null);
}
</script>
<script language="javascript" type="text/javascript">
function checkCheckBoxes() {
f1 = "";
f1Len = document.f1.Times.length;
for(i = 0; i < f1Len; i++){
if(document.f1.Times[i].checked){
f1 = document.f1.Times[i].value;
}
}
if(f1 == ""){
alert("Please select 1 time slot!");
return false;
}
return true;
}
</script>
</head>

<body><div id="body-wrapper"> <!-- Wrapper for the radial gradient background -->

<?
$menuitem=4;
$submenuitem=8;
include("menu.php");
?>

<div id="main-content"> <!-- Main Content Section with everything -->

<noscript> <!-- Show a notification if the user has disabled javascript -->
<div class="notification error png_bg">
<div>
Javascript is disabled or is not supported by your browser. Please <a href="http://browsehappy.com/" title="Upgrade to a better browser">upgrade</a> your browser or <a href="http://www.google.com/support/bin/answer.py?answer=23852" title="Enable Javascript in your browser">enable</a> Javascript to navigate the interface properly.
</div>
</div>
</noscript>

<!-- Page Head -->
<?php include_once("welcome.php");?>

<div class="clear"></div> <!-- End .clear -->

<div class="content-box"><!-- Start Content Box -->

<div class="content-box-header">

<h3>Add Booking</h3>

<div class="clear"></div>

</div> <!-- End .content-box-header -->

<div class="content-box-content">

<div class="tab-content default-tab" id="tab1">

<form onsubmit="return checkCheckBoxes();" action="add-booking-script.php" name="f1" method="post">

<fieldset> <!-- Set class to "column-left" or "column-right" on fieldsets to divide the form into columns -->
<input class="text-input medium-input" type="hidden" id="medium-input" name="created" value="<?php echo date("Y-m-d"); ?>" /><input class="text-input medium-input" type="hidden" id="medium-input" name="booking_status" value="new" />
<p>
<label>Date</label>
<input class="text-input small-input" type="text" id="datepicker" onChange="datecheckFunction();" name="booking_date" value="<?php echo date("d-m-Y"); ?>" />
<i>Please click the date to show calendar and then select a date from the calendar</i>
</p>
<p><div id="ajaxDiv"></div></p>
<p>
<label>Booking time slots</label>
<i>Please select only 1 time slot,<br /> if the customer is available all day then check that box too<br /><br /></i>
<input type="checkbox" name="Times[]" value="07:00:00"> 07:00 - 10:00<br />
<input type="checkbox" name="Times[]" value="10:00:00"> 10:00 - 13:00<br />
<input type="checkbox" name="Times[]" value="13:00:00"> 13:00 - 16:00<br />
<input type="checkbox" name="Times[]" value="16:00:00"> 16:00 - 19:00<br />
<i><strong>Please note:</strong> these booking time slots above are not limited.</i>
</p>
<p>
<input type="checkbox" name="all_day" value="1"> Available All Day<br />
</p>
<p>
<label>Customer Name</label>
<input class="text-input medium-input" type="text" id="medium-input2" name="customer_name" />
</p>

<p>
<label>Email</label>
<input class="text-input medium-input" type="text" id="medium-input" name="customer_email" /> </p>

<p>
<label>Telephone</label>
<input class="text-input medium-input" type="text" id="medium-input" name="customer_phone" /> </p>
<p>
<label>Address Line 1</label>
<input class="text-input medium-input" type="text" id="medium-input" name="customer_address" />
</p>

<p>
<label>Address Line 2</label>
<input class="text-input medium-input" type="text" id="medium-input" name="customer_address1" />
</p>

<p>
<label>Town</label>
<select name="customer_city">
<option value="">Please select town</option>
<option value="Worthing">Worthing</option>
<option value="Lancing">Lancing</option>
<option value="Shoreham">Shoreham</option>
<option value="Steyning">Steyning</option>
<option value="Storrington">Storrington</option>
<option value="Ashington">Ashington</option>
<option value="Pulborough">Pulborough</option>
<option value="Littlehampton">Littlehampton</option>
<option value="Arundel">Arundel</option>
<option value="Brighton">Brighton</option>
<option value="Hove">Hove</option>
<option value="Southwick">Southwick</option>
<option value="Portslade">Portslade</option>
<option value="Henfield">Henfield</option>
</select>
<i>A Town must be specified for a customer</i>
</p>

<p>
<label>County</label>
<input class="text-input medium-input" type="text" id="medium-input3" name="customer_county" />
</p>

<p>
<label>PostCode</label>
<input class="text-input small-input" type="text" id="small-input" name="customer_zip" /> </p>

<p>
<label>Appliance Make</label>
<input class="text-input medium-input" type="text" id="medium-input" name="appliance_make" /> </p>
<p>
<label>Appliance Model</label>
<input class="text-input medium-input" type="text" id="medium-input" name="appliance_model" /> </p>
<p>
<label>Appliance Serial</label>
<input class="text-input medium-input" type="text" id="medium-input" name="appliance_serial" /> </p>
<p>
<label>Appliance Fault</label>
<input class="text-input medium-input" type="text" id="medium-input" name="appliance_fault" /> </p>
<p>
<label>How did they hear about us?</label>
<i><strong>Note:</strong> You must select at least one of the following</i><br />
<input type="checkbox" name="hear[]" value="0"> Internet<br />
<input type="checkbox" name="hear[]" value="1"> Yellow pages<br />
<input type="checkbox" name="hear[]" value="2"> Van<br />
<input type="checkbox" name="hear[]" value="3"> Letting agent<br />
<input type="checkbox" name="hear[]" value="4"> Repeat customer<br />
<input type="checkbox" name="hear[]" value="5"> Recommendation<br />
<input type="checkbox" name="hear[]" value="6"> Other<br />
</p>
<p>
<label>Notes</label>
<input class="text-input medium-input" type="text" id="medium-input" name="customer_notes" /> </p>
<p>
<input class="button" type="submit" value="Add Booking" />
</p>

</fieldset>

<div class="clear"></div><!-- End .clear -->

</form>

</div> <!-- End #tab2 -->

</div> <!-- End .content-box-content -->

</div> <!-- End .content-box -->

<?php include_once("footer.php");?><!-- End #footer -->

</div> <!-- End #main-content -->

</div>
</body>

</html>

jarv
10-18-2011, 12:47 PM
can anyone help me here?

Philip M
10-18-2011, 01:11 PM
Use this example:-


<form name = "myform">
RED <input type = "checkbox" name = "box" value = "red">
BLUE <input type = "checkbox" name = "box" value = "blue">
GREEN <input type = "checkbox" name = "box" value = "green">
<br><br>
<input type = "button" value = "Boxes Checked?" onclick = "CheckBoxes()"
</form>

<script type = "text/javascript">

function CheckBoxes(){
var bool = false;
var count = 0;
for (var i=0;i<document.myform.box.length;i++) {
if (document.myform.box[i].checked) {
bool = true;
count++;
}
}
alert((bool)?"You've checked at least one box.":"You haven't checked any boxes!");
alert ("You have checked " + count + " boxes")
}
</script>

it helps if you show only the relevant code.


Once a powerful king went to see an old hermit who lived in a bird's nest in the top of a tree, "What is the most important Buddhist teaching?"
The hermit answered, "Do no evil, do only good. Purify your heart." The king had expected to hear a very long explanation. He protested, "But even a five-year old child can understand that!" "Yes," replied the wise sage, "but even an 80-year-old man cannot do it."

jarv
10-30-2011, 08:26 PM
I still can't get this page to validate my checkboxes?!

here is my code



<?php
session_start();
include_once("config.php");
if (!isset($_SESSION['rsUser'])) {
$msg = "Username and/or Password incorrect!";
header('Location: index.php?msg='.$msg.'');
}
?>



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Affordable Appliance Repairs Admin - Edit Booking Date/Time</title>

<!-- CSS -->

<!-- Reset Stylesheet -->
<link rel="stylesheet" href="resources/css/reset.css" type="text/css" media="screen" />

<!-- Main Stylesheet -->
<link rel="stylesheet" href="resources/css/style.css" type="text/css" media="screen" />

<!-- Invalid Stylesheet. This makes stuff look pretty. Remove it if you want the CSS completely valid -->
<link rel="stylesheet" href="resources/css/invalid.css" type="text/css" media="screen" />

<!-- Colour Schemes

Default colour scheme is green. Uncomment prefered stylesheet to use it.

<link rel="stylesheet" href="resources/css/blue.css" type="text/css" media="screen" />

<link rel="stylesheet" href="resources/css/red.css" type="text/css" media="screen" />

-->

<!-- Internet Explorer Fixes Stylesheet -->

<!--[if lte IE 7]>
<link rel="stylesheet" href="resources/css/ie.css" type="text/css" media="screen" />
<![endif]-->
<link rel="stylesheet" href="../thickbox.css" type="text/css" media="screen" />
<!-- Javascripts -->

<!-- jQuery -->

<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("fieldset input[type=text]").focus(function(){
$(this).parent().find(".input-notification").css("visibility", "visible");
}).blur(function(){
$(this).parent().find(".input-notification").css("visibility", "hidden");
});
});
</script>
<!-- jQuery Configuration -->
<script type="text/javascript" src="resources/scripts/simpla.jquery.configuration.js"></script>

<!-- Facebox jQuery Plugin -->
<script type="text/javascript" src="resources/scripts/facebox.js"></script>

<!-- jQuery WYSIWYG Plugin -->
<script type="text/javascript" src="resources/scripts/jquery.wysiwyg.js"></script>
<!-- jQuery -->

<script type="text/javascript" src="http://www.affordableappliancerepairs.co.uk/bookings/app/web/js/admin-core.js"></script>
<script type="text/javascript" src="http://www.affordableappliancerepairs.co.uk/bookings/core/libs/jquery/ui/js/jquery.ui.core.min.js"></script>
<script type="text/javascript" src="http://www.affordableappliancerepairs.co.uk/bookings/core/libs/jquery/ui/js/jquery.ui.widget.min.js"></script>
<script type="text/javascript" src="http://www.affordableappliancerepairs.co.uk/bookings/core/libs/jquery/ui/js/jquery.ui.tabs.min.js"></script>
<script type="text/javascript" src="http://www.affordableappliancerepairs.co.uk/bookings/core/libs/jquery/ui/js/jquery.ui.button.min.js"></script>
<script type="text/javascript" src="http://www.affordableappliancerepairs.co.uk/bookings/core/libs/jquery/ui/js/jquery.ui.position.min.js"></script>
<script type="text/javascript" src="http://www.affordableappliancerepairs.co.uk/bookings/core/libs/jquery/ui/js/jquery.ui.dialog.min.js"></script>
<script type="text/javascript" src="http://www.affordableappliancerepairs.co.uk/bookings/core/libs/jquery/ui/js/jquery.effects.core.min.js"></script>
<script type="text/javascript" src="http://www.affordableappliancerepairs.co.uk/bookings/core/libs/jquery/ui/js/jquery.ui.datepicker.min.js"></script>
<script type="text/javascript" src="http://www.affordableappliancerepairs.co.uk/bookings/core/libs/jquery/plugins/validate/js/jquery.validate.min.js"></script>
<script type="text/javascript" src="../scripts/thickbox.js"></script>
<!-- Internet Explorer .png-fix -->

<!--[if IE 6]>
<script type="text/javascript" src="resources/scripts/DD_belatedPNG_0.0.7a.js"></script>
<script type="text/javascript">
DD_belatedPNG.fix('.png_bg, img, li');
</script>
<![endif]-->



<!-- Reset Stylesheet -->
<link rel="stylesheet" href="resources/css/reset.css" type="text/css" media="screen" />

<!-- Main Stylesheet -->
<link rel="stylesheet" href="resources/css/style.css" type="text/css" media="screen" />
<link rel="stylesheet" href="resources/css/blue.css" type="text/css" media="screen" />
<link type="text/css" rel="stylesheet" href="http://www.affordableappliancerepairs.co.uk/bookings/core/libs/jquery/ui/css/smoothness/jquery.ui.core.css" />
<link type="text/css" rel="stylesheet" href="http://www.affordableappliancerepairs.co.uk/bookings/core/libs/jquery/ui/css/smoothness/jquery.ui.theme.css" />
<link type="text/css" rel="stylesheet" href="http://www.affordableappliancerepairs.co.uk/bookings/core/libs/jquery/ui/css/smoothness/jquery.ui.tabs.css" />

<link type="text/css" rel="stylesheet" href="http://www.affordableappliancerepairs.co.uk/bookings/index.php?controller=AdminCalendars&amp;action=css&amp;cid=1" />
<link type="text/css" rel="stylesheet" href="http://www.affordableappliancerepairs.co.uk/bookings/core/libs/jquery/ui/css/smoothness/jquery.ui.button.css" />
<link type="text/css" rel="stylesheet" href="http://www.affordableappliancerepairs.co.uk/bookings/core/libs/jquery/ui/css/smoothness/jquery.ui.dialog.css" />
<link type="text/css" rel="stylesheet" href="http://www.affordableappliancerepairs.co.uk/bookings/core/libs/jquery/ui/css/smoothness/jquery.ui.datepicker.css" />


<script>
$(function() {
$( "#datepicker" ).datepicker();
});

</script>
<script language="javascript" type="text/javascript">

//Browser Support Code

function datecheckFunction(){
var datecheckRequest; // The variable that makes Ajax possible!

try{
// Opera 8.0+, Firefox, Safari
datecheckRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
datecheckRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
datecheckRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
// Create a function that will receive data sent from the server
datecheckRequest.onreadystatechange = function(){
if(datecheckRequest.readyState == 4){
var ajaxDisplay = document.getElementById('ajaxDiv');
ajaxDisplay.innerHTML = datecheckRequest.responseText;
}
}
var datepicker = document.getElementById('datepicker').value;

var queryString = "?datepicker=" + datepicker+'&r='+Math.random();
//Add the following line
datecheckRequest.open("GET", "http://www.affordableappliancerepairs.co.uk/admin/checkdate.php" + queryString, true);

datecheckRequest.send(null);
}
</script>







<script type = "text/javascript">

function CheckBoxes(){
var bool = false;
var count = 0;
for (var i=0;i<document.f1.box.length;i++) {
if (document.f1.Times[i].checked) {
bool = true;
count++;
}
}
alert((bool)?"You've checked at least one box.":"You haven't checked any boxes!");
alert ("You have checked " + count + " boxes")
}
</script>



</head>

<body><div id="body-wrapper"> <!-- Wrapper for the radial gradient background -->

<?
$menuitem=4;
$submenuitem=8;
include("menu.php");
?>

<div id="main-content"> <!-- Main Content Section with everything -->

<noscript> <!-- Show a notification if the user has disabled javascript -->
<div class="notification error png_bg">
<div>
Javascript is disabled or is not supported by your browser. Please <a href="http://browsehappy.com/" title="Upgrade to a better browser">upgrade</a> your browser or <a href="http://www.google.com/support/bin/answer.py?answer=23852" title="Enable Javascript in your browser">enable</a> Javascript to navigate the interface properly.
</div>
</div>
</noscript>

<!-- Page Head -->
<?php include_once("welcome.php");?>

<div class="clear"></div> <!-- End .clear -->

<div class="content-box"><!-- Start Content Box -->

<div class="content-box-header">

<h3>Add Booking</h3>

<div class="clear"></div>

</div> <!-- End .content-box-header -->

<div class="content-box-content">

<div class="tab-content default-tab" id="tab1">

<form onsubmit="return checkCheckBoxes();" action="add-booking-script.php" name="f1" method="post">

<fieldset> <!-- Set class to "column-left" or "column-right" on fieldsets to divide the form into columns -->
<input class="text-input medium-input" type="hidden" id="medium-input" name="created" value="<?php echo date("Y-m-d"); ?>" /><input class="text-input medium-input" type="hidden" id="medium-input" name="booking_status" value="new" />
<p>
<label>Date</label>
<input class="text-input small-input" type="text" id="datepicker" onChange="datecheckFunction();" name="booking_date" value="<?php echo date("d-m-Y"); ?>" />
<i>Please click the date to show calendar and then select a date from the calendar</i>
</p>
<p><div id="ajaxDiv"></div></p>
<p>
<label>Booking time slots</label>
<i>Please select only 1 time slot,<br /> if the customer is available all day then check that box too<br /><br /></i>
<input type="checkbox" name="Times[]" value="07:00:00"> 07:00 - 10:00<br />
<input type="checkbox" name="Times[]" value="10:00:00"> 10:00 - 13:00<br />
<input type="checkbox" name="Times[]" value="13:00:00"> 13:00 - 16:00<br />
<input type="checkbox" name="Times[]" value="16:00:00"> 16:00 - 19:00<br />
<i><strong>Please note:</strong> these booking time slots above are not limited.</i>
</p>
<p>
<input type="checkbox" name="all_day" value="1"> Available All Day<br />
</p>
<p>
<label>Customer Name</label>
<input class="text-input medium-input" type="text" id="medium-input2" name="customer_name" />
</p>

<p>
<label>Email</label>
<input class="text-input medium-input" type="text" id="medium-input" name="customer_email" /> </p>

<p>
<label>Telephone</label>
<input class="text-input medium-input" type="text" id="medium-input" name="customer_phone" /> </p>
<p>
<label>Address Line 1</label>
<input class="text-input medium-input" type="text" id="medium-input" name="customer_address" />
</p>

<p>
<label>Address Line 2</label>
<input class="text-input medium-input" type="text" id="medium-input" name="customer_address1" />
</p>

<p>
<label>Town</label>
<select name="customer_city">
<option value="">Please select town</option>
<option value="Worthing">Worthing</option>
<option value="Lancing">Lancing</option>
<option value="Shoreham">Shoreham</option>
<option value="Steyning">Steyning</option>
<option value="Storrington">Storrington</option>
<option value="Ashington">Ashington</option>
<option value="Pulborough">Pulborough</option>
<option value="Littlehampton">Littlehampton</option>
<option value="Arundel">Arundel</option>
<option value="Brighton">Brighton</option>
<option value="Hove">Hove</option>
<option value="Southwick">Southwick</option>
<option value="Portslade">Portslade</option>
<option value="Henfield">Henfield</option>
</select>
<i>A Town must be specified for a customer</i>
</p>

<p>
<label>County</label>
<input class="text-input medium-input" type="text" id="medium-input3" name="customer_county" />
</p>

<p>
<label>PostCode</label>
<input class="text-input small-input" type="text" id="small-input" name="customer_zip" /> </p>

<p>
<label>Appliance Make</label>
<input class="text-input medium-input" type="text" id="medium-input" name="appliance_make" /> </p>
<p>
<label>Appliance Model</label>
<input class="text-input medium-input" type="text" id="medium-input" name="appliance_model" /> </p>
<p>
<label>Appliance Serial</label>
<input class="text-input medium-input" type="text" id="medium-input" name="appliance_serial" /> </p>
<p>
<label>Appliance Fault</label>
<input class="text-input medium-input" type="text" id="medium-input" name="appliance_fault" /> </p>
<p>
<label>How did they hear about us?</label>
<i><strong>Note:</strong> You must select at least one of the following</i><br />
<input type="checkbox" name="hear[]" value="0"> Internet<br />
<input type="checkbox" name="hear[]" value="1"> Yellow pages<br />
<input type="checkbox" name="hear[]" value="2"> Van<br />
<input type="checkbox" name="hear[]" value="3"> Letting agent<br />
<input type="checkbox" name="hear[]" value="4"> Repeat customer<br />
<input type="checkbox" name="hear[]" value="5"> Recommendation<br />
<input type="checkbox" name="hear[]" value="6"> Other<br />
</p>
<p>
<label>Notes</label>
<input class="text-input medium-input" type="text" id="medium-input" name="customer_notes" /> </p>
<p>
<input class="button" type="submit" value="Add Booking" onclick = "CheckBoxes()" />
</p>

</fieldset>

<div class="clear"></div><!-- End .clear -->

</form>

</div> <!-- End #tab2 -->

</div> <!-- End .content-box-content -->

</div> <!-- End .content-box -->

<?php include_once("footer.php");?><!-- End #footer -->

</div> <!-- End #main-content -->

</div>
</body>

</html>

Old Pedant
10-30-2011, 10:39 PM
The problem is that the names of your checkboxes are *NOT* Times as you used it in this code;


if (document.f1.Times[i].checked) {

And the names are *CERTAINLY not box as you used it in THIS code:


for (var i=0;i<document.f1.box.length;i++) {

And why you thought that using two different names would ever work I haven't the foggiest.

Anyway, because you are using PHP and are forced into PHP's idiotic naming convention for multiple-name fields, the name of each checkbox truly *IS* Times[]

And the problem with *that* is that JavaScript can *NOT* use that name *AS A NAME*. Because names in JavaScript can't contain special characters such as [ or ]

But it makes no sense to name those boxes Times[] in the first place!

If you only allow the user to check *one* of them, then your PHP code DOES NOT NEED the [] on the end!!!!

By far the most sensible thing to do here would be to convert these to radio buttons:


<input type="radio" name="Times" value="07:00:00"> 07:00 - 10:00<br />

Now the user *can't* choose more than one of them.

***********

But I'm going to humor you and give you an answer that will work no matter what name you will use.

So:


function CheckBoxes()
{
var cbs = document.f1["Times[]"]; // change the name in quotes to match the name you end up with

var count = 0;
for ( var c = 0; c < cbs.length; ++cb )
{
if ( cbs[c].checked ) ++count;
}
if ( count == 1 ) return true;
if ( count > 1 ) alert("You haven't checked any box to indicate the booking time slot!");
else alert("You can only check one box to indicate one booking time slot.");
return false;
}

Old Pedant
10-30-2011, 10:39 PM
And next time, instead of dumping your entire page into the forum, try to only dump the *relevant* parts. Please?

jarv
10-31-2011, 05:33 PM
thanks, I tried your code, it didn't work. I need them to be checkboxes as further down I need the user to select more than one option in the WHERE YOU HEARD OF US section

in the meantime, I'll just convert them all to radio buttons?!

jarv
10-31-2011, 05:38 PM
you were missing an 's' at the end of the line



for ( var c = 0; c < cbs.length; ++cb )


ok, so that sort of works, good... my form still submits though?!

Old Pedant
10-31-2011, 08:03 PM
No, the "s" was there. The "b" is bogus:


for ( var c = 0; c < cbs.length; ++cb )

Sorry! Just a typo. Should obviously be


for ( var c = 0; c < cbs.length; ++c )

No idea why the form would still submit after fixing that.

Can you show it to us live someplace?

jarv
11-01-2011, 04:52 PM
ok I got it working, now I need to add another part of validation for my other group of checkbox arrays hear[]


Also, if I select more than one time it says:

You haven't checked any box to indicate the booking time slot!

and should say:

You can only check one box to indicate one booking time slot.

Old Pedant
11-01-2011, 07:55 PM
So you have a mistake. The problem is that on line 737 you have "x" where you should have "X".

No? I guessed wrong? Darn. Oh, well. That's the best I can do without seeing the code.

jarv
11-02-2011, 12:01 PM
function CheckBoxes()
{
var cbs = document.f1["Times[]"]; // change the name in quotes to match the name you end up with

var count = 0;
for ( var c = 0; c < cbs.length; ++c )
{
if ( cbs[c].checked ) ++count;
}
if ( count == 1 ) return true;
if ( count > 1 ) alert("You haven't checked any box to indicate the booking time slot!");
else alert("You can only check one box to indicate one booking time slot.");
return false;

}


I also need to check my other checkboxes hear[] at least 1 is checked?!

Old Pedant
11-03-2011, 01:04 AM
SO either duplicate that code or change the function to accept the field name.

The latter is the more logical route, so...



function CheckBoxes( fieldName, purpose )
{
var cbs = document.f1[ fieldName ];
var count = 0;
for ( var c = 0; c < cbs.length; ++c )
{
if ( cbs[c].checked ) ++count;
}
if ( count == 1 ) return true;
if ( count > 1 ) alert("You haven't checked any box to indicate the " + purpose );
else alert("You can only check one box to indicate one " + purpose );
return false;

}
...
function validateForm( )
{
... other validation ...

if ( ! CheckBoxes("Times[]", "booking time slot") ) return false;
if ( ! CheckBoxes("Hear[]", "way you heard about us") ) return false;

... other validation ...

}

Old Pedant
11-03-2011, 01:05 AM
And what I meant was you needed to show us your *FULL* code. Not just echo my own function back at me.

So my answer above is still just a guess, since I can't see your *FULL* code.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum