I'm having two text boxes to store two dates. I want to call a javascript function upon entering date into the first and second textbox. That is as soonas I enter the date in second box I want to call the javascript function. I tried onchange but it is not calling the javascript function. Can you suggest me the right event to call the javascript function? Thanks in advance. I'm using smarty. My code is as follows:
<label>Created Date From</label>
<div class="form-element">
<input type="text" class="cal fl-left" name="from_date" id="frmDate" value="{if $data.from_date}{$data.from_date}{else}{/if}" maxlength="10" />
</div>
<label>Created Date To</label>
<div class="form-element">
<input type="text" class="cal fl-left" name="to_date" id="toDate" value="{if $to_date}{$to_date}{else}{/if}" maxlength="10" onchange="get_tests_by_date(); return false;"/>
</div>
Javascript code is as follows:
function get_tests_by_date() {
document.location.href = "view_tests.php?test_category_id="+document.getElementById('test_category_id').value+"&test_mode="+document.getElementById('test_mode').value+"&test_type="+document.getElementById('test_type').value+"&package_type="+document.getElementById('package_type').value+"&created_date_from="+document.getElementById('frmDate').value+"&created_date_to="+document.getElementById('toDate').value+"&page=1";
}
This is what i ended up doing years ago, no jquery in this code:
HTML:
<input name="FormStartDate" value="" maxlength="10" onkeydown="KeyDateNumCheck()"/>
<input name="FormEndDate" value="" maxlength="10" onkeydown="KeyDateNumCheck()"/>
JS:
//do not allow to input anything except the numeric characters, dashes, or slashes
function KeyDateNumCheck()
{
var iKeyCode = event.keyCode;
if ( (iKeyCode != 109) && (iKeyCode != 189) && (iKeyCode != 111) && (iKeyCode != 191) &&
( ((iKeyCode > 57)&&(iKeyCode < 96)) || (iKeyCode > 105) || (iKeyCode == 32)) )
event.returnValue = false;
}
Related
I am trying to do from date, to date validation (todate > fromdate).
please check my html code
From Date <input type="text" placeholder="From Date" id="fromDate" min-view="1"
ng-change="getFromMonth(newcashbenifit.toDate, newcashbenifit.fromDate);"
name="cbFromdate" ng-model="newcashbenifit.fromDate" autoclose="true" bs-datepicker />
To Date<input type="text" placeholder="To Date" id="toDate" min-view="1"
ng-change="getToMonth(newcashbenifit.toDate, newcashbenifit.fromDate);"
class="form-control" name="cbTodate" autocomplete="off"
ng-model="newcashbenifit.toDate" bs-datepicker />
i am using below functions to validate this. please check below functions
$scope.getToMonth = function (selectedToMonth,selectedFromMonth){
if(selectedFromMonth > selectedToMonth ){
$scope.cashBenefitForm.cbTodate.$setValidity("message", false)
}else{
$scope.cashBenefitForm.cbTodate.$setValidity("message", true)
}
}
$scope.getFromMonth = function (selectedToMonth,selectedFromMonth){
if(selectedFromMonth > selectedToMonth ){
$scope.cashBenefitForm.cbFromdate.$setValidity("message2", false)
}else{
$scope.cashBenefitForm.cbFromdate.$setValidity("message2", true)
}
}
Validation is working well. please check below image.
validation working correctly. Now i changed From date as '04/2020'. in the occasion, to date validation still appear. it should remove, because now todate > fromdate. check attached image
how i do this validation correctly. ?
I have this HTML text input as below
<label style="color: white;" for="id">ID:</label>
<input type="text" onkeypress="return event.charCode >= 48 && event.charCode <= 57" maxlength="9" name="id" id="id">
Now, in the onkeypress I successfully added so only numbers can be entered.
but I have a JavaScript function called:
function checkID() {
and I want that additionally, after every number entered it will call this function. But I just can't get it to do them both (only allow numbers and call the function).
Thanks in advance! Itay.
You can enter the number validation to the checkID function.
<input type="text" onkeypress="return checkID(event,this)" maxlength="9" name="id" id="id">
function checkID(e,elem) {
if !(e.charCode >= 48 && e.charCode <= 57)
return false;
// continue checking the id...
}
Alternatively to attaching your function via html, you can add it using purely javascript:
document.querySelector("your-html-selector").addEventListener("keypress", function(event) {
// all your code here
});
This keeps your html clean and your code easy to read, especially if you're trying to execute multiple functions and such on an event occurring.
I'm using an input type="number"to allow users to put a duration time on a post. The format is days hours:minutes:seconds as the backend provides the format.
What I need to do is to give that format to the input. Is this possible?
You can use input type text with pattern:
<form>
<input type="text" pattern="^\d{1,3} \d{1,2}:\d{1,2}:\d{1,2}$" placeholder="days hours:minutes:seconds"/>
<input type="submit"/>
</form>
It will validate the text using 1-3 digits for days and 1-2 for hours minutes and seconds.
You can also restrict typing of no digits and colons and space using jQuery:
$(function() {
$('input').keydown(function(e) {
console.log(e.which);
if (!((e.which >= 48 && e.which <= 57) || (e.which == 186 && e.shiftKey) || e.which == 32)) {
return false;
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="text" pattern="^\d{1,3} \d{1,2}:\d{1,2}:\d{1,2}$" placeholder="days hours:minutes:seconds"/>
<input type="submit"/>
</form>
If you have jQuery, then take a look at:
http://jonthornton.github.io/jquery-timepicker/
you can use also
<input type="datetime">
I have a form which for now is only accepting integers, how can I have a form which accept decimals?
Also how can I activate a keyboard in HTML that has a keypad and a decimal point?
My JavaScript code for now is this:
var peso = parseInt(form.elements["x"].valueAsNumber);
var eta = parseInt(form.elements["y"].valueAsNumber);
var creatinina = parseInt(form.elements["c"].valueAsNumber);
and for the variables in HTML form, this:
<p align="center" style="font-size:20px">Peso (kg)</p>
<input name="x" type="number" value="70" style="width:100%;height:40px;font-size:15px;" pattern="\d*"/>
The way to handle it is to use an <input type="text"> and add a proper javascript-match.
<input type="text" name="amount" id="amount" maxlength="6" autocomplete="off"/></span>
After any change in this field happened, you could check against a regular expression like that one:
var ok = /^\d*\.?\d*$/.test(input);
If you think the input is correct, everything is fine. If not, you can print a message that this box should accept a decimal.
try this one to make you textbox able to accept only Numbers and decimals.
<HTML>
<HEAD>
<SCRIPT language=Javascript>
<!--
function isNumberKey(evt)
{
var charCode = (evt.which) ? evt.which : event.keyCode;
if (charCode != 46 && charCode > 31
&& (charCode < 48 || charCode > 57))
return false;
return true;
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<INPUT name="x" style="width:100%;height:40px;font-size:15px;" id="txtChar" onkeypress="return isNumberKey(event)"
type="text">
</BODY>
</HTML>
In my code, I have the following javascript code block in the header section
function validateForm(bid) {
switch (bid) {
case "submitIDSearch":
alert("submitIDSearch");
return false;
case "submitNameSearch":
alert("submitNameSearch");
return false;
}
}
function fKeyDown(e) {
var kc = window.event ? window.event.keyCode : e.which;
if (kc == 13) {
document.getElementById('submitNameSearch').click();
}
}
Then I have the following HTML code block
<form name="checkAbsenceForm" method="post" action="absenceReport.htm" onsubmit="return validateForm(this.submited)">
<label class="q">ID * <input id="searchRUID" name="searchID" maxlength="9" /></label>
<input id="submitIDSearch" type="submit" value="Search ID" onclick="this.form.submited = this.id;" />
<hr />
<label class="q">First Name <input id="searchFirstName" name="searchFirstName" maxlength="23" onKeyDown="javascript:fKeyDown(event);"/></label>
<br />
<label class="q">Last Name * <input id="searchLastName" name="searchLastName" maxlength="23" onKeyDown="javascript:fKeyDown(event);" /></label>
<input id="submitNameSearch" type="submit" value="Search Name" onclick="this.form.submited = this.id;" />
</form>
What happened was that when I press Enter key in the searchLastName input text box, both alert message box pops up. One showing submitNameSearch and the other showing submitIDSearch. submitNameSearch is the desired event, but submitIDSearch is not, I think it is somehow triggered by default.
May I ask if there's a way to get rid of the submitIDSearch event when I press Enter key in the searchLastName input text box?
Thanks a lot!
When you press Enter in a form, the form is submitted. That's the reason of the second call to validateForm.
Two solutions :
1) Remove the onKeyDown="javascript:fKeyDown(event);" to have the normal validation defined on onsubmit=... apply.
2) In fKeyDown, add e.preventDefault(); to prevent the default handling of the key event :
function fKeyDown(e) {
var kc = window.event ? window.event.keyCode : e.which;
if (kc == 13) {
document.getElementById('submitNameSearch').click();
e.preventDefault();
}
}
But if you really do just this in fKeyDown, solution 1 is enough.