Click here to Skip to main content
15,884,353 members
Search within:


Validation / Time Limit Before Certaintimeorder / Online Ordering Site
Please Sign up or sign in to vote.
1.00/5 (1 vote)
Hello all,
I am currently working on a website from scratch so you can place a order online for example like ordering a pizza online from dominoes or some other restaurant or food place but I am doing it for this special restaurant.
Right now I am setting up the online ordering of a sub.
I have it so if you select bread then you should select a filling so your sub sandwich isn’t plain. I have a label working so it pops up when the order button is clicked. I believe I would want it so the button would be disabled if the fields are incorrect? I am widely open to any suggestions or ideas in which you believe I could improve my site.
The next part I am working on is that you need to order a sandwich before 10 am of the current day otherwise it will display a message saying you will not be able to receive that sandwich of the current day until the next day. I plan on bringing up a cancel option window in case the user doesn’t want the sub for next day so they can cancel their order. I am not sure how exactly I should do this part yet.
Right now I just have a date object that is receiving the exact current time and I will compare it with another date object of 10am of that current day and do some if and else statements to decide what to do.
Again I am widely open to any ideas or suggestions for other possibilities.

HTML
<div>
		<h4>1). Select Bread</h4>
		<select id="selectBread">
		</select>
		<!-- Select spread Dropdownlist -->
		<h4>2). Select Spread</h4>
		<select id="selectSpread">
		</select>
        <div id="spreadValid" style="color:red; font-weight:bold; display:inline;"></div>
		<!-- Select extra spread-->
		<h4>3). Extra Spreads(+$0.80)</h4>
		<select id="selectExtraSpread">			
		</select>
        <div id="extraSpreadValid" style="color:red; font-weight:bold; display:inline;"></div>
	</div>
	<!-- Select fillings -->
	<form method="post" id="selectFillings">
		<fieldset id="fillings">
			<legend><h4>4). Choose up to two fillings (Extra + $1.20)</h4></legend>
            <div id="fillingValid" style="color:red; font-weight:bold; display:inline;"></div>
		</fieldset>
	</form>
<button id="addToOrder" type="button">Add to order</button>


JavaScript
function getBread() {
	  var deferred = new $.Deferred();
	  deferred.resolve([ 
	    { value: 'Wheat', text: 'Wheat' },
		{ value: 'Rye', text: 'Rye' },
		{ value: 'French', text: 'French' },
        { value: 'Wrap', text: 'Wrap' }
      ]);
	  return(deferred);
	}
    function initializeSelect(elementName, dataService) {
	  var $element = $(elementName);
	  $.when(dataService()).then(function(data) {
		$('<option value=""></option>').appendTo($element);
		for(var itemIndex in data) {
		  $('<option value="'+data[itemIndex].value+'">'+data[itemIndex].text+'</option>').appendTo($element);
		}
	  });
    }
		if (validateOrderandLunchbag(fillingCount)) {
            AddLunchBagToMyOrder(lunchBag);
		}
	function validateOrderandLunchbag(numberOfFillings)
	{
	    var isValid = true;
	    var $addToOrder = $('#addToOrder');

	    var breadValue = $('#selectBread').val();
	    var spreadValue = $('#selectSpread').val();
	    //IF BREAD IS SELECTED THEN RECOMMEND SPREAD BUT DO NOT STOP THE FUNCTION
	    if (breadValue != "" && spreadValue == "") {
	        var message = "You are allowed to select a spread, If you want.";
	        document.getElementById("spreadValid").innerHTML = message;
	        document.getElementById("spreadValidbtn").innerHTML = message;
	        //$('spreadValid').innerHTML = message;
	    } else {
	        document.getElementById("spreadValid").innerHTML = "";
	        document.getElementById("spreadValidbtn").innerHTML = "";
	    }
	    //check the number of fillings if none selected then stop function
	    if (breadValue != "" && numberOfFillings == 0) {
	        var fillingMessage = "You should want something on your sub so it isn't plain.";
	        document.getElementById("fillingValid").innerHTML = fillingMessage;
	        document.getElementById("fillingValidbtn").innerHTML = fillingMessage;
	        isValid = false;
	       // $addToOrder.set_enabled(false);
	    } else {
	        document.getElementById("fillingValid").innerHTML = "";
	        document.getElementById("fillingValidbtn").innerHTML = "";
	       // $addToOrder.set_enabled(true);
	    }
	    return isValid;
	}
	function determineCutoffTime() {
	    console.log("cut off time function");
	    var msg = "To recieve an order the current day it must be played before 10 a.m. of that day.";
	    //var timeNow = new Date($.now());
	    //var dd = new Date.now();
	   // console.log(dd);
	    //get current time and date if before time accept otherwise show message and allow cancel

	    //javascript way
	    var jsDate = new Date();
	    var jsTime = jsDate.getHours() + ":" + jsDate.getMinutes() + ":" + jsDate.getSeconds();
	    console.log(jsTime);

	}
