• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 351
  • Last Modified:

Check date entered on a web page against a list of dates in a text file

I need a simple solution to a problem

I want a user to be able to enter a date on a web page.

I then want to be able to compare the date entered by the user against a list of dates stored in a text file on the server (max of 50 or so dates)

If the date matches a date in the list then I want to be able to print "date already taken" next to the date input box
If there is no match of the date entered with a date in the list then I want to display "date available" next to the input.

I want a simple solution to this - I'm thinking of JavaScript to read a simple text file containing the dates, one date per line. I can easily maintain this file manually.  

I don't want a SQL solution (far too complex for me to implement and maintain



0
KCTS
Asked:
KCTS
  • 10
  • 7
  • 5
2 Solutions
 
Michel PlungjanIT ExpertCommented:
Make the date file a js file

//---- JS FILE
var datesTaken=[
"Oct 8, 2011",
"Oct 18, 2011",
"Oct 28, 2011",
"Nov 8, 2011"
]; // notice no comma after the last
// -- no need to change below this
var dateArray = [];
for (var i=0, n=datesTaken.length;i<n;i++) {
  dateArray[i]=Date.parse(datesTaken[i])
}
function isDateTaken(dateString) {
  var date = Date.parse(dateString);
  for (var i=0, n=dateArray.length;i<n;i++) {
    if (date === dateArray[i]) return true;
  }
  return false;
}

Open in new window


and in your web page have

alert(isDateTaken("Oct 18, 2011"))

Open in new window

0
 
ZvonkoSystems architectCommented:
Store that text file as an .js file that contains the array of the dates you maintain.
The script load that array and compares accordingly.
Enter the dates in this format: MM/DD/YYYY
That is the format that JavaScript understands without conversion.
For example if your text file has thsi line:

arrTakenDates=["09/13/2011","09/14/2011","09/15/2011"];

Then the script can crate JavaScript Date like this:

var theDate = new Date(arrTakenDates[0]);

You see?

0
 
ZvonkoSystems architectCommented:
Upps :-)
0
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
Michel PlungjanIT ExpertCommented:
:)
0
 
KCTSAuthor Commented:
Ideally I would like the dates in a separate file so it can be maintained easier and the dates are not obvious is someone does a 'view source'

Does the above code put the appropriate wording on the page ?
 
0
 
Michel PlungjanIT ExpertCommented:
My suggestion puts the dates and the function testing the input date into an external file. If you want more code, please show the form in question
0
 
Michel PlungjanIT ExpertCommented:
My suggestion puts the dates and the function testing the input date into an external file. If you want more code, please show the form in question
0
 
KCTSAuthor Commented:
@ OK - i'm with you now - I'll give it a try
0
 
KCTSAuthor Commented:
I'm not sure how I'm supposed to get this to work - I've attached the code for the form on which I want to use this (It was created with the EmailMe form builder).

There is a box into which the user is asked to enter a date (element_6)

when they have entered a date, then I want to show some text next to the box to show if the date is available or not


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Enquiry Form</title>
</head>

<body>




