Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 20
  1. #1
    Banned
    Join Date
    Mar 2007
    Posts
    1,523
    Thanks
    116
    Thanked 0 Times in 0 Posts

    Question trying to validate checkboxes are checked

    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...


    Code:
    <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>

  • #2
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    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:

    Code:
    <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>
    Last edited by DanInMa; 09-15-2011 at 03:33 PM.

  • #3
    Banned
    Join Date
    Mar 2007
    Posts
    1,523
    Thanks
    116
    Thanked 0 Times in 0 Posts

    Question

    ok thanks,

    I have now changed my javascript to the following:

    Code:
    <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

  • #4
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    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

  • #5
    Banned
    Join Date
    Mar 2007
    Posts
    1,523
    Thanks
    116
    Thanked 0 Times in 0 Posts
    loop?

    I have to leave them as checkboxes!

  • #6
    New to the CF scene
    Join Date
    Sep 2011
    Location
    Pacific NW
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Try this:

    Code:
    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;
    }
    Last edited by StHelensBull; 09-16-2011 at 09:03 PM.

  • #7
    Banned
    Join Date
    Mar 2007
    Posts
    1,523
    Thanks
    116
    Thanked 0 Times in 0 Posts
    aww, it still not working?!

    here's my page

    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 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>

  • #8
    Banned
    Join Date
    Mar 2007
    Posts
    1,523
    Thanks
    116
    Thanked 0 Times in 0 Posts
    can anyone help me here?

  • #9
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,017
    Thanks
    203
    Thanked 2,538 Times in 2,516 Posts
    Use this example:-

    Code:
    <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."

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #10
    Banned
    Join Date
    Mar 2007
    Posts
    1,523
    Thanks
    116
    Thanked 0 Times in 0 Posts

    Exclamation

    I still can't get this page to validate my checkboxes?!

    here is my code
    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>

  • #11
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,553
    Thanks
    78
    Thanked 4,382 Times in 4,347 Posts
    The problem is that the names of your checkboxes are *NOT* Times as you used it in this code;
    Code:
         if (document.f1.Times[i].checked)		{
    And the names are *CERTAINLY not box as you used it in THIS code:
    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:
    Code:
    <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:
    Code:
    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;
    }
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #12
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,553
    Thanks
    78
    Thanked 4,382 Times in 4,347 Posts
    And next time, instead of dumping your entire page into the forum, try to only dump the *relevant* parts. Please?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #13
    Banned
    Join Date
    Mar 2007
    Posts
    1,523
    Thanks
    116
    Thanked 0 Times in 0 Posts
    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?!

  • #14
    Banned
    Join Date
    Mar 2007
    Posts
    1,523
    Thanks
    116
    Thanked 0 Times in 0 Posts
    you were missing an 's' at the end of the line

    Code:
     for ( var c = 0; c < cbs.length; ++cb )
    ok, so that sort of works, good... my form still submits though?!

  • #15
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,553
    Thanks
    78
    Thanked 4,382 Times in 4,347 Posts
    No, the "s" was there. The "b" is bogus:
    Code:
        for ( var c = 0; c < cbs.length; ++cb )
    Sorry! Just a typo. Should obviously be
    Code:
        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?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  
    Page 1 of 2 12 LastLast

    LinkBacks (?)


    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •