Form to Javascript without hitting submit
Question
I was wondering if you guys could help. I've been searching for an answer for a week so far and I can't figure it out. I'm really new to Javascript (although I've used PHP and HTML for a few years). Basically I'm trying to use javascript to calculate an end date from a user entered start date, and a duration, and i'm struggling. I want the date to be updated when ever the user updates either form option:
The code I've got is as follows, but I currently just get the following error:
start: Invalid Date expire: Invalid Date
I already have a script that checks the date is a real date, so for simplicity i've left that out
<script type="text/javascript">
function setExpDate(){
formDate = document.getElementById('startDate');
number = document.getElementById('days');
// set number of days to add
var interval = number;
var startDate = new Date(Date.parse(formDate));
document.write('start: ' + startDate);
var expDate = startDate;
expDate.setDate(startDate.getDate() + interval);
document.write('<br>expire: ' + expDate);
};
</script>
</head>
<body>
<input type="text" size="10" maxlength="10" id="startDate" name="startDate" onblur="setExpDate()" value="01/01/2015">
<select name="days" id="days" onblur="setExpDate()">
<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>
</select>
Thanks for your help!
2 answers
solution1
1 2014-03-16 14:02:06
You are only getting the element, but not the date value. so just read the value of input. it should be fine.
formDate = document.getElementById('startDate').value;
number = document.getElementById('days').value;
working version: http://jsfiddle.net/9f5q5/
solution2
0 ACCPTED 2014-03-16 15:24:11
A simple example using unobtrusive javascript via addEventListener and splitting the date string for the Date constructor to avoid string parsing issues.
HTML
<input type="text" id="myStartDate" value="01/01/2015">
<select id="myDays">
<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>
</select>
<div id="myResult"></div>
Javascript
var inputElement = document.getElementById('myStartDate'),
selectElement = document.getElementById('myDays'),
resultElement = document.getElementById('myResult');
function updateResultElement() {
var parts = inputElement.value.split('/'),
dateObject;
parts[1] -= 1;
parts.reverse();
dateObject = new Date(Date.UTC.apply(undefined, parts));
dateObject.setUTCDate(dateObject.getUTCDate() + Number(selectElement.value));
resultElement.textContent = dateObject.toUTCString();
}
inputElement.addEventListener('change', updateResultElement, false);
selectElement.addEventListener('change', updateResultElement, false);
updateResultElement();
On jsFiddle
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.