date autofill calculations

I'm creating a web form and I have a series of date fields that need to be entered by the user. The date fields increment from an end-date so I want to make the form more convienient for the users by autofilling the date fields after the user enters the end date at the beginning of the form.

Below is the code I have so far and is a simplification of my form, but I still need to get the fields to increment by one day. So, if a user enters 11/22/2006 in the top field, Date 1 would autofill with 11/20/2006, Date 2 would autofill with 11/21/2006 and Date 3 would just print the same date over again.

Can anyone help?

Code:

---

<SCRIPT LANGUAGE="JavaScript">

<!-- Begin
var DateAutofill1 = "";
var DateAutofill2 = "";
var DateAutofill3 = "";

function InitSaveVariables(form) {
DateAutofill1 = form.DateAutofill1.value;
DateAutofill2 = form.DateAutofill2.value;
DateAutofill3 = form.DateAutofill3.value;
}

function DateAutofill(form) {
if (form.copy.checked) {
InitSaveVariables(form);
form.DateAutofill1.value = form.Date.value;
form.DateAutofill2.value = form.Date.value;
form.DateAutofill3.value = form.Date.value;
}
else {
form.DateAutofill1.value = DateAutofill1;
form.DateAutofill2.value = DateAutofill2;
form.DateAutofill3.value = DateAutofill3;
}
}
//  End -->

</script>

<form method="post" action="" name="">
<fieldset>
<legend>Date Input</legend>
Ending Date:
<input type="text" size="15" maxlength="50" name="Date">
</fieldset>
<p>
</p>
<fieldset>
<legend>Autofill Dates</legend>
<p>Enter a date above and check the box to autofill dates: 
<input type="checkbox" name="copy" OnClick="javascript:DateAutofill(this.form);" value="checkbox">
</p>
<table>
  <tr>
    <td>Date 1:</td>
    <td><input type="text" size="15" maxlength="50" name="DateAutofill1"></td>
  </tr>
  <tr>
    <td>Date 2: </td>
    <td><input type="text" size="15" maxlength="50" name="DateAutofill2"></td>
  </tr>
  <tr>
    <td>Date 3:</td>
    <td><input type="text" size="15" name="DateAutofill3"></td>
  </tr>
</table>
</fieldset>

</form>

---

Quote:

---

Originally Posted by ebrad

I'm creating a web form and I have a series of date fields that need to be entered by the user. The date fields increment from an end-date so I want to make the form more convienient for the users by autofilling the date fields after the user enters the end date at the beginning of the form.

... but I still need to get the fields to increment by one day. So, if a user enters 11/22/2006 in the top field, Date 1 would autofill with 11/20/2006, Date 2 would autofill with 11/21/2006 and Date 3 would just print the same date over again.

---

At the end of this post, you'll find an implementation to investigate. The code is on the heavy side due to the way in which I broke the task down, but it's all quite simple in concept. Most of it is actually supporting code: the parseDate and calculate functions do the most work. The former is documented in its original appearance on this forum.

Currently, if validation of the original date fails, the background colour of that control is shaded red, though obviously anything will do. Validation for all of them would be best left until submitting the input.

Quote:

---

<SCRIPT LANGUAGE="JavaScript">

---

The language attribute has been deprecated for a very long time. Use the type attribute instead:

HTML Code:

---

<script type="text/javascript">

---

Quote:

---

<!-- Begin

---

"Hiding" scripts (or style element content) hasn't been necessary in years. You can stop that habit, now.

Quote:

---

var DateAutofill1 = "";
var DateAutofill2 = "";
var DateAutofill3 = "";

---

There doesn't seem to be much need to initialise those variables: they're never read before being assigned. You should certainly declare them though - that's definitely a good thing.

Quote:

---

<p>Enter a date above and check the box to autofill dates:
<input type="checkbox" name="copy" OnClick="javascript&#58;DateAutofill(this.form);" value="checkbox">
</p>

---

A checkbox isn't really appropriate: it represents a choice, not an action. Use buttons for the latter.

HTML Code:

---

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
    <head>
        <title>Date auto-fill demonstration</title>

        <style type="text/css">
        input.error {
            background: #ffcfcf;
            color: #000000;
        }
        </style>

        <script type="text/javascript">
        function calculate(control) {
            var controls = control.form.elements,
                date = parseDate(control.value, true);

            if (date) {
                removeClass(control, 'error');
                for (var i = 3; i > 0; --i) {
                    controls['auto-' + i].value = formatDate(date);
                    date.setDate(date.getDate() - 1);
                }
            } else setClass(control, 'error');
        }

        function parseDate(string, preferMDY) {
            var match, year, month, date, result;

            if ((match = /^(\d{4})([.\/-])(\d{1,2})\2(\d{1,2})$/.exec(string))) {
                year = +match[1];
                month = +match[3];
                date = +match[4];
            } else if ((match = /^(\d{1,2})([.\/-])(\d{1,2})\2(\d{4})$/.exec(string))) {
                year = +match[4];

                if (preferMDY) {
                    month = +match[1];
                    date = +match[3];
                } else {
                    month = +match[3];
                    date = +match[1];
                }
                if (month > 12) {
                    var temp = month;

                    month = date;
                    date = temp;
                }
            }
            with ((result = new Date(year, --month, date)))
                if ((month == getMonth()) && (date == getDate())) return result;
            return null;
        }
        function formatDate(date) {
            return (date.getMonth() + 1).pad(2) + '/' + date.getDate().pad(2)
                + '/' + date.getFullYear().pad(4);
        }

        function setClass(element, className) {
            var pattern = new RegExp('(^|\\s)' + className + '(\\s|$)');

            if (!pattern.test(element.className))
                element.className = (element.className + ' ' + className).trim();
        }
        function removeClass(element, className) {
            element.className = String(element.className).replace(
                new RegExp('(^|\\s)' + className + '(\\s|$)'), ' ').trim();
        }

        Number.prototype.pad = function(minLength, character, radix) {
            return Number(this).toString(+radix || 10).pad(minLength, character || '0');
        };
        String.prototype.pad = function(minLength, character) {
            var string = String(this);
            character = character || ' ';

            while (string.length < minLength) string = character + string;
            return string;
        };
        String.prototype.trim = function() {return String(this).replace(/^\s+|\s+$/g, '');};
        </script>
    </head>

    <body>
        <form action="//example.com/">
            <fieldset>
                <legend>Date input</legend>
                <label>Ending date:
                    <input name="end" type="text" value="" onchange="calculate(this);"></label>
            </fieldset>

            <fieldset>
                <legend>Auto-fill dates</legend>
                <table>
                    <tr>
                        <td><label for="auto-1">Date 1</label>:</td>
                        <td><input id="auto-1" name="auto-1" type="text" value=""></td>
                    </tr>
                    <tr>
                        <td><label for="auto-2">Date 2</label>:</td>
                        <td><input id="auto-2" name="auto-2" type="text" value=""></td>
                    </tr>
                    <tr>
                        <td><label for="auto-3">Date 3</label>:</td>
                        <td><input id="auto-3" name="auto-3" type="text" value=""></td>
                    </tr>
                </table>
            </fieldset>
        </form>
    </body>
</html>

---

Hope that helps,
Mike

hot dang, that was too helpful.

Thanks also for straightening my syntax out. I don't know even a little bit of javascript. I just tailored this script to get that.

The checkbox I kinda liked, even though it was an unconventional use of a widget. Your way looks better though.

Thanks again!