I am making a web page which will allow users to input and view data for different dates, and to change the date, there are two buttons, one of which will display the previous day, and one which will show the next day. I know that I can do this by submitting forms and reloading the page every time they press one of these buttons, but I would rather use
javascript and not have to submit a form, but I am having troubles getting it to work. Currently, I have the two buttons, and the date stored in a PHP variable, as shown in my code below:
<script>
function init() {
<? $nutrDate = $this->parseDate(date('m/d/Y')); ?>
}
function nutrPrevDay() {
<? $nutrDate = mktime(0, 0, 0, date('m',$nutrDate), date('d',$nutrDate)-1, date('Y',$nutrDate)); ?>
alert("<? echo(date("m/d/y", $nutrDate)) ?>");
}
function nutrNextDay() {
<? $nutrDate = mktime(0, 0, 0, date('m',$nutrDate), date('d',$nutrDate)+1, date('Y',$nutrDate)); ?>
}
window.onload = init;
</script>
<p style="text-align:center; font-size:14px; color:#03F">
<button onclick="nutrPrevDay()" style="width:200px" >< Show Previous Day</button>
<? echo(date('m/d/Y', $nutrDate)) ?>
<button onclick="nutrNextDay()" style="width:200px">Show Next Day ></button>
</p>
I have the alert in the nutrPrevDay() only as debugging. What happens is when I click on the button, the alert shows that the day is correctly decreased (for example from May 17 to May 16), but only decreases one day, and not one day for every click. Also, I do not know how to make the text on the page (created by the line ) change to display the new date after a button is clicked.
So here are my questions:
1) Is it possible to dynamically change data (such as text, and in the future, SQL queries) on a page using
javascript without having to reload a page when clicking on a button?
2) If possible, how can I make those changes?
3) How can I fix this so that it will increment and decrement through dates every time a button is clicked?
