|
Subject:
|
Getting a Result WITHOUT submitting a form?
|
|
Posted By:
|
Lucy
|
Post Date:
|
11/14/2003 12:12:14 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
|
|
Reply By:
|
joefawcett
|
Reply Date:
|
11/14/2003 3:23:00 PM
|
There are plenty of ways, if your asp accepts a url querystring such as:
myAsp.asp?stopDate=1/12/2003
then you can use the following code in JavaScript to run it:
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)
|
|
Reply By:
|
Greg Griffiths
|
Reply Date:
|
11/15/2003 10:45:08 AM
|
The following code should get you started :
<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
<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>
|
|
Reply By:
|
Lucy
|
Reply Date:
|
11/17/2003 4:25:50 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
|
|
Reply By:
|
Greg Griffiths
|
Reply Date:
|
11/18/2003 7:22:09 PM
|
Try this
<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
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>
|
