I'm working on a form I need. One specific aspect needs to be that when someone select the current date in the <p><label>Date of Incident: <input type="text" id="thedate" name="event_date" class="datepicker" onkeyup="checkDate()" placeholder="DD-MM-YYYY" required="required"/></label></p> that the time aspect must be before the previous time. However it has been sometime since I have worked on it and have forgotten where I was or how to proceed.
The last thing I remember is writing down my in my .js about the isTimeValid variable. If anyone could assist me in the matter, I would be greatly appreciative. I will add the code at the bottom.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="../css/Form1.css">
<script src="../js/jquery-3.2.1.min.js"></script>
<script src="../js/jquery-ui.min.js"></script>
<script type="text/javascript" src="../js/Form2.js"> </script>
<script>
$( function() {
$( "#thedate" ).datepicker({ minDate: 0, maxDate: "+1m +10d" });
} );
</script>
<script type="text/javascript">
$(function() {
$("#thedate").datepicker({minDate: 0});
});
</script>
<title>Personal Details</title>
</head>
<body>
<div id="mydiv2">
<section>
<div style="text-align:center;">
<form name="myFirstForm" autocomplete="on">
<p>
<meter min="0" low="20" high="60" optimum="90" max="100"
value="66">Space left: </meter> 66%
</p>
<fieldset style =" margin-left:27px; padding-top: 0.35em; padding-bottom:
0.625em; padding-left: 0.75em; width:70%;">
<legend> Enter Tip Details</legend>
<div id="todaysDate">
<p><label>Date of Incident: <input type="text" id="thedate"
name="event_date" class="datepicker" onkeyup="checkDate()" placeholder="DD-
MM-YYYY" required="required" /> </label></p>
<div id="datewarn"></div>
</div>
<div id="mydiv">
<p><label>Time of Incident: <input type="text" id="chosenTime" name="time"
placeholder="07:35" required="required" /> </label></p>
</div>
<div id="mydiv">
<p>Click the button for the current time.</p>
<button onclick="currentDate()">Try it</button>
<p id="currTime"></p>
<script>
function addZero(i) {
if (i < 10) {
i = "0" + i;
}
return i;
}
function currentDate() {
var d = new Date();
var x = document.getElementById("currTime");
var h = addZero(d.getHours());
var m = addZero(d.getMinutes());
x.innerHTML = h + ":" + m;
}
function checkTime() {
var v = document.getElementById("chosenTime").value
if (currTime > v) {
resultDiv.style.color = "red";
} else {
resultDiv.style.color = "green";
}
}
</script>
</div>
<div id="mydiv">
<p><label>Tip Details: <textarea cols="20" rows="5" placeholder="Type your
content
here"></textarea>
</label></p>
</div>
<div id="mydiv">
<p><label>Attach Supporting File: <form action="http://ift.tt/2gzD21w
bin/run/~jkorpela/echo.cgi" enctype="multipart/form-data" method="post">
<p>
<input type="file" name="datafile" size="40">
</p>
</form>
</div>
<div id="mydiv">
<p><label>Urgency: <input type="range" min="0" max="10" value="0" step="1"
name="10 is most urgent;" onchange="showValue(this.value)" />
<span id="range">0</span>
<p>10 is most urgent.</p>
<script type="text/javascript">
function showValue(newValue)
{
document.getElementById("range").innerHTML=newValue;
}
</script>
<span id="passwordError" style="display: none;"></span>
</p>
</div>
<div id="mydiv">
</div>
</fieldset>
<fieldset style =" margin-left:-20px; padding-top: 0.35em; padding-bottom:
0.625em; padding-left: 0.75em;">
<legend>Communication Preferences</legend>
<div id="mydiv">
<br />
<label><input type="checkbox" name="contactTip" value="" /> May we contact
you about this tip?</label> <br />
<br />
</div>
<fieldset style =" margin-left:20px; padding-top: 0.35em; padding-bottom:
0.625em; padding-left: 0.75em;">
<legend>Preferred Contact Method</legend>
<div id="mydiv">
<br />
<label><input type="radio" name="r1" />Phone:</label> <br />
<br />
</div>
<div id="mydiv">
<br />
<label><input type="radio" name="r1" />Email:</label> <br />
<br />
</div>
</fieldset>
<br />
<p>
<meter min="0" low="20" high="60" optimum="90" max="100"
value="66"> </meter> Staff in the office
</p>
<br />
<input type="button" onsubmit="return checkSubmit()"value="Continue"
onclick="window.location.href='Form3.html'">
</FORM>
</div>
</form>
</div>
</section>
</body>
</html>
Javascript
function isFutureDate(idate) {
var today = new Date().getTime(),
idate = idate.split("/");
idate = new Date(idate[2], idate[1] - 1, idate[0]).getTime();
return (today - idate) < 0 ? true : false;
}
function checkDate() {
var idate = document.getElementById("txt_req_createdon_new");
resultDiv = document.getElementById("Valid");
dateReg = /(0[1-9]|[12][0-9]|3[01])[\/](0[1-9]|1[012])[\/]201[4-9]|20[2-9]
[0-9]/;
if (dateReg.test(idate.value)) {
if (isFutureDate(idate.value)) {
resultDiv.innerHTML = "Entered date is a future date";
resultDiv.style.color = "red";
} else {
resultDiv.innerHTML = "It's a valid date";
resultDiv.style.color = "green";
}
} else {
resultDiv.innerHTML = "Invalid date!";
resultDiv.style.color = "red";
}
}
function getCurrentTime() {
var d = new Date();
var h = (d.getHours()<10?'0':'') + d.getHours();
var m = (d.getMinutes()<10?'0':'') + d.getMinutes();
return h + ':' + m;
}
function currentTime(i) {
var d = new Date();
var h = (d.getHours()<10?'0':'') + d.getHours();
var m = (d.getMinutes()<10?'0':'') + d.getMinutes();
i.value = h + ':' + m;
}
function validateTimeInput(){
var user_input = $("#chosenTime").val();
console.log("User has entered " + user_input + " into the time field.");
var user_input_hrs = user_input.split(":")[0];
var user_input_mins = user_input.split(":")[1];
console.log("The hours are " + user_input_hrs);
console.log("The minutes are " + user_input_mins);
var isTimeValid = true;
var curTime = getCurrentTime();
var cur_time_hrs = curTime.split(":")[0];
var cur_time_mins = curTime.split(":")[1];
console.log("The current time is: " + curTime);
console.log("The hours are " + cur_time_hrs);
console.log("The minutes are " + cur_time_mins);
//todo: create conditional logic here, with result being "isTimeValid
if(isTimeValid){
document.getElementById("chosenTime").className = "valid";
}
{
document.getElementById("chosenTime").className = "invalid";
}
}
$(document).ready(function(){
//setup datepicker when document loads completely
$('#datepicker').datepicker();
//setup time detection code when document loads completely
$("input[name=time]").change(validateTimeInput);
});
Aucun commentaire:
Enregistrer un commentaire