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

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

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?

Upps :-)

ASKER

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 ?

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

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

ASKER

@ OK - i'm with you now - I'll give it a try

ASKER

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

I'll look in a few hours. 6am here now so I just got up.

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.

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

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

Zvonko - why on the submit button?

Why not onSubmit?

And in this case we can actually not use any of them it seems

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.

ASKER

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.

ASKER

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

ASKER

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

Why not show a calendar of available dates instead? Saves validating input and user frustration!

ASKER

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

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

SOLUTION