gazdzid Posted January 23, 2009 Report Share Posted January 23, 2009 (edited) GIVEN: A form has 2 fields and a button. If a default date appears in field "A" then press update_button onclick action calls function that adds 7 days to the default date and result is returned to field "B". My JavaScript works great. if I click the form field "A" (default date) a calendar will pop-up so that the default date can be changed. I change the default date then I click update_button onclick action calls function that adds 7 days to the newly selected date and result is returned to field "B". My JavaScript works great. Question: How can I have field "B" immediately updated when chages are made to field "A" without using an update button. Currently, my Update button calls the function with an onclick=upDate('dateOne', 'dateTwo') Edited January 23, 2009 by gazdzid Quote Link to comment Share on other sites More sharing options...
LSW Posted January 23, 2009 Report Share Posted January 23, 2009 Short answer: Ajax I don't work with it, so cannot get into detail. But that is they key word you want. Quote Link to comment Share on other sites More sharing options...
monkeysaurus Posted January 23, 2009 Report Share Posted January 23, 2009 There's no ajax here, since the browser won't be talking to the server inbetween page requests. This can, and should be handled with pure javascript. If you're not using a framework (pure javascript), you could use the onchange event rather than using the onClick event. My preferred solution would be to use the jQuery UI datepicker; it allows you to easily specify a callback function when a date is selected. In this case, the callback function would figure out the new date and update field 'B' for you. You can check out the Datepicker here. Quote Link to comment Share on other sites More sharing options...
monkeysaurus Posted January 23, 2009 Report Share Posted January 23, 2009 Just had a bit of a play with this one - here's my solution: http://johnmccollum.co.uk/datepicker/ Bear in mind that the datepicker can be skinned to whatever colour scheme your website uses. Also, I used British date formatting because...I'm British. Quote Link to comment Share on other sites More sharing options...
LSW Posted January 23, 2009 Report Share Posted January 23, 2009 OK, I may have misunderstood. (death to JavaScript) Quote Link to comment Share on other sites More sharing options...
monkeysaurus Posted January 23, 2009 Report Share Posted January 23, 2009 (edited) There's no Ajax without javascript. Death to obtrusive javascript mixed in with HTML? Couldn't agree more. Edited January 23, 2009 by monkeysaurus Quote Link to comment Share on other sites More sharing options...
gazdzid Posted January 23, 2009 Author Report Share Posted January 23, 2009 Hello monkeysaurus and team, Thank you for your kind reply and the onchange suggestion. Some success was observed but need a little more assistance Given: 1. I currently have within the tags for Field "A" I have onclick="ds_sh3(this) which is an original Calendar function. (calendar works) 2. I have added onchange="upDate('date3', 'date4') to add 7 days and returns result to field "B". (onhange doesnot trigger) Note: Field "A" Calendar works however onchange was not triggered Field "B" remained blank. Next Steps: 3. Removed onclick="ds_sh3(this) which is the calendar function 4. Manually changed date in field "A" onchange triggers Field "B" displays new date +7 days (cool) Conclusion onchange does become active if the change in a field is generated via function Question Sorry to say that I am not familiar with jQuery UI but can I still use JavaSript fuction to select a date for Field "A" and have the fuction that adds 7 days automatically triggered by either using onchange, another type of tag controller, or automatically force a change? if so how? if not why? and most importantly thanks!! Quote Link to comment Share on other sites More sharing options...
LSW Posted January 23, 2009 Report Share Posted January 23, 2009 Death to Ajax and JavaScript, all Hail Flex! Quote Link to comment Share on other sites More sharing options...
lwsimon Posted January 23, 2009 Report Share Posted January 23, 2009 You can actually trigger the change event via javascript, if you're using jQuery: $('input#field_a').change() I'm sure there is a way to do it without jQuery, but its been so long since I worked with out it, I don't know anymore. Quote Link to comment Share on other sites More sharing options...
lwsimon Posted January 23, 2009 Report Share Posted January 23, 2009 Death to Ajax and JavaScript, all Hail Flex! Long live progressive enhancements, death to proprietary standards! Looking to start a holy war? Quote Link to comment Share on other sites More sharing options...
monkeysaurus Posted January 23, 2009 Report Share Posted January 23, 2009 (edited) Feck, I'm in the same position, LW. It's been so long since I worked without jQuery, I'm not sure what's going on here. I suspect, though I could be wrong, that you might be running into cross browser difficulties. Do you have the page online anywhere where we could take a look at it? Oh, and Flex? Are you having a giraffe? Edited January 23, 2009 by monkeysaurus Quote Link to comment Share on other sites More sharing options...
gazdzid Posted January 23, 2009 Author Report Share Posted January 23, 2009 no I do nor have a site working local Quote Link to comment Share on other sites More sharing options...
tpattison Posted January 24, 2009 Report Share Posted January 24, 2009 You need to add an onChange event to A. Give A and B an id if they don't have one already. Put the following in a function that runs onLoad: a=document.getElementById("a") b=document.getElementById("b"); a.onchange=function() {...Update b.value with a+7 days here...} Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.