javascript function not working in innerHTML

Question

javascript functions on an event like onKeypress are not working , if i create a input tag through JAVSCRIPT using innerHTML . Below is the code for that i am using . Also the same is working if i am doing it in directly JSP file .

$('<table id="additionalPassPopupTable'+rowNo+'" class="passenger_table_center">'+
        '<tr>'+
            '<td colspan="2" style="padding-left:20px; padding-top:5px; background-color:#e1e1e1;">Passenger Information</td>'+
        '</tr>'+
        '<tr>'+
            '<td  style="padding-left:40px;">First Name *</td>'+
            '<td>'+
                '<input type="text" name="fname" >'+
            '</td>'+
            '<td>'+
                '<font color="red"></font>'+
            '</td>'+
        '</tr>'+
        '<tr>'+
            '<td  style="padding-left:40px;">Last Name *</td>'+
            '<td>'+
                '<input type="text" name="lname" ></td>'+
            '<td>'+
                '<font color="red"></font>'+
            '</td>'+
        '</tr>'+
        '<tr>'+
            '<td style="padding-left:40px;">Mobile Number</td>'+
            '<td>'+
                '<input type="text" name="phoneno" maxlength="10" onkeypress="return isNumber(event)" >'+
            '</td>'+
            '<td>'+
                '<font color="red"></font>'+
            '</td>'+
        '</tr>'+
        '<tr>'+
        '<td style="padding-left:40px;">Email Address</td>'+
            '<td>'+
                '<input type="text" name="email" maxlength="100" onkeypress="return validateEmail(event)">'+
            '</td>'+
            '<td>'+
                '<font color="red"></font>'+
            '</td>'+
        '</tr>'+
    '</table>').appendTo('#additionalPassengerDiv' );

function isNumber(evt) {
    evt = (evt) ? evt : window.event;
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    if (charCode > 31 && (charCode < 48 || charCode > 57)) {
        return false;
    }
    return true;
}

function validateEmail(evt) {

    evt = (evt) ? evt : window.event;
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    if (charCode > 31 && ((charCode < 48 || charCode > 57) && (charCode < 64 || charCode > 90) && (charCode < 97 || charCode > 122) && (charCode != 46) && (charCode != 45) && (charCode != 95))) {
        return false;
    }
    return true;
}

make sure the function test is available in the global scope — Arun P Johny
– Arun P Johny, Commented Jan 13, 2014 at 6:59
did you try $('#additionalPassengerDiv').html("<b>test</b>"); Okay this won't probably help you. — SSpoke
– SSpoke, Commented Jan 13, 2014 at 7:02
You should really consider distilling all that HTML into a template. That's a bit of a maintenance nightmare. — user229044
– user229044 ♦, Commented Jan 13, 2014 at 7:03

Kuldeep Vithlani · Accepted Answer · 2014-01-13 08:45:29Z

Hello here by I am attaching your code into jsfiddle. In this your code is working. Please find fiddle here.

Thanks. Java script function in innerhtml :JSFiddle

function isNumber(evt) {
alert("Validate Number");
evt = (evt) ? evt : window.event;
 var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode > 31 && (charCode < 48 || charCode > 57)) {
    return false;
}
return true;}
function validateEmail(evt) {
alert("Validate Email Id");
evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode > 31 && ((charCode < 48 || charCode > 57) && (charCode < 64 || charCode > 90) && (charCode < 97 || charCode > 122) && (charCode != 46) && (charCode != 45) && (charCode != 95))) {
    return false;
}
return true;}

$(document).ready(function(){
$('#additionalPassengerDiv' ).html('<table id="additionalPassPopupTable" class="passenger_table_center">'+
    '<tr>'+
        '<td colspan="2" style="padding-left:20px; padding-top:5px; background-color:#e1e1e1;">Passenger Information</td>'+
    '</tr>'+
    '<tr>'+
        '<td  style="padding-left:40px;">First Name *</td>'+
        '<td>'+
            '<input type="text" name="fname" >'+
        '</td>'+
        '<td>'+
            '<font color="red"></font>'+
        '</td>'+
    '</tr>'+
    '<tr>'+
        '<td  style="padding-left:40px;">Last Name *</td>'+
        '<td>'+
            '<input type="text" name="lname" ></td>'+
        '<td>'+
            '<font color="red"></font>'+
        '</td>'+
    '</tr>'+
    '<tr>'+
        '<td style="padding-left:40px;">Mobile Number</td>'+
        '<td>'+
            '<input type="text" name="phoneno" maxlength="10" onkeypress="return isNumber(event)" >'+
        '</td>'+
        '<td>'+
            '<font color="red"></font>'+
        '</td>'+
    '</tr>'+
    '<tr>'+
    '<td style="padding-left:40px;">Email Address</td>'+
        '<td>'+
            '<input type="text" name="email" maxlength="100" onkeypress="return validateEmail(event)">'+
        '</td>'+
        '<td>'+
            '<font color="red"></font>'+
        '</td>'+
    '</tr>'+
'</table>');});

Collectives™ on Stack Overflow

javascript function not working in innerHTML

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related