Getting a Result WITHOUT submitting a form?

Lucy · November 14th, 2003, 01:12 PM

I have an 'insert form' written in asp which inserts information into a SQl database. Within this form a user enters in a date into a textfield e.g. 14/11/2003. In a dropdown box next to this are numbers going from 1-28 which represent days (so 7 days=1 week etc).

What happens at the moment, using ASP and a submit button is this:
User enters in a date, chooses the number of days, clicks submit and the result outputted to the page, upon submit, is the date from the initial date.
e.g. date = 14/11/2003
days = 7
stop date = 21/11/2003

What I need to do, using javascript, is this:
User enters in a date, chooses the number of days and without submitting a form (as this would then submit the whole form and enter the info into my database), the stop date is calculated.

Is this possible to do 'on the fly' - maybe like on-un-focus of the dropdown box?

I'm completely new to Javascript so any help would be great :)

Cheers in advance

Lucy

joefawcett · November 14th, 2003, 04:23 PM

There are plenty of ways, if your asp accepts a url querystring such as:

Code:

myAsp.asp?stopDate=1/12/2003

then you can use the following code in JavaScript to run it:

Code:

var oDummy = new Image("myAsp.asp?stopDate=" + stopDate);

assuming stopDate holds your date. If you need to return values back to the page then you can use msxml2.xmlhttp class. Download the sdk from Microsoft, look for msxml core services version 4.

Joe (MVP - xml)

Greg Griffiths · November 15th, 2003, 11:45 AM

The following code should get you started :

Code:

<html>
<head>
<script language="javascript" version"1.4">
function getEndDate()
{
    var theYear=document.myForm.startDate.value.substring(6,10);
    var theMonth=document.myForm.startDate.value.substring(3,5);
    var theDay=document.myForm.startDate.value.substring(0,2);

    // swap the month and the day about so that we have a US format date
    // then turn the string into a date object
    var startdate=theMonth + "/" + theDay + "/" + theYear;
    startdate=new Date(startdate);

    // create the enddate by adding the days required
    var enddate=theMonth + "/" + (startdate.getDate() + parseInt(document.myForm.days2add.value)) + "/" + theYear;
    enddate=new Date(enddate);

    // repackage the date
    theYear=enddate.getFullYear();
    theMonth=(enddate.getMonth() +1); //month starts at 0, so we need to add one
    theDay=enddate.getDate();

    // pad for single digit days and months
    if (theMonth.toString().length==1)
    {
        theMonth="0" + theMonth;
    }
    if (theDay.toString().length==1)
    {
        theDay="0" + theDay;
    }

    // put back on the form
    document.myForm.endDate.value = theDay + "/" + theMonth + "/" + theYear;

}
</script>
</head>
<body>
<form name="myForm">
<input type="text" name="startDate" size="10"> dd/mm/yyyy&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<select name="days2add">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select><p>
<input type="button" value="Calculate Difference" onclick="getEndDate();"><p>
<input type="text" name="endDate" size="30">
</form>
</body>

Lucy · November 17th, 2003, 05:25 AM

Thanks for that Greg - your code works brilliantly :)

One question though which, if you can help, would be great - in order to keep errors to a minimum i've got the startdate as 3 separate dropdown boxes, the first holding values between 1-31 (date), the second holding values from 1-12 (month) and the third holding values upwards from 2003 (year).

Do you know what i'd have to do to amend the code accordingly so that this would work? I don't know enough about javascript to know what parts of the code to amend.

Thanks in advance

Lucy

Greg Griffiths · November 18th, 2003, 08:22 PM

Try this

Code:

<html>
<head>
<script language="javascript" version"1.4">
function getEndDate()
{
    var theYear=document.myForm.startDate.value.substring(6,10);
    var theMonth=document.myForm.startDate.value.substring(3,5);
    var theDay=document.myForm.startDate.value.substring(0,2);

    // swap the month and the day about so that we have a US format date
    // then turn the string into a date object
    var startdate=theMonth + "/" + theDay + "/" + theYear;
    startdate=new Date(startdate);

    // add the differences from the dropdowns
    theYear=parseInt(theYear) + parseInt(document.myForm.years2add.value);
    theDay=parseInt(startdate.getDate()) + parseInt(document.myForm.days2add.value);
    theMonth=parseInt(theMonth) + parseInt(document.myForm.months2add.value);

    // recreate the new date which is the end date
    var enddate= theMonth + "/" + theDay + "/" + theYear;
    enddate=new Date(enddate);

    // repackage the date
    theYear=enddate.getFullYear();
    theMonth=(enddate.getMonth() +1); //month starts at 0, so we need to add one
    theDay=enddate.getDate();

    // pad for single digit days and months
    if (theMonth.toString().length==1)
    {
        theMonth="0" + theMonth;
    }
    if (theDay.toString().length==1)
    {
        theDay="0" + theDay;
    }

    // put back on the form
    document.myForm.endDate.value = theDay + "/" + theMonth + "/" + theYear;

}
</script>
</head>
<body>
<form name="myForm">
<input type="text" name="startDate" size="10"> dd/mm/yyyy&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
Day<select name="days2add">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
Months<select name="months2add">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
Years<select name="years2add">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<p>
<input type="button" value="Calculate Difference" onclick="getEndDate();"><p>
<input type="text" name="endDate" size="30">
</form>
</body>