Page 1 of 1

Javascript + HTML form + dates + PHP

Posted: Wed Mar 19, 2008 6:25 am
by Eric Praline
Hello all!

Here's hoping someone here can help me out; Javascript has never been a strong point of mine although I think the problem I have should be fairly easy to solve... :)

I'm working on a library/book system for work - people come in and borrow books, yadda yadda... all simple stuff. When they borrow a book the Due Date is automatically created as 7 days after todays date, although since it's in an HTML form it can easily be changed by the person entering the loan info.
However, the user is allowed to renew the book twice... which is where my query comes in :-
On the Edit Loan form, the data is populated from a MySQL database. The Due Date is displayed in an <input type="text"> form field, but I have a button next to it which says 'Renew Item'. I want to be able to click the button, and some whizzy Javascript (some sort of onClick event I suppose) checks the DueDate in the form field, adds 7 days to it, and re-displays the new DueDate.
Also, since I need to check if an item has been renewed before (with a max number of 2 times), I have 2 hidden fields on the form called RenewDate_1 and RenewDate_2 - so I need to check whether they have values other than '0000-00-00' - if not then add todays date to either RenewDate_1 or RenewDate_2 as appropriate.

Checking values with MySQL/PHP is no problem, but checking the form values with Javascript and updating form fields I have no clue about! The onClick to change the date I'm sure should be basic stuff, but I've searched t'internet and can't find anything. Checking hidden form fields then changing them is probably a bit more complicated, but should be do-able without too much hassle... I hope!

Thanks in advance.

Re: Javascript + HTML form + dates + PHP

Posted: Wed Mar 19, 2008 9:59 am
by pickle
Look into the Javascript Date object. It sounds like you'll have to tear apart the date displayed, build a new Javascript Date object, add 7 days, then re-display the new date.

http://www.w3schools.com/js/js_obj_date.asp

Re: Javascript + HTML form + dates + PHP

Posted: Wed Mar 26, 2008 10:57 am
by Eric Praline
~pickle | Please use [ code=html ], [ code=php ], etc tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read: :arrow: Posting Code in the Forums to learn how to do it too.


Well I never thought I'd get it to work, but with a lot of scratching my head, and quite a bit more Googling, I've managed to come up with a solution to the 'easy' part - ie the onClick event to change a date in a form :)

Code: Select all

function renewBook() {
    var DueDate = document.forms["FormName"]["DateField"].value; // get DateField value from the form
    var dateArray = DueDate.split('/'); // split DueDate value into day, month, year
    dateArray[2] = 20 + dateArray[2]; // adds 20 onto year to make full year (eg 2008 instead of 08)
    var NewDueDate = new Date();
    NewDueDate.setDate(dateArray[0]); // set date value - Day
        dateArray[1] = eval(dateArray[1]); // convert string to number
        var Month = dateArray[1] - 1; // reduce month count by 1 (Javascript counts months Jan = 0, Feb = 1 etc)
    NewDueDate.setMonth(Month); // set date value - Month
    NewDueDate.setYear(dateArray[2]); // set date value - Year
    NewDueDate.setDate(NewDueDate.getDate()+7); // add 7 days
    var nDay = NewDueDate.getDate(); // sets new Day
        nDay = String(nDay).replace(/^(\d)$/, "0$1"); // turn day into 2 digit number
    var nMonth = NewDueDate.getMonth()+1; // sets new Month + puts month count back to normal
        nMonth = String(nMonth).replace(/^(\d)$/, "0$1"); // turn month into 2 digit number
    var nYear = NewDueDate.getYear(); // sets new Year
    if (nYear < 1000) { // displays year correctly
        nYear += 1900
    }
    var nDueDate = nDay+"/"+nMonth+"/"+(nYear+"").substring(2,4); // creates new date as string (plus turns long year to short version)
    document.forms["FormName"]["DateField"].value = nDueDate; // set form field to new value
}
It's probably more complicated than it needs to be, but I really don't care - the main thing is it works, hoorah! :D

Now on to the next bit - checking if the item has been renewed - which will probably take me another week or so... ;)


~pickle | Please use [ code=html ], [ code=php ], etc tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read: :arrow: Posting Code in the Forums to learn how to do it too.