i am having a script to mask a textbox,here it it
<script src="/
files/jquery.maskedinput-1.2.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(function($) {
$('#j').mask('99:99');
});
</script>
i am also having a script to dynamically add text box while i click a button
<script type="text/javascript">
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for(var i=0; i<colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[0].cells[i].innerHTML;
//alert(newcell.childNodes);
switch(newcell.childNodes[0].type) {
case "text":
newcell.childNodes[0].value = "";
newcell.childNodes[0].id="j";
alert(newcell.childNodes[0].id);
break;
case "checkbox":
newcell.childNodes[0].checked = false;
break;
case "select-one":
newcell.childNodes[0].selectedIndex = 0;
break;
}
}
}
function deleteRow(tableID) {
try {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for(var i=0; i<rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if(null != chkbox && true == chkbox.checked) {
if(rowCount <= 1) {
alert("Cannot delete all the rows.");
break;
}
table.deleteRow(i);
rowCount--;
i--;
}
}
}catch(e) {
alert(e);
}
}
</script>
and my input box are
<INPUT type="text" name="STime[]" id="j"/>
<INPUT type="text" name="ETime[]" id="j"/>
the problem i am facing now is, the first text box will have a masked structure,but after i add a text box dynamically with help of j script, i will not get the text box as masked?why?? what i did wrong?
i am having a script to mask a textbox,here it it
<script src="http://jquery-joshbush.googlecode.com/
files/jquery.maskedinput-1.2.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(function($) {
$('#j').mask('99:99');
});
</script>
i am also having a script to dynamically add text box while i click a button
<script type="text/javascript">
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for(var i=0; i<colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[0].cells[i].innerHTML;
//alert(newcell.childNodes);
switch(newcell.childNodes[0].type) {
case "text":
newcell.childNodes[0].value = "";
newcell.childNodes[0].id="j";
alert(newcell.childNodes[0].id);
break;
case "checkbox":
newcell.childNodes[0].checked = false;
break;
case "select-one":
newcell.childNodes[0].selectedIndex = 0;
break;
}
}
}
function deleteRow(tableID) {
try {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for(var i=0; i<rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if(null != chkbox && true == chkbox.checked) {
if(rowCount <= 1) {
alert("Cannot delete all the rows.");
break;
}
table.deleteRow(i);
rowCount--;
i--;
}
}
}catch(e) {
alert(e);
}
}
</script>
and my input box are
<INPUT type="text" name="STime[]" id="j"/>
<INPUT type="text" name="ETime[]" id="j"/>
the problem i am facing now is, the first text box will have a masked structure,but after i add a text box dynamically with help of j script, i will not get the text box as masked?why?? what i did wrong?
Share Improve this question edited Nov 17, 2010 at 19:27 Alex Mathew asked Nov 17, 2010 at 19:18 Alex MathewAlex Mathew 1,5549 gold badges31 silver badges57 bronze badges 2- 2 Just of Note the id attribute of your HTML elements should be unique. you should never have two input elements with the same Id. Use Class instead and assign a common classname. – John Hartsock Commented Nov 17, 2010 at 19:22
- I dont understand that?? can u gave me a sample?? – Alex Mathew Commented Nov 17, 2010 at 19:23
5 Answers
Reset to default 19Create an event binding to an input with the class (don't use ID if you don't have to) you are targeting. Use the jQuery .on method http://api.jquery.com/on/
Example:
<input class="classSelector" />
<script>
$(document).on("focus", "classSelector", function() {
$(this).mask("99:99");
});
</script>
You can dynamically create as many of those inputs you want and mask them using the on event binding. Every new input with that class you create will get that event handler attached to it.
Use the livequery plug-in.
Then give all elements you want to mask the class maskme. Now you can do:
$(".maskme").livequery(function(){
$(this).mask('99:99');
});
This will mask inputs added even after the code is first run.
First Dont use ID on the input
<input type="text" name="STime[]" class="jClass"/>
Second if your using jQuery then use it. This is much easier to read.
<script type="text/javascript">
function addRow(tableID) {
var table = $("#" + tableID); //get the table
var firstRowClone = $("tr:first", table).clone(); //clone the first row
$("input:checkbox",firstRowClone).attr("checked", false); // set all checkboxes to unchecked
$("select", firstRowClone).each(function () { //Set all select lists to select first item
this.selectedIndex = 0;
}
table.append(firstRowClone); //append the cloned row to the table.
$("input:text", firstRowClone).val("").mask("99:99"); //set all input type="text" with value of "" and sets the mask on the clone.
});
function deleteRow(tableID) {
$("#" + tableId + " tr:not(:eq(0))").remove(); //Remove all rows except the first row.
}
$(document).ready(function {
$('.jClass').mask('99:99'); //sets the mask on any rows loaded initially
});
</script>
The mask plug-in is not binding live to new elements in the DOM, but rather is binding on the then-existing element from your $('#j') selector.
- Use a class instead of an ID (since you cannot legally have two elements with the same id on the page), and
- If necessary, re-call
.mask()on your dynamically-created elements after adding to the DOM.
Dont use Id use class in script for multipal use time mask in php ghj