<link rel="stylesheet" type="text/css" href="http://www.emailmeform.com/builder/styles/dynamic.php?t=post" />
<link rel="stylesheet" type="text/css" href="http://www.emailmeform.com/builder/theme_css/ZB5qHSzTA0" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
if (typeof jQuery == 'undefined'){
    document.write(unescape("%3Cscript src='http://www.emailmeform.com/builder/js/jquery-1.4.4.min.js' type='text/javascript'%3E%3C/script%3E"));
}
</script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script type="text/javascript">
if (typeof $.ui == 'undefined'){
    document.write(unescape("%3Cscript src='http://www.emailmeform.com/builder/js/jquery-ui-1.7.2.custom.min.js' type='text/javascript'%3E%3C/script%3E"));
}
</script>
<script type="text/javascript" src="http://www.emailmeform.com/builder/js/dynamic.php?t=post&t2=0&use_CDN=true"></script>
<form id="emf-form" enctype="multipart/form-data" method="post" action="http://www.emailmeform.com/builder/form/ZB5qHSzTA0" name="emf-form">
  <table style="text-align:left;" cellpadding="2" cellspacing="0" border="0" bgcolor="#FFFFFF">
    <tr>
      <td style="" colspan="2">
        <font face="Verdana" size="2" color="#000000"><b style="font-size:20px;">Enquiry</b><br />
        <label style="font-size:15px;">Please give brief details of your enquiry, We will then get back to you to discuss and answer any questions you may have.<br /></label><br /></font>
      </td>
    </tr>
    <tr valign="top">
      <td id="td_element_label_0" align="left">
        <font face="Verdana" size="2" color="#000000"><b>Your Name</b></font>
      </td>
      <td id="td_element_field_0" style="">
        <input id="element_0" name="element_0" value="" size="50" class="validate[optional]" type="text" />
        <div style="padding-bottom:8px;color:#000000;"></div>
      </td>
    </tr>
    <tr valign="top">
      <td id="td_element_label_1" align="left">
        <font face="Verdana" size="2" color="#000000"><b>Your Email Address</b></font>
      </td>
      <td id="td_element_field_1" style="">
        <input id="element_1" name="element_1" class="validate[optional,custom[email]]" value="" size="60" type="text" style="width: 311px" />
        <div style="padding-bottom:8px;color:#000000;"></div>
      </td>
    </tr>
    <tr valign="top">
      <td id="td_element_label_2" align="left">
        <font face="Verdana" size="2" color="#000000"><b>Telephone</b></font>
      </td>
      <td id="td_element_field_2" style="">
        <input id="element_2" name="element_2" value="" size="30" class="validate[optional]" type="text" />
        <div style="padding-bottom:8px;color:#000000;"></div>
      </td>
    </tr>
    <tr valign="top">
      <td id="td_element_label_6" align="left">
        <font face="Verdana" size="2" color="#000000"><b>Date of Wedding/Event<br />
        (if known/applicable)</b></font>
      </td>
      <td id="td_element_field_6" style="">
        <input id="element_6" name="element_6" value="" size="34" class="validate[optional]" type="text" style="width: 113px" />
        <div style="padding-bottom:8px;color:#000000;"></div>
      </td>
    </tr>
    <tr>
      <td colspan="2" align="left">
        <input name="element_counts" value="8" type="hidden" /> <input name="embed" value="forms" type="hidden" /><input value="Send Enquiry" type="submit" />
      </td>
    </tr>
  </table>
</form><script type="text/javascript">
//<![CDATA[
var EMF_Safari_Captcha = (function(){
        this.isChrome = (/chrome/.test(navigator.userAgent.toLowerCase()));
        this.isSafari = !this.isChrome && (/safari/.test(navigator.userAgent.toLowerCase()));
        this.process_captcha = function(){
                EMF_jQuery('a#captcha_code_refresh').trigger('click');
                get_valid_captcha();
        }
        this.firstTimeSession = true;
        this.safari_submit_session_form = function(){
                if (this.firstTimeSession) {
                                this.firstTimeSession = false;
                                EMF_jQuery("#safari_sessionform").submit();
                                setTimeout('process_captcha()',2000);
                }
        }
        return this;
})();
EMF_jQuery(function(){
        EMF_jQuery("#emf-form").validationEngine({
                validationEventTriggers:"blur",
                scroll:true
        });




        EMF_jQuery("#emf-form ul li").mousedown(highlight_field_on_mousedown);
        EMF_jQuery("#emf-form ul li input, #emf-form ul li textarea, #emf-form ul li select").focus(highlight_field_on_focus);

        var form_obj=EMF_jQuery("#emf-container form");
        if(form_obj.length>0 && form_obj.attr('action').indexOf('#')==-1){
                form_obj.attr('action', form_obj.attr('action')+document.location.hash);
        }

});

