Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Go Back   Wrox Programmer Forums > Web Programming > JavaScript > Javascript How-To
Password Reminder
Register
| FAQ | Members List | Calendar | Search | Today's Posts | Mark Forums Read
Javascript How-To Ask your "How do I do this with Javascript?" questions here.
Welcome to the p2p.wrox.com Forums.

You are currently viewing the Javascript How-To section of the Wrox Programmer to Programmer discussions. This is a community of tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developers’ questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
Reply
 
Thread Tools Search this Thread Display Modes
  #1 (permalink)  
Old November 14th, 2003, 01:12 PM
Authorized User
 
Join Date: Jul 2003
Location: , , .
Posts: 56
Thanks: 0
Thanked 0 Times in 0 Posts
Default Getting a Result WITHOUT submitting a form?

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 With Quote
  #2 (permalink)  
Old November 14th, 2003, 04:23 PM
joefawcett's Avatar
Wrox Author
Points: 9,763, Level: 42
Points: 9,763, Level: 42 Points: 9,763, Level: 42 Points: 9,763, Level: 42
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Exeter, , United Kingdom.
Posts: 3,074
Thanks: 1
Thanked 38 Times in 37 Posts
Default

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)
Reply With Quote
  #3 (permalink)  
Old November 15th, 2003, 11:45 AM
Friend of Wrox
 
Join Date: Jun 2003
Location: High Wycombe, UK, United Kingdom.
Posts: 344
Thanks: 0
Thanked 1 Time in 1 Post
Default

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>
Reply With Quote
  #4 (permalink)  
Old November 17th, 2003, 05:25 AM
Authorized User
 
Join Date: Jul 2003
Location: , , .
Posts: 56
Thanks: 0
Thanked 0 Times in 0 Posts
Default

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 With Quote
  #5 (permalink)  
Old November 18th, 2003, 08:22 PM
Friend of Wrox
 
Join Date: Jun 2003
Location: High Wycombe, UK, United Kingdom.
Posts: 344
Thanks: 0
Thanked 1 Time in 1 Post
Default

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>
Reply With Quote
Reply


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
form submitting cro_crx Pro PHP 5 January 25th, 2005 12:19 PM
Form Submitting cro_crx Beginning PHP 3 January 17th, 2005 01:30 PM
Submitting a form YuliaKupina Classic ASP Basics 3 June 24th, 2004 01:52 AM
Chapter 3, submitting a form YuliaKupina BOOK: Beginning ASP 3.0 1 June 23rd, 2004 03:09 PM



All times are GMT -4. The time now is 10:13 PM.


Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.