I have a php page and these two inputs fields. My goal is to check if the second input is equal to first input (live) and make an error msg. The code i have so far is this:
<div class="input-group date" id="timepicker1"
data-target-input="nearest">
<input type="text"
class="form-control datetimepicker-input"
data-target="#timepicker1"
name="FirstDate" id="FirstDate" />
</div>
<div class="input-group date" id="timepicker2"
data-target-input="nearest">
<input type="text" onclick="CheckForErrors()"
class="form-control datetimepicker-input"
data-target="#timepicker2"
name="SecondDate" id="SecondDate" />
</div>
In the end of the php i have a Javascript checking:
<script type="text/javascript">
function CheckForErrors() {
// Check if First Time is equal with second Time
if (FirstDate == SecondDate) {
alert("Error MSG!");
}
return false;
}
</script>
Its not working, as u understand. Any help ? PS. I'm a begginer so please be patient :D
You can get input values by document.querySelector({selector}).value . So your code should be:
<script type="text/javascript">
function CheckForErrors() {
// Check if First Time is equal with second Time
if (document.querySelector("#FirsDate").value == document.querySelector("#SecondDate").value) {
alert("Error MSG!");
return true;
}
return false;
}
</script>
Also you are doing your check and if its true you display error message. But your function always returns false. Add return true inside your check to stop further execution.
I changed a little bit your code. First i remove the Tag inline assign of an eventListener (bad practice). Then i check on every keyup the fields. It works on both directions. Means if you start typing in the second field, it will check immediately with field one. and vice versa.
box = document.getElementById('doubleChecker');
box.addEventListener('keyup', (e) => {
const i1 = document.getElementById('timepicker1').children[0]
const i2 = document.getElementById('timepicker2').children[0]
console.log(i1.value , i2.value)
if (i1.value == i2.value) {
alert("Error MSG!");
return false;
}
});<div id="doubleChecker">
<div class="input-group date" id="timepicker1"
data-target-input="nearest">
<input type="text"
class="form-control datetimepicker-input"
data-target="#timepicker1"
name="FirstDate" id="FirstDate" />
</div>
<div class="input-group date" id="timepicker2"
data-target-input="nearest">
<input type="text"
class="form-control datetimepicker-input"
data-target="#timepicker2"
name="SecondDate" id="SecondDate" />
</div>
</div>