I want to get the number of days a person worked according to his in-time and out-time. And it should automatically calculate on day field when it's selected from the table row and it's not working with my js code
HTML
<fieldset> In-Time:
<input class="input" type="text" name="InTime" id="intime" value="" />
</fieldset>
<fieldset>Out-Time:
<input class="input" type="text" name="OutTime" id="outtime" value="" />
</fieldset>
<fieldset> Day:
<input class="input" type="text" id="day" name="Day" value="" />
</fieldset>
JQUERY
$(document).ready(function (){
$('#intime').on('input', function() {
if (intime == 08:00:00 && outtime >= 18:00:00) {
day == 1;
}else if (intime == 08:00:00 && outtime == 12:30:00) {
day == 0.5;
}else (intime == 12:30:00 && outtime >= 18:00:00) {
day == 0.5;
};
});
$('#outtime').on('input', function() {
if (intime == 08:00:00 && outtime >= 18:00:00) {
day == 1;
}else if (intime == 08:00:00 && outtime == 12:30:00) {
day == 0.5;
}else (intime == 12:30:00 && outtime >= 18:00:00) {
day == 0.5;
};
});
});
You can use moment.js to parse time.
$(function(){
$('#intime,#outtime').on('input', function() {
// declare variables
var intime = new moment($("#intime").val(), 'HH:mm:ss'); // get value of intime
var outtime= new moment($("#outtime").val(), 'HH:mm:ss');
var startTime = new moment("08:00:00", 'HH:mm:ss');
var halfDay = new moment("12:30:00", 'HH:mm:ss');
var wholeDay = new moment("18:00:00", 'HH:mm:ss');
var day = 0; // declare day as 0
if (moment(intime).hour() == 8 && moment(outtime).hour() >= 18) {
day = 1;
}
else if (moment(intime).hour() == 8 && (moment(outtime).hour() == 12 && moment(outtime).minute() == 30)) {
day = 0.5;
}
else if ((moment(intime).hour() == 12 && moment(intime).minute() == 30) && moment(outtime).hour() >= moment(wholeDay).hour()) {
day = 0.5;
}
$("#day").val(day);
/*console.log("imtime", moment(intime).hour());
console.log("intime", moment(intime).minute());
console.log("outtime",moment(outtime).hour());
console.log("outtime",moment(outtime).minute());
console.log("wholeDay", moment(wholeDay).hour());*/
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<fieldset> In-Time:
<input class="input" type="text" name="InTime" id="intime" value="" />
</fieldset>
<fieldset>Out-Time:
<input class="input" type="text" name="OutTime" id="outtime" value="" />
</fieldset>
<fieldset> Day:
<input class="input" type="text" id="day" name="Day" value="" />
</fieldset>
Write your script as below:-
$(document).ready(function (){
$('#intime,#outtime').on('input', function() {
// declare variables
var intime = $("#intime").val() || 0;; // get value of intime
var outtime= $("#outtime").val() || 0;; // get value of outtime
var day = 0; // declare day as 0
if (intime == 08:00:00 && outtime >= 18:00:00) {
day == 1;
}else if (intime == 08:00:00 && outtime == 12:30:00) {
day == 0.5;
}else (intime == 12:30:00 && outtime >= 18:00:00) {
day == 0.5;
};
});
});
Get the value of intime and outtime. and check the syntax errors in your code there are multiple.
<script>
$(document).ready(function (){
$('#intime').on('input', function() {
var intime = $("#intime").val();
var outtime= $("#outtime").val();
if (intime == '08:00:00' && outtime >= '18:00:00') {
day == 1;
}else if (intime == '08:00:00' && outtime == '12:30:00') {
day == 0.5;
}else if(intime == '12:30:00' && outtime >= '18:00:00') {
day == 0.5;
}
});
$(document).ready(function (){
$('#outtime').on('input', function() {
var intime = $("#intime").val();
var outtime= $("#outtime").val();
if (intime == '08:00:00' && outtime >= '18:00:00') {
day == 1;
}else if (intime == '08:00:00' && outtime == '12:30:00') {
day == 0.5;
}else if(intime == '12:30:00' && outtime >= '18:00:00') {
day == 0.5;
}
});
});
});
</script>
Related
I'm trying to get user's birth info and come up with a name for them according to their day of birth after they click a confirm button .The program also checks if the user has entered a valid date and month , but i'm not getting any output after filling the inputs.
Here is my Html code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="CSS/bootstrap.css" media="screen" />
<link rel="stylesheet" type="text/css" href="CS S/styles.css" media="screen" />
<title>Akan names</title>
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>Akan Name</h1>
<div class="card">
<div class="card-body">
<label for="usr">Date</label>
<input type="text" class="form-control" id="date">
</div>
<div class="card">
<div class="card-body">
<label for="usr">Month</label>
<input type="text" class="form-control" id="month">
</div>
<div class="card">
<div class="card-body">
<label for="usr">Year</label>
<input type="text" class="form-control" id="year">
</div>
<div class="card">
<div class="card-body">
<label for="usr">Gender</label>
<input type="text" class="form-control" id="gender">
</div>
<div class="card">
<div class="card-body">
<button onclick="calc()" id="btnConfirm" type="button">Check</button>
</div>
</div>
<script src = "JS/script.js"></script>
</body>
</html>
Here is my Js code :
var date;
var month;
var year;
var gender;
var name;
function validate() {
date = document.getElementById('date').value;
month = document.getElementById('month').value;
year = document.getElementById('year').value;
gender = document.getElementById('gender').value;
if (date <= 0 || date > 31) {
alert("Enter a valid date");
};
if (month <= 0 || month > 12) {
alert("Enter a valid month");
};
}
function calc() {
validate();
date = document.getElementById('date').value;
month = document.getElementById('month').value;
year = document.getElementById('year').value;
gender = document.getElementById('gender').value;
var cc = year.charAt(0) + year.charAt(1);
var yy = year.charAt(2) + year.charAt(3);
var day = (((cc / 4) - 2 * cc - 1) + ((5 * yy / 4)) + ((26 * (month + 1) / 10)) + date) % 7;
if (day == 1 && gender == "male") {
alert("Sunday : Kwasi");
} else if (day == 2 && gender == "male") {
alert("Monday : Kwadwo");
} else if (day == 3 && gender == "male") {
alert("Tuesday : Kwabena");
} else if (day == 4 && gender == "male") {
alert("Wednesday : Kwaku");
} else if (day == 5 && gender == "male") {
alert("Thursday : Yaw");
} else if (day == 6 && gender == "male") {
alert("Friday : Kofi");
} else if (day == 7 && gender == "male") {
alert("Saturday : Kwame");
} else if (day == 1 && gender == "female") {
alert("Sunday : Akosua");
} else if (day == 2 && gender == "female") {
alert("Monday : Adwoa");
} else if (day == 3 && gender == "female") {
alert("Tuesday : Abenaa");
} else if (day == 4 && gender == "female") {
alert("Wednesday : Akua");
} else if (day == 5 && gender == "female") {
alert("Thursday : Yaa");
} else if (day == 6 && gender == "female") {
alert("Friday : Afua");
} else if (day == 7 && gender == "female") {
alert("Saturday : Ama");
};
}
It's because the day value is not rounde, so it does not match any of the value you are listing. You could discover it with a simple console.log(day).
Use Math.floor() would do the trick:
var date;
var month;
var year;
var gender;
var name;
function validate() {
date = document.getElementById('date').value;
month = document.getElementById('month').value;
year = document.getElementById('year').value;
gender = document.getElementById('gender').value;
if (date <= 0 || date > 31) {
alert("Enter a valid date");
};
if (month <= 0 || month > 12) {
alert("Enter a valid month");
};
}
function calc() {
validate();
date = document.getElementById('date').value;
month = document.getElementById('month').value;
year = document.getElementById('year').value;
gender = document.getElementById('gender').value;
var cc = year.charAt(0) + year.charAt(1);
var yy = year.charAt(2) + year.charAt(3);
var day = Math.floor(((((cc / 4) - 2 * cc - 1) + ((5 * yy / 4)) + ((26 * (month + 1) / 10)) + date)) % 7);
console.log(day);
if (day == 1 && gender == "male") {
alert("Sunday : Kwasi");
} else if (day == 2 && gender == "male") {
alert("Monday : Kwadwo");
} else if (day == 3 && gender == "male") {
alert("Tuesday : Kwabena");
} else if (day == 4 && gender == "male") {
alert("Wednesday : Kwaku");
} else if (day == 5 && gender == "male") {
alert("Thursday : Yaw");
} else if (day == 6 && gender == "male") {
alert("Friday : Kofi");
} else if (day == 7 && gender == "male") {
alert("Saturday : Kwame");
} else if (day == 1 && gender == "female") {
alert("Sunday : Akosua");
} else if (day == 2 && gender == "female") {
alert("Monday : Adwoa");
} else if (day == 3 && gender == "female") {
alert("Tuesday : Abenaa");
} else if (day == 4 && gender == "female") {
alert("Wednesday : Akua");
} else if (day == 5 && gender == "female") {
alert("Thursday : Yaa");
} else if (day == 6 && gender == "female") {
alert("Friday : Afua");
} else if (day == 7 && gender == "female") {
alert("Saturday : Ama");
};
}
<body>
<div class="container">
<div class="jumbotron">
<h1>Akan Name</h1>
<div class="card">
<div class="card-body">
<label for="usr">Date</label>
<input type="text" class="form-control" id="date">
</div>
<div class="card">
<div class="card-body">
<label for="usr">Month</label>
<input type="text" class="form-control" id="month">
</div>
<div class="card">
<div class="card-body">
<label for="usr">Year</label>
<input type="text" class="form-control" id="year">
</div>
<div class="card">
<div class="card-body">
<label for="usr">Gender</label>
<input type="text" class="form-control" id="gender">
</div>
<div class="card">
<div class="card-body">
<button onclick="calc()" id="btnConfirm" type="button">Check</button>
</div>
</div>
</body>
I'm trying to make a mask react date dd/mm/yyyy to a custom date input.
If i press the keys slow, the mask is setted correct dd/mm/yyyy, but supposing i press the numbers rapid, my mask is breaking
This is my component:
<DateInput
name="date"
placeholder="Data"
value={this.props.data}
dateFormat="DD/MM/YYYY"
onChange={this.props.changeDataTarefa}
animation="none"
onKeyUp={() => this.props.changeDataTarefaMask(this.fixDatePattern(this.props.data))}/>
this is my functions:
fixDatePattern(currDate) {
var currentDate = currDate;
if (currentDate){
var currentLength = currentDate.length;
var lastNumberEntered = currentDate[currentLength - 1];
}
if (!this.isNumber(lastNumberEntered) && currentDate) {
return currentDate.substring(0, currentLength - 1);
}
if (currentLength > 10) {
return currentDate.substring(0, 10);
}
let dateCountTracker = 0
if (currentLength == 1 && currentDate > 1) {
var transformedDate = "0" + currentDate + '/';
dateCountTracker = 2;
currentLength = transformedDate.length;
return transformedDate;
} else if (currentLength == 4 && currentDate[3] > 3) {
let transformedDate = currentDate.substring(0, 3) + "0" + currentDate[3] + '/';
dateCountTracker = 5;
currentLength = transformedDate.length;
return transformedDate;
} else if (currentLength == 2 && (dateCountTracker != 2 && dateCountTracker != 3)) {
dateCountTracker = currentLength;
return currentDate + '/';
} else if (currentLength == 5 && (dateCountTracker != 5 && dateCountTracker != 6)) {
dateCountTracker = currentLength;
return currentDate + '/';
}
dateCountTracker = currentLength;
return currentDate;
}
isNumber(n) {
return !isNaN(parseFloat(n)) && isFinite(n);
}
Instead of using keyup, use keypress event on input. And you could also use react input mask plugin for same.
You can use below code for key press event and please check working stackblitz demo.
render() {
return (
<div>
<span>Date : </span>
<input type="text" maxLength="10" placeHolder="dd/mm/yyyy" onKeyPress={this.onKeyPress}/>
</div>
)
}
onKeyPress(e){
let input = e.target;
if(e.charCode < 47 || e.charCode > 57) {
e.preventDefault();
}
var len = input.value.length;
if(len !== 1 || len !== 3) {
if(e.charCode == 47) {
e.preventDefault();
}
}
if(len === 2) {
input.value += '/';
}
if(len === 5) {
input.value += '/';
}
}
You could use below react input mask plugins to achieve requirement.
imaskjs and react-input-mask
I'm trying to validate a Birthday date but I can only validate if all filled in.
If I just choose date, there is no alert ("day must be chosen / month must be chosen").
I can't validate a date...
How to run this validation?
function isbday(day,month,year) {
var mth = month;
var dy = day;
var yr = year;
if((mth < 1) || (mth > 12));
else if((dy < 1) || (dy > 31));
else if(((mth == 4) || (mth == 6) || (mth == 9) || (mth == 11)) && (dy > 30));
else if((mth == 2) && (((yr % 400) == 0) || ((yr % 4) == 0)) && ((yr % 100) != 0) && (day > 29));
else if((mth == 2) && ((yr % 100) == 0) && (dy > 29));
else if((mth == 2) && (dy > 28)) valid = false;
return false;
alert("Birthdate must be filled");
}
function validate(){
var day = document.getElementsByName("xday")[0].value;
var month = document.getElementsByName("xmonth")[0].value;
var year = document.getElementsByName("xyear")[0].value;
if(day,month,year == null || day,month,year == ""){
alert("Birthdate must be filled");
}else if(birthdate.match(isbday(birthdate))){
alert("Birthdate must be filled");
}else
{
alert("Birthdate success");
}
}
<tr>
<td >Birthdate </td>
<td><select name="xday">
<option value="">Date</option>
<script>
var myDate = new Date();
var year = myDate.getFullYear();
for(var i = 1; i < 32; i++){
document.write('<option value="'+i+'">'+i+'</option>');
}
</script>
</select>
<select name="xmonth">
<option value="">Month</option>
<script>
var myDate = new Date();
var year = myDate.getFullYear();
for(var i = 1; i < 13; i++){
document.write('<option value="'+i+'">'+i+'</option>');
}
</script>
</select>
<select name="xyear">
<option value="">Year</option>
<script>
var myDate = new Date();
var year = myDate.getFullYear();
for(var i = 1950; i < year; i++){
document.write('<option value="'+i+'">'+i+'</option>');
}
</script>
</select>
</td>
</tr>
<tr>
<td>
<input type="button" name="btnRegis" onClick="validate()" onsub value="Register"/>
</td>
</tr>
I think the best way is to change the day select according to the month that was selected but if you still want to do it the same way:
Change a little bit your valid function
Each if statement return false if not valid
function isVaild(day, month, year) {
var mth = month;
var dy = day;
var yr = year;
//Checks
if ((mth < 1) || (mth > 12)) return false;
else if ((dy < 1) || (dy > 31)) return false;
else if (((mth == 4) || (mth == 6) || (mth == 9) || (mth == 11)) && (dy > 30)) return false;
else if ((mth == 2) && (((yr % 400) == 0) || ((yr % 4) == 0)) && ((yr % 100) != 0) && (day > 29)) return false;
else if ((mth == 2) && ((yr % 100) == 0) && (dy > 29)) return false;
else if ((mth == 2) && (dy > 28)) return false;
//Pass all checks
return true;
}
function validate() {
var day = document.getElementsByName("xday")[0].value;
var month = document.getElementsByName("xmonth")[0].value;
var year = document.getElementsByName("xyear")[0].value;
//if one is empty
if (day, month, year === null || day, month, year === "") {
alert("Birthdate must be filled\nDay, Month, Year is empty");
}
//if not a vaild date
else if (!isVaild(day, month, year)) {
alert("Birthdate not vaild");
}
//All good :)
else {
alert("Birthdate success");
}
}
Working example here
I want a to have a text box which accepts HH:MM(hours/minutes) format. So, when the user enters the value for HH, it should automatically insert a colon after that and let the user enter value for MM.
I do not want to use any plugin for this.
How do i do this?
thanks
HTML:
<input class="time" type="text"/><br/>
<input class="time" type="text"/><br/>
<input class="time" type="text"/>
JS:
var time = document.getElementsByClassName('time'); //Get all elements with class "time"
for (var i = 0; i < time.length; i++) { //Loop trough elements
time[i].addEventListener('keyup', function (e) {; //Add event listener to every element
var reg = /[0-9]/;
if (this.value.length == 2 && reg.test(this.value)) this.value = this.value + ":"; //Add colon if string length > 2 and string is a number
if (this.value.length > 5) this.value = this.value.substr(0, this.value.length - 1); //Delete the last digit if string length > 5
});
};
Fiddle
If you have multiple inputs
<input class="test-input" placeholder="hh:mm" value=""/>
<input class="test-input" placeholder="hh:mm" value=""/>
<input class="test-input" placeholder="hh:mm" value=""/>
<input class="test-input" placeholder="hh:mm" value=""/>
<input class="test-input" placeholder="hh:mm" value=""/>
Jquery Version:
$(document).on('ready',function(){
$('.test-input').on('keyup',keyUpHandler);
});
function keyUpHandler(e){
var element = this;
var key = e.keyCode || e.which;
insertTimingColor(element,key)
}
function insertTimingColor(element,key){
var inputValue = element.value;
if(element.value.trim().length == 2 && key !== 8){
element.value = element.value + ':';
}
}
fiddle - jquery
Vanilla JS version
document.body.addEventListener('keyup',keyUpHandler,false);
function keyUpHandler(e){
var evt = e || window.event;
var target = evt.target || evt.srcElement;
var key = e.keyCode || e.which;
//check if it is our required input with class test input
if(target.className.indexOf('test-input') > -1){
insertTimingColor(target,key)
}
}
function insertTimingColor(element,key){
var inputValue = element.value;
if(element.value.trim().length == 2 && key !== 8){
element.value = element.value + ':';
}
}
fiddle - js
$('id or class or parent id').on('keypress','class or id', function (e){
var key = e.keyCode || e.which;
if(this.value.trim().length == 2 && key !==8 && this.value.search
(':') != -1)
this.value = this.value + ':';
});
$('id or class or parent id').on('keyup click','class or id', function (e){
if(this.value.length >= 3)
this.selectionStart = this.selectionEnd = this.value.length;
});
$('id or class or parent id').on('paste','class or id', function (e){
e.preventDefault();
});
Try it.
jQuery("#textboxId").keypress(function(){
if(jQuery("#textboxId").val().length)==2{
var value=jQuery("#textboxId").val();
jQuery("#textboxId").val(value+":");
}
});
Try the following code:
HTML:
<input type="text" id = "timeInput" maxlength = 14>
Javascript:
$("#timeInput").focusin(function (evt) {
$(this).keypress(function () {
content=$(this).val();
content1 = content.replace(/\:/g, '');
length=content1.length;
if(((length % 2) == 0) && length < 10 && length > 1){
$('#timeInput').val($('#timeInput').val() + ':');
}
});
});
DEMO
$(document).ready(function() {
var global_flag = true;
$("#texboxId").on('keyup', function() {
var cur_val = $(this).val();
var cur_length = cur_val.length;
var flag = true;
if (cur_length > 5) {
cur_val = cur_val.substring(0, 5);
$(this).val(cur_val);
} else {
if (cur_length > 2) {
global_flag = false;
} else if (global_flag == false && cur_length < 2) {
global_flag = true;
}
if (cur_length == 2 && global_flag) {
if (window.event.keyCode != 8) {
$(this).val(cur_val + ":");
}
}
if (cur_length == 5) {
if (cur_val.match(/^(([0-1][0-9]){0,2}|(2[0-3]){0,2}){0,2}:([0-5][0-9]){0,2}$/)) {} else {
$(this).val("");
$(this).attr('placeholder', "HH:MM");
}
}
}
});
});
The code below should do the trick for you. Now all you will need to do is add some validation, like only allowing numeric key press values.
<input id="time-input" placeholder="hh:mm" type="text">
$(document).ready(function(){
$("#time-input").keypress(function(){
$this = $(this);
if($this.val().length == 2){
$this.val($this.val() + ":");
}
});
});
http://jsfiddle.net/g9nahpax/
I have this id validation field, i just need to know how i can make the validation and the keydown and keyup functions work on cloned inputs. also inserted data is carrying over to the duplicate fields.
js fiddle- http://www.jsfiddle.net/dawidvdh/xRh9v/
Heres the js:
$(document).ready(function() {
idAmount = [0,1,2,3,4,5,6,7,8,9,10,12,13];
var idinc =1;
var id_val;
jQuery(idAmount).each(function() {
var index = "id"+idinc++;
var id_input = "<input class='id' id="+'"'+index+'"'+" "+" maxlength='1' />";
id_val = $(this).attr('value');
jQuery(id_input).appendTo('#id');
});
$("#clone").click(function () {
var clonedObj=$('#id').clone().insertAfter("#id");
clonedObj.find('.id').each(function(){
this.id='id' + idinc++;
});
});
function Validate() {
jQuery('#error p').remove();
var id_val = '';
$('.id').each(function(){ id_val+=($(this).val());});
var idNumber = id_val;
console.log(id_val);
var correct = true;
if (idNumber.length != 13 || !isNumber(idNumber)) {
correct = false;
}
var tempDate = new Date(idNumber.substring(0, 2), idNumber.substring(2, 4) - 1, idNumber.substring(4, 6));
console.log(tempDate);
var id_date = tempDate.getDate();
var id_month = tempDate.getMonth();
var id_year = tempDate.getFullYear();
var currentYear = (new Date).getFullYear();
var age = currentYear - id_year;
var fullDate = id_date + "-" + (id_month + 1) + "-" + id_year;
if (!((tempDate.getYear() == idNumber.substring(0, 2)) && (id_month == idNumber.substring(2, 4) - 1) && (id_date == idNumber.substring(4, 6)))) {
correct = false;
}
// get the gender
var genderCode = idNumber.substring(6, 10);
var gender = parseInt(genderCode) < 5000 ? "Female" : "Male";
// get country ID for citzenship
var citzenship = parseInt(idNumber.substring(10, 11)) == 0 ? "Yes" : "No";
// apply Luhn formula for check-digits
var tempTotal = 0;
var checkSum = 0;
var multiplier = 1;
for (var i = 0; i < 13; ++i) {
tempTotal = parseInt(idNumber.charAt(i)) * multiplier;
if (tempTotal > 9) {
tempTotal = parseInt(tempTotal.toString().charAt(0)) + parseInt(tempTotal.toString().charAt(1));
}
checkSum = checkSum + tempTotal;
multiplier = (multiplier % 2 == 0) ? 1 : 2;
}
if ((checkSum % 10) != 0) {
correct = false;
};
// if no error found, hide the error message
if (correct) {
jQuery('.id').css("border","1px solid #9A8B7D");
// clear the result div
jQuery('#result').empty();
// and put together a result message
jQuery('#result').append('<p>South African ID Number: ' + idNumber + '</p><p>Birth Date: ' + fullDate + '</p><p>Gender: ' + gender + '</p><p>SA Citizen: ' + citzenship + '</p><p>AGE: ' + age + '</p>');
jQuery('#status').html("correct");
}
// otherwise, show the error
else {
jQuery('.id').css("border","1px solid #FF0000");
jQuery('#status').html("incorrect")
}
return false;
}
function isNumber(n) {
return !isNaN(parseFloat(n)) && isFinite(n);
}
$('input.id').keydown(function(e){
if(e.keyCode == 8){
$(this).val('');
$(this).prev().val('');
$(this).prev().focus();
Validate()
}
});
$('input.id').on('keyup', function(){
if (this.value.match(/\d+/)) {
var $this = $(this);
if ($this.next('input').length) {
$this.next().focus();
} else {
Validate()
}
}
});
$(".id").keydown(function(event) {
// Allow: backspace, delete, tab, escape, and enter
if ( event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 || event.keyCode == 13 ||
// Allow: Ctrl+A
(event.keyCode == 65 && event.ctrlKey === true) ||
// Allow: home, end, left, right
(event.keyCode >= 35 && event.keyCode <= 39)) {
// let it happen, don't do anything
return;
}
else {
// Ensure that it is a number and stop the keypress
if (event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105 )) {
event.preventDefault();
}
}
});
});
HTML:
<div id="id">
<span id="label">ID NUMBER:</span>
<span id="status"></span>
</div>
<button id="clone">clone</button>
<div id="result"> </div>
CSS:
#error {
color: red;
border: 1px solid red;
padding: 5px;
display: none;
}
#result {
padding: 20px;
}
.id {
width:16px;
height:16px;
border:1px solid #9A8B7D;
margin:0;
float:left;
text-align:center;
font-family:'itc_avant_garde_gothic_bookOb',Helvetica,sans-serif;
font-size:11pt;
padding:2px;
}
#label {
float:left;
font-family:'itc_avant_garde_gothic_bookOb',Helvetica,sans-serif;
line-height:18px;
font-size:11pt;
margin-right:10px;
}
The only time that I see you call Validate is here :
$('input.id').on('keyup', function(){
//code
});
and here
$('input.id').keydown(function(e){
//code
});
Which means that the issue is the event handler is not delegated to a static element
$(document).on('keyup', 'input.id', function(){
//code
});
$(document).on('keydown', 'input.id', function(){
//code
});
Binding it to the document will ensure that any dynamically created elements will have the same event delegated to them as any static elements of the same selector.
Forgot the last part.
clonedObj.find('.id').each(function(){
this.id='id' + idinc++;
this.value = ''; //simply add this to remove the value
});
Although, because you're using jQuery, you should try to stick to using jQuery.
clonedObj.find('.id').each(function(){
$(this).prop('id', 'id'+ idinc++).val(''); // chain the commands
});