Javascript DateAdd within a form. Having trouble!

[danreynoldsdsgns]

Hi,

If you click on

http://www.danreynoldsdsgns.com/cart/resParking.php

then you will see the form that I am trying to implement. There is a button towards the bottom of the form whereby I would like someone to click on it, without it resetting the form, and without submitting the form and taking the user through to the checkout. I would also like to be able to include the date that is produced in the item description on the checkout page. I am using Mal's ECommerce as a shopping cart (simple, free and easy!), and you will be able to see from the other sections of the form what id style is used to add the different sections to the item description.

I got the coding that I am trying to implement the DateAdd from

http://slingfive.com/pages/code/jsDate/jsDate.html

and have not tidied it all up yet and got rid of all the bits that I do not need.

Any help would be 100% greatly appreciated as this is really doing my head in.

Kind Regards,

Dan.

 

[1DMF]

There is a button towards the bottom of the form

there are a number of buttons on the form, is there a reason you want us to guess what one you are talking about?

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"

Google Rank Extractor -> Perl beta with FusionCharts

 

[danreynoldsdsgns]

Sorry, when I say there is a button at the bottom of the form, I meant the one that says New Expiry Date.

Hoping you can help me,

Dan.

 

[vacunita]

I'm sorry, your question is not very clear.

You don't want the Expiry button to submit the form, or take the user to the checkout page, what do you want the button to do?

Just call a function, execute some code? redirect to some other page that's not the checkout page?

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[danreynoldsdsgns]

Sorry, I would like when you click the Expiry Date button to create a date by x amount of months onwards (the x is the amount selected in the How many months do you wish to buy select box) from the date selected in the Current Expiry Date box. EG If someones permit runs out on the 30/03/10, and wishes to buy 3 months, it would show in the box below when you click the Expiry Date button that the new permit would expire on 30/06/10 (not bothered about the exact days, just the months).

Dan.

 

[vacunita]

Perhaps something like this:

<script>
function Calc_New_Expiry(){
[green]\\Get selected date from input box[/green]
var basedate=document.getElementById('[red]exdate[/red]');
[green]\\Get months to add[/green]
var sel_months=parseInt(document.getElementById("qty1").value);

[green]\\Split date, to reconfigure[/green]
var recdate=basedate.value.split("-"); 
[green]\\Add months[/green]
var newmonth=parseInt(recdate[1])+sel_months;
[green]\\Re-assemble date[/green]
var newdate=newmonth + "/" + recdate[0] + "/" + recdate[2];
[green]\\Transform date into actual date type[/green]
var realdate=new Date(newdate);

[green]\\Output date to result div area[/green]
document.getElmentById("result").innerHTML=realdate;
}
</script>
...
<button id="btnTestDateAdd" assocCtlIDs="selInterval,qty1,exdate" [red]onClick="Calc_New_Expiry(); return false;"[/red]>New Expiry Date</button>

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[danreynoldsdsgns]

Hey,

Thanks for your help, but I couldn't get that to work. I deleted the links to the .js sheets, added that script at the top of my page and changed the button to what you suggested, but when you test the page again, the form submits when you click on the Expiry Date button. I want it to show on the page first of all what the new expiry date is, and then have the user click on the Buy Now! button to go through to payments. Was there anything else I should have done? I'm not really that hot on javascript.

Thanks again though.

Dan.

 

[vacunita]

I had a couple of errors there. Including the comment slashes which where backwards.

Try this:

<script>
function Calc_New_Expiry(){
[green]//Get selected date from input box[/green]
var basedate=document.getElementById('exdate');
[green]//Get months to add[/green]
var sel_months=parseInt(document.getElementById("qty1").value);

[green]//Split date, to reconfigure[/green]
var recdate=basedate.value.split("-");
[green]//Re-assemble date[/green]
var newdate=recdate[1] + "/" + recdate[0] + "/" + recdate[2];
[green]//Transform date into actual date type[/green]
var realdate=new Date(newdate);
[green]//Add months to date[/green]
realdate.setMonth(realdate.getMonth()+parseInt(sel_months));
[green]Output new date result div [/green]
document.getElementById("result").innerHTML=realdate.getDate() + "-" + (parseInt(realdate.getMonth())+1) + "-" + realdate.getFullYear();
}
</script>

Leave the button as a posted above. Just modify the function as shown.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[danreynoldsdsgns]

Still no luck. It submits the form as soon as it is clicked. Ok, we'll try something different. To get the items to appear in the item description in the cart, my cart accepts for example name="product1[Expiry Date]". If I scrapped the idea of having the old expiry date in the cart, and wanted the new one that has been worked out to appear there, where would i put the name="product1[Expiry Date]"?

Dan.

 

[vacunita]

You can try a little harder and actually look at the code, It would have been easy to spot that I missed the forward slashes on the output comment. Seeing as all the rest of the lines in green have them there.

...
[green]//Add months to date[/green]
realdate.setMonth(realdate.getMonth()+parseInt(sel_months));
[red]//[/red][green]Output new date result div[/green]
document.getElementById("result").innerHTML=realdate.getDate() + "-" + (parseInt(realdate.getMonth())+1) + "-" + realdate.getFullYear();
}
</script>

I have thoroughly tested it, and it works. Once there are no errors. The return false: part makes sure the form does not get submitted. but only works when there are no errors.




----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[danreynoldsdsgns]

Phil AKA Vacunita, you are an absolute legend. That works a treat. Thank you so much for your help on this. It really is greatly appreciated.

Lastly, do you know of any code that, when the page initially loads up, in the start date box, it comes up with todays date instead of where I have put value="Start Today". So if i clicked on the page today it would automatically have in there 05/03/10. I really am useless at javascript and need to go on a course.

Regards

Dan.

 

[vacunita]

Place the put_now() function with the others, and then add the red part to the onLoad event of the body tag.

<script>
function put_now(){
var now=new Date();
var day=now.getDate();
var month=parseInt(now.getMonth()) + 1;
var year=now.getFullYear();
var dform=day + "-" + month + "-" + year;
document.getElementById('exdate').value=dform;
}
</script>
[gray]<body id="p7bod" onload="P7_Uberlink('p7uberlink','p7bod')[/gray][red]; put_now();[/red][gray]">[/gray]

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[danreynoldsdsgns]

Thank you, that works great as well.

One last thing, and this time it is the last thing!

You know the result for the new expiry date comes up in that box when you click on it....it comes up in the <div> box. Is there any way of making that part of the form so that I can make it a requirement to have that box filled? I tried <input type="text" id="result"> but that didnt work.

Dan.

 

[vacunita]

If you turned it into a textbox, then you'll need to change the .innerHTML part to .value.

document.getElementById("result").[red]value[/red]=realdate.getDate() + "-" + (parseInt(realdate.getMonth())+1) + "-" + realdate.getFullYear();

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.