Posted
Updated 17-Nov-14 15:29pm
v2
Add a Solution
Comments
Sergey Alexandrovich Kryukov 17-Nov-14 21:29pm    
Ideas for what? You did not formulate any problems; and this is not a question. "I am not sure how..." is not informative.
Well, one idea would be: stop hard-coding things as $0.80 and $1.20, which looks especially ridiculous and suggests that you won't be able even to support your solution effectively.
Remember "Don't Repeat Yourself" principle. The code is already too much of ad hoc to discuss it seriously. Anyway, you need to formulate your questions.
—SA
TheBigBearNow 17-Nov-14 21:47pm    
I am trying to do validation so the button wont go through if information is invalid
data is going to be imported from a list once i get that far
and my main part i am working on now is i am trying to use javascript/jquery to get the current date and set a time of 10 am of the current day to compare them and see if it is before or after 10 am then i can show a cancel page or continue with the order i have been trying to work on this for awhile and did not figure it out yet
here are some things i have tried
// var jqueryTime = $.datepicker.formatDate('mm/dd/yy HH:mm:dd');
// console.log(jqueryTime);
var jtime = new Date().getTime();
console.log(jtime);

//alert($.datepicker.formatDate('yy/mm/dd', new Date()));
console.log("date now");
//console.log($.now());
//var myTime = $.now();

// console.log(myTime);

//console.log("dateNow()");
//console.log(dateNow());
//another try this time i will set date/time to 10 am
// var buyingTime = new date();
// buyingTime.setHours(10, 0, 0);
// console.log(buyingTime);
// console.log(new Date.today().toString());

console.log('javascript');
//javascript way
var jsDate = new Date();
var seconds = jsDate.getSeconds();
var minutes = jsDate.getMinutes();
var hours = jsDate.getHours();
var day = jsDate.getDate();
var month = jsDate.getMonth() + 1;
var year = jsDate.getYear();
//var jsTime = jsDate.getHours() + ":" + jsDate.getMinutes() + ":" + jsDate.getSeconds();//getMonth() getDate() getFullYear()
//var jsTime = hours:minutes:seconds month/day/year;
console.log(hours+":"+minutes+":"+seconds+" "+ month+"/"+day+"/"+year);
Kornfeld Eliyahu Peter 18-Nov-14 2:09am    
Are you try validate client side so invalid data will not be posted to server?
Try this: http://jqueryvalidation.org/
TheBigBearNow 18-Nov-14 13:14pm    
This project is going all client side so there will be no PHP involved. I suggested the same to my client saying about 10 A.M. ordering online is absurd but she agreed and continued with her choice..

Here is some things i have tried for that so far. right now i have the current time Am or Pm and i have to set a default time of 10 am and compare them possibly with an if statement? right now when i try to set the time to 10 am it is in milliseconds with some HUGE number..