EMF_jQuery(window).load(function(){
        var parent_url = decodeURIComponent(document.location.hash.replace(/^#/, ''));
        XD.postMessage(get_frame_height(), parent_url, parent);
});

//]]>
</script>



</body>

</html>

Open in new window

0
 
Michel PlungjanIT ExpertCommented:
I'll look in a few hours. 6am here now so I just got up.
0
 
Michel PlungjanIT ExpertCommented:
This is NOT simple to ADD - your emailmeform has its own validation and when I bind to the submit event, it seems the other validation is not happening.
0
 
Michel PlungjanIT ExpertCommented:
Here is the script as it would look on its own

DEMO HERE

<form onsubmit="return validate(this)">
    <input name="element_6" type="date" value="" />
    <input type="submit" />
</form>    
// This is in an external file
var datesTaken=[
"Oct 8, 2011",
"Oct 18, 2011",
"Oct 28, 2011",
"Nov 8, 2011"
]; // notice no comma after the last

// -- no need to change below this
var dateArray = [];
for (var i=0, n=datesTaken.length;i<n;i++) {
  dateArray[i]=Date.parse(datesTaken[i])
}
function isDateTaken(dateString) {
  var date = Date.parse(dateString);
  for (var i=0, n=dateArray.length;i<n;i++) {
    console.log(date+'\n'+dateArray[i]);
    if (date === dateArray[i]) return true;
  }
}
    
// -------- this could be inline ----
    function validate(theForm) {
       var date = new Date(theForm.element_6.value);
       if (isDateTaken(date)) {
         alert('Sorry, this date is not available');
         theForm.element_6.focus();
         return false;
       }
    }

Open in new window

0
 
ZvonkoSystems architectCommented:
Sorry to jump again in but I have finished a version bound to submit button and would like to show here but it does basically the same as upper one.
My idea was to name the takenDates file like this:
<script type="text/javascript" src="jquery-ui-42.max.js"></script>

In that file is the line as I posted in my first comment.

The submit button needs the onClick:
<input value="Send Enquiry" type="submit" onClick="return checkDate(this)" />

And here i´s the function called by onClick:
function checkDate(theBtn){
  var fldDate = theBtn.form.element_6;
  var theDate = fldDate.value.replace(/(^\s*|\s*$)/g,"");
  if(theDate==""){
    alert("Enter Date");
	fldDate.focus();
	return false;
  }
  for(var i=0;i<arrTakenDates.length;i++){
    if(arrTakenDates[i]==theDate){
	  alert("Date taken.\nPlease take anoter Date.");
	  fldDate.focus();
	  return false;
    }
  }
  return true;  
}

Open in new window

0
 
Michel PlungjanIT ExpertCommented:
Zvonko - why on the submit button?

Why not onSubmit?

And in this case we can actually not use any of them it seems
0
 
ZvonkoSystems architectCommented:
I did not test the onSubmit event handler because you stated that it yields a colusion. I did not check it. I checked only the onClick and that works.

Basicaly is my solely idea to name the dates file simelar to used jQuery files and so hide the source.
0
 
KCTSAuthor Commented:
Is there a way to have the message shown on the screen as soon as the date is entered ?
or if that not possible to have another button labelled check date (or similar).
I would like the user to know if the date is available BEFORE they submit the form.
0
 
KCTSAuthor Commented:
@mplungjan - I've had a look at your DEMO on ID: 36547618 and I think this could be made to work, however if its possible to implement a small change would be even better!

Would it be possible to have the date in the box in the UK standard DD/MM/YYYY format (it seems to be in the YYYY/MM/DD universal format at the moment.

0
 
KCTSAuthor Commented:
... and I'm still not sure how I can implement the check and as without submitting the form - can I just have a check date button and leave the current submit button as it is ?
0
 
Michel PlungjanIT ExpertCommented:
Why not show a calendar of available dates instead? Saves validating input and user frustration!
0
 
KCTSAuthor Commented:
I don't want to show a calendar as I don't want users to see how busy (or not) I am.

All I want to do is for the user to enter a date into a box and then have a message display if the date is taken or not -
It seemed like such a simple idea...
0
 
ZvonkoSystems architectCommented:
The function that you put into onSubmit event handler you can do also in the onChange event handler for the date input field or on a separate button for date checking.

But a simple convenient function doing the doWhatImean() procedure is still in development <|:-)
0
 
Michel PlungjanIT ExpertCommented:
Here is my final example, tested with your form

Note I moved all code to the head and while testing, I removed the action
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Enquiry Form</title>
<link rel="stylesheet" type="text/css" href="http://www.emailmeform.com/builder/styles/dynamic.php?t=post" />
<link rel="stylesheet" type="text/css" href="http://www.emailmeform.com/builder/theme_css/ZB5qHSzTA0" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
if (typeof jQuery == 'undefined'){
    document.write(unescape("%3Cscript src='http://www.emailmeform.com/builder/js/jquery-1.4.4.min.js' type='text/javascript'%3E%3C/script%3E"));
}
</script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script type="text/javascript">
if (typeof $.ui == 'undefined'){
    document.write(unescape("%3Cscript src='http://www.emailmeform.com/builder/js/jquery-ui-1.7.2.custom.min.js' type='text/javascript'%3E%3C/script%3E"));
}
</script>
<script type="text/javascript" src="http://www.emailmeform.com/builder/js/dynamic.php?t=post&t2=0&use_CDN=true"></script>

<script type="text/javascript">
// This could be in an external file
var datesTaken=[
"Oct 8, 2011",
"Oct 18, 2011",
"Oct 28, 2011",
"Nov 8, 2011"
]; // notice no comma after the last

// -- no need to change below this
var dateArray = [];
for (var i=0, n=datesTaken.length;i<n;i++) {
  dateArray[i]=Date.parse(datesTaken[i])
}
function isDateTaken(dateString) {
  var date = Date.parse(dateString);
  for (var i=0, n=dateArray.length;i<n;i++) {
    console.log(date+'\n'+dateArray[i]);
    if (date === dateArray[i]) return true;
  }
}


$(document).ready(function() {
  $("#emf-form").bind("submit",function(e) {
    var el = $("#element_6");
    var dateString = el.val();
    var dateParts = dateString.split(/[\-|\/|\.]/);
    var usDateString = dateParts[1]+"/"+dateParts[0]+"/"+dateParts[2];
    if (isDateTaken(usDateString)) {
      alert('Sorry, this date is not available');
      el.focus();
      e.preventDefault();
    }
  });
});
</script>

</head>

<body>




<form id="emf-form" enctype="multipart/form-data" method="post" action="." name="emf-form">
  <table style="text-align:left;" cellpadding="2" cellspacing="0" border="0" bgcolor="#FFFFFF">
    <tr>
      <td style="" colspan="2">
        <font face="Verdana" size="2" color="#000000"><b style="font-size:20px;">Enquiry</b><br />
        <label style="font-size:15px;">Please give brief details of your enquiry, We will then get back to you to discuss and answer any questions you may have.<br /></label><br /></font>
      </td>
    </tr>
    <tr valign="top">
      <td id="td_element_label_0" align="left">
        <font face="Verdana" size="2" color="#000000"><b>Your Name</b></font>
      </td>
      <td id="td_element_field_0" style="">
        <input id="element_0" name="element_0" value="" size="50" class="validate[optional]" type="text" />
        <div style="padding-bottom:8px;color:#000000;"></div>
      </td>
    </tr>
    <tr valign="top">
      <td id="td_element_label_1" align="left">
        <font face="Verdana" size="2" color="#000000"><b>Your Email Address</b></font>
      </td>
      <td id="td_element_field_1" style="">
        <input id="element_1" name="element_1" class="validate[optional,custom[email]]" value="" size="60" type="text" style="width: 311px" />
        <div style="padding-bottom:8px;color:#000000;"></div>
      </td>
    </tr>
    <tr valign="top">
      <td id="td_element_label_2" align="left">
        <font face="Verdana" size="2" color="#000000"><b>Telephone</b></font>
      </td>
      <td id="td_element_field_2" style="">
        <input id="element_2" name="element_2" value="" size="30" class="validate[optional]" type="text" />
        <div style="padding-bottom:8px;color:#000000;"></div>
      </td>
    </tr>
    <tr valign="top">
      <td id="td_element_label_6" align="left">
        <font face="Verdana" size="2" color="#000000"><b>Date of Wedding/Event<br />
        (if known/applicable)</b></font>
      </td>
      <td id="td_element_field_6" style="">
        <input id="element_6" name="element_6" value="" size="34" class="validate[optional]" type="text" style="width: 113px" />
        <div style="padding-bottom:8px;color:#000000;"></div>
      </td>
    </tr>
    <tr>
      <td colspan="2" align="left">
        <input name="element_counts" value="8" type="hidden" /> <input name="embed" value="forms" type="hidden" /><input value="Send Enquiry" type="submit" />
      </td>
    </tr>
  </table>
</form><script type="text/javascript">
//<![CDATA[
var EMF_Safari_Captcha = (function(){
        this.isChrome = (/chrome/.test(navigator.userAgent.toLowerCase()));
        this.isSafari = !this.isChrome && (/safari/.test(navigator.userAgent.toLowerCase()));
        this.process_captcha = function(){
                EMF_jQuery('a#captcha_code_refresh').trigger('click');
                get_valid_captcha();
        }
        this.firstTimeSession = true;
        this.safari_submit_session_form = function(){
                if (this.firstTimeSession) {
                                this.firstTimeSession = false;
                                EMF_jQuery("#safari_sessionform").submit();
                                setTimeout('process_captcha()',2000);
                }
        }
        return this;
})();
EMF_jQuery(function(){
        EMF_jQuery("#emf-form").validationEngine({
                validationEventTriggers:"blur",
                scroll:true
        });




        EMF_jQuery("#emf-form ul li").mousedown(highlight_field_on_mousedown);
        EMF_jQuery("#emf-form ul li input, #emf-form ul li textarea, #emf-form ul li select").focus(highlight_field_on_focus);

        var form_obj=EMF_jQuery("#emf-container form");
        if(form_obj.length>0 && form_obj.attr('action').indexOf('#')==-1){
                form_obj.attr('action', form_obj.attr('action')+document.location.hash);
        }

});

EMF_jQuery(window).load(function(){
        var parent_url = decodeURIComponent(document.location.hash.replace(/^#/, ''));
        XD.postMessage(get_frame_height(), parent_url, parent);
});

//]]>
</script>



</body>

</html>

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

  • 10
  • 7
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now