This is my form:
<form>
<input type="text" placeholder="Check in date" id="checkin" />
<input type="text" placeholder="Check out date" id="checkout" />
<input type="submit" onclick="result()" id="submit" />
</form>
And this is my javascript for calculating the money=days*price
<script language="javascript" type="text/javascript">
function result()
{
var a = document.getElementById("checkin").value;
var b = document.getElementById("checkout").value;
var checkin = moment(a).format('DD-MM-YYYY');
var checkout = moment(b).format('DD-MM-YYYY');
var days= checkout.diff(checkin, 'days');
var price=100;
alert("The money you have to pay is: "+days*price);
}
</script>
This is my test case:
checkin date = 05-12-2014,
checkout date = 25-12-2014
When I click submit, nothing happens.
Can anyone please explain to me why and how can I fix this. Thank you!
function result(e) //e refers to event.
{
e.preventDefault();
var a = document.getElementById("checkin").value;
var b = document.getElementById("checkout").value;
var checkin = moment(a, 'DD-MM-YYYY');
var checkout = moment(b, 'DD-MM-YYYY');
var days= checkout.diff(checkin, 'days');
var price=100;
alert("The money you have to pay is: "+days*price);
}
<script src="http://momentjs.com/downloads/moment.js"></script>
<form>
<input type="text" placeholder="Check in date" id="checkin" />
<input type="text" placeholder="Check out date" id="checkout" />
<input type="submit" onclick="result(event)" id="submit" />
</form>
First of all you're submitting the form. You need to prevent that using event.preventDefault(). I think your problems will melt away after that. I strongly suggest to restrict the date inputs. Either use a library to select dates from a picker or provide the user with some guidance to the date format.
Use this to convert dates to moment dates
var checkin = moment(a, 'DD-MM-YYYY')
var checkout = moment(b, 'DD-MM-YYYY')
See the jsbin
Related
Could someone help me please with this?
So I have two text boxes, one for the day of the month, one for the actual text(event title). Then there is a button to run the code and place the event. This should overwrite whatever had previously been the event for that day.
I was trying to write a function for it, but it didn't work.
I have dayEvent for every day in a month.
<p>Enter a day: <input type="text" id="enter_day" /></p>
<p>Enter an event: <input type="text" id="enter_day" /></p>
<input type="button" onclick="myEvent()" value="Click here" />
var dayEvent = new Array();
function myEvent() {
var newEvent = document.getElementById('enter_day').value;
var dayForEvent = document.getElementById('enter_day').value;
dayEvent[dayForEvent] = newEvent;
}
dayEvent[1] =
"<br /><a href='#'>Giveaway with Cesar Millan</a><br />12 am <br />online";
dayEvent[2] =
"<br /><a href='#'>Classic Cinema: Wings</a><br />7 pm <br />at AMC Empire 25";
Fixing the duplicate ID problem fixes your code:
var dayEvent = [
"<br/><a href='#'>Giveaway with Cesar Millan</a><br/>12 am <br/>online",
"<br/><a href='#'>Classic Cinema: Wings</a><br/>7 pm <br/>at AMC Empire 25"
];
function myEvent() {
var newEvent = document.getElementById('enter_event').value;
var dayForEvent = document.getElementById('enter_day').value;
dayEvent[dayForEvent] = newEvent;
console.info("Array after change: ", dayEvent)
}
console.info("Array before change: ", dayEvent)
<p>Enter a day: <input type="text" id="enter_day" /></p>
<p>Enter an event: <input type="text" id="enter_event" /></p>
<input type="button" onclick="myEvent()" value="Click here" />
Note that I changed your code to use the literal array declaration syntax with square brackets.
Next, remember that array indices start with 0, not 1.
Finally, I would suggest that you use an input with type="number" for the day input, or do some validation yourself with parseInt() or such.
I have been trying to find a solution for days now. I am not strong in javascript and it confuses me.
I want the submit button disabled unless the start time is earlier that the end time. I can do this so easily in PHP but I need to prevent submission of a form on the client side in this case. I was able to figure out basic numbers but not date-times. I also would like to insert a message inside of the div tags with the id of message.
<input type="datetime-local" name="start" id="start">
<input type="datetime-local" name="end" id="end">
<div id="message"></div>
<button type="submit" name="submit" id="submit">Click to Submit</button>
This should do the trick:
<input type="datetime-local" name="start" id="start">
<input type="datetime-local" name="end" id="end">
<div id="message"></div>
<button type="submit" name="submit" id="submit">Click to Submit</button>
<script type="text/javascript">
let startInput = document.getElementById('start');
let endInput = document.getElementById('end');
let messageDiv = document.getElementById('message');
let submitButton = document.getElementById('submit');
let compare = () => {
let startValue = (new Date(startInput.value)).getTime();
let endValue = (new Date(endInput.value)).getTime();
if (endValue < startValue) {
messageDiv.innerHTML = 'Start date must be before end date!';
submitButton.disabled = true;
} else {
messageDiv.innerHTML = '';
submitButton.disabled = false;
}
};
startInput.addEventListener('change', compare);
endInput.addEventListener('change', compare);
</script>
First, we store all the HTML elements we need in variables. Then we declare a function that we run whenever either date input changes. Inside that function, we check if the end date is before the start date. If it is, we display the error message and disable the submit button; if it isn't, we hide the error message and enable the submit button.
I ran this code and it works.
Comment on this answer if you have questions.
something like that ?
<form id="my-form">
<input type="datetime-local" name="start" >
<input type="datetime-local" name="end" >
<div id="message"></div>
<button type="submit" name="btSubmit" disabled>Click to Submit</button>
</form>
const myForm = document.getElementById('my-form')
myForm.end.oninput=()=>
{
let d_start = (new Date(myForm.start.value)) || Infinity
, d_end = (new Date(myForm.end.value)) || 0
myForm.btSubmit.disabled =( d_start > d_end)
}
I have a form where a visitor can make a lodging reservation with an arrival date and departure date. If they click on an input field a calendar pops up for them to select a date. How can I add a popup JS alert if the departure date is <= the arrival date? My code is as follows:
<head>
...
<script type="text/javascript" src="js/CalendarPopup.js"></script>
<script type="text/javascript">document.write(getCalendarStyles());</script>
...
</head
<script type="text/javascript" id="jsArrive">
var now = new Date();
var yesterday = new Date(now);
yesterday.setDate(now.getDate() - 1);
var calArrive = new CalendarPopup("divArrive");
</script>
<b>Arrive:</b>
<input type="text" name="dateArrive" value="" size="15" onClick="calArrive.select(document.forms[0].dateArrive,'dateArrive','d/M/yyyy'); return false;" title="calArrive.select(document.forms[0].dateArrive,'dateArrive','d/M/yyyy'); return false;" id="dateArrive" />
</p>
<div id="divArrive" style="position:absolute;visibility:hidden;background-color:white;layer-background-color:white;"></div>
<script type="text/javascript" id="jsDepart">
var now = new Date();
var yesterday = new Date(now);
yesterday.setDate(now.getDate() - 1);
var calDepart = new CalendarPopup("divDepart");
</script>
<b>Depart:</b>
<input type="text" name="dateDepart" value="" size="15" onClick="calDepart.select(document.forms[0].dateDepart,'dateDepart','d/M/yyyy'); return false;" title="calDepart.select(document.forms[0].dateDepart,'dateDepart','d/M/yyyy'); return false;" id="dateDepart" />
<input type="submit" value="Go" name="submit" />
</p>
<div id="divDepart" style="position:absolute;visibility:hidden;background-color:white;layer-background-color:white;"></div>
It's as simple as comparing the two dates, like so:
if (departureDate <= arrivalDate) {
alert ("You must make sure your departure is before your arrival!);
}
I suggest you run the above if statement when the user has entered there arrival date. So you'd use an onChange event on each of the inputs incase they go back and change there departure date!
This is all I want.
<form>
<input type="text" name="date" value="currentdate()">
.....</form>
Here I want to set default value as a current date.
I don't think you can do that.
But this would work:
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth()+1; //January is 0!
var yyyy = today.getFullYear();
if(dd<10) {
dd='0'+dd
}
if(mm<10) {
mm='0'+mm
}
today = mm+'/'+dd+'/'+yyyy;
document.getElementById('date').value=today ;
<form>
<input type="text" name="date" id="date">
</form>
I got this solution from Samuel's answer in this post.
You can set a default value to a input, in the DOM, using the document.ready function:
$( document ).ready(function() {
document.getElementById("myInput").defaultValue = myCustomFunction();});
While the question is really unclear and I would recommend an edit be done BY YOU, I will attempt it...
<form action="page.php" method="post">
<input type="text" name="date" value="Enter the date here!" /><br />
<input type="submit" name="submit" value="submit" />
</form>
.....
I dunno if this is what you want but if you want to pass it to a handler you'd need to Google form actions and change the first line's "action" attribute then delete the 'method="post"' part unless you want it.
(Note: The reason I feel like this is what you want is because you made the input a text area... Why would you do that if you want it to display the current date?)
I am trying to set the date to a specific one on page load so I'm trying this code:
<script type="text/javascript">
$(document).ready(function() {
var queryDate = new Date();
queryDate.setFullYear(2009,11,01);
$('#date').datepicker({defaultDate: queryDate});
$("input[type='submit']").click(function(e) {
e.preventDefault();
$.post("s.php", $("form").serializeArray(), function(message) {
window.location="v.php"
});
});
});
</script>
//The form part where is displays the datepicker:
<form action="#" method="POST">
<div data-role="fieldcontain">
<label for="date">Date:</label>
<input type="date" name="date" id="date" value="" />
<input type="submit" value="submit" />
</div>
</form>
The problem is that nothing's changing ... the default is still the current date :o/
Any ideas anyone please?
UPDATE: Tried this code:
var queryDate = new Date(2009,11,01);
$('#date').datepicker({defaultDate: queryDate});
$('#date').val(queryDate);
And the date is appearing in the input box but the calendar is not in the right month nor date ... Moving foward but still not working.
I'm not sure sure the suggested answer here is not working. As I have tested it display on the right month and year, but only not highlighted the date. This could be because the date format.
Try adding this code to have a default value on your date.
$('#date').val(queryDate);
Then you may see that the format is different with the date in date-picker. If you manage to set the right format with date-picker, you get the things you wanted.
Umm what if you tried this
new Date(year, month, day, hours, minutes, seconds, milliseconds)
var queryDate = new Date();
queryDate.setFullYear(2009,11,01);
$('#date').datepicker({defaultDate: queryDate});
Then the datepicker knows its a date object and how to handle it.
EDIT
Ok - all i did was copy the code exactly as you got it here several posts the same suggestion- and the code you edited. Added tags- inlcuded jquery and jquery ui..
I see no problem- the defuatl date is 2009.
</head>
<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
var queryDate = new Date();
queryDate.setFullYear(2009,11,01);
$('#date').datepicker({defaultDate: queryDate});
$("input[type='submit']").click(function(e) {
e.preventDefault();
$.post("s.php", $("form").serializeArray(), function(message) {
window.location="v.php"
});
});
});
</script>
</head>
<body>
//The form part where is displays the datepicker:
<form action="#" method="POST">
<div data-role="fieldcontain">
<label for="date">Date:</label>
<input type="date" name="date" id="date" value="" />
<input type="submit" value="submit" />
</div>
</form>
</body>
Result (no styles sheet attached)
Working example- tell me what is wrong
http://jsfiddle.net/ppumkin/nptgn/
Try this
var queryDate = new Date(2009,11,01);<br/>
$('#date').datepicker({defaultDate: queryDate});
I was having a similar problem, I solved it like this
$('.datepicker').datepicker({dateFormat: "yy-mm-dd", defaultDate: "+3m"} );
Try this
$('#mydate').val("2009-11-01");