[code]
function determineCutoffTime() {
console.log("cut off time function");
var msg = "To recieve an order the current day it must be played before 10 a.m. of that day.";
//var timeNow = new Date($.now());
//var dd = new Date.now();
// console.log(dd);
//get current time and date if before time accept otherwise show message and allow cancel

// jquery take 2
// var jqueryTime = $.datepicker.formatDate('mm/dd/yy HH:mm:dd');
// console.log(jqueryTime);
// var jtime = new Date().getTime();
//console.log(jtime);

//alert($.datepicker.formatDate('yy/mm/dd', new Date()));
// console.log("date now");
//console.log($.now());
//var myTime = $.now();
// console.log(myTime);
//console.log("dateNow()");
//console.log(dateNow());
//another try this time i will set date/time to 10 am
// var buyingTime = new date();
// buyingTime.setHours(10, 0, 0);
// console.log(buyingTime);
// console.log(new Date.today().toString());

console.log('javascript');
//javascript way
var jsDate = new Date();
var seconds = jsDate.getSeconds();
var minutes = jsDate.getMinutes();
var hours = jsDate.getHours();
var day = jsDate.getDate();
var month = jsDate.getMonth() + 1;
var year = jsDate.getYear();
//var jsTime = jsDate.getHours() + ":" + jsDate.getMinutes() + ":" + jsDate.getSeconds();//getMonth() getDate() getFullYear()
//var jsTime = hours:minutes:seconds month/day/year;
// console.log(hours+":"+minutes+":"+seconds+" "+ month+"/"+day+"/"+year);

//Get current Date and Time
var today = new Date();
var dd = today.getDate(); var mm = today.getMonth() + 1; var yyyy = today.getFullYear();
var hh = today.getHours(); var min = today.getMinutes(); var sec = today.getSeconds();
if (dd < 10) {
dd = '0' + dd;
}
if (mm < 10) {
mm = '0' + mm;
}
if (min < 10) {
min = '0' + min;
}
today = hh + ":" + min + ":" + sec + " " + mm + "/" + dd + "/" + yyyy;
console.log(today);

/////////////////////////////////////////////
var now = new Date();
var nowhrs = now.getHours(); var nowmins = now.getMinutes(); var nowsecs = now.getSeconds();
var determine = (nowhrs >= 12) ? " P.M." : " A.M.";

if (nowhrs == 0) nowhrs = 12;
var timeValue = "" + ((nowhrs > 12) ? nowhrs - 12 : nowhrs);
timeValue += ((nowmins < 10) ? ":0"+nowmins : ":" + nowmins);
timeValue += ((nowsecs < 10) ? ":0"+nowsecs : ":" + nowsecs);
//timeValue += (nowhrs >= 12) ? " P.M." : " A.M.";
timeValue += determine;
console.log(timeValue);
/////////////////////////////////
//cutoff time
var cutoffTime = new Date();
var cutoffDay = cutoffTime.getDate();
var cutoffMonth = cutoffTime.getMonth() + 1;
var cutoffYear = cutoffTime.getFullYear();
var cutoffHours = cutoffTime.setHours(10); var cutoffMins = cutoffTime.setMinutes(00); var cutoffSecs = cutoffTime.setSeconds(00); var cutoffDetermine = " A.M.";
var cutoffTimeValue = cutoffHours + ":" + cutoffMins + ":" + cutoffSecs + cutoffDetermine;
console.log(cutoffTimeValue);
}
[/code]

Also for validation to possibly stop the button from being clicked if there is no filling on the sub sandwich so you cant order a sub with just bread?
I made a validation method and i wanted to return something like onClientClick but i believe that may not be javascript a

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month
Related Questions
Different order and results each time when using namedparameterjdbctemplate for query includes JOIN, LIMIT and OFFSET
Limit MSSQL results dynamically
Limited subway surfer
Small site / online database
Time validations in C#
online exam
How to fix rng limit
How to deal with time limit exceeded in this case?
Sql server concurrency issue while transaction amount limit validation
Incorrect syntax near 'LIMIT'.

Advertise
Privacy
Cookies
Terms of Use
Last Updated 17 Nov 2014
Layout: fixed | fluid
Copyright © CodeProject, 1999-2024
All Rights Reserved.

Web04 2.8:2024-04-02:1

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900