Javascript issue with onkeyup

Question

I seem to be having issues with the following code. I'm using a button to print another line of input fields. And the onkeyup is not working properly, and by not working properly it is not formatting the text as it should. not sure if im doing something wrong. It works in Chrome but not IE 11.

$(document).ready(function () {
    var work_count = 0;
    $("#addbutton").click(function () {
        //Html to create a new field
        var newField = "<tr class = 'project_type[" + work_count + "]'>\
        <td style='text-align: center;'> \
            <select name='f_types[]'><option value=''>-----Select----</option>\
            <option value=''></option>\
            <option value=''></option>\
            <option value=''></option>\
            <option value=''></option>\
            <option value=''></option>\
            </select>\
        </td>\
        <td style='text-align: center;'>\
            <input type='text' name='proj_no[]' size='8' maxlength='7' value='' class='test' onkeyup='if (this.value.length==3) {this.value=this.value+'/'}' onkeypress='if (event.keyCode==45) {return false} else {return true}' onblur='if (this.value.length==6) {this.value=this.value+'X'}'  placeholder='111-111' /> \
        </td>\
        <td style='text-align: center;'>\
            <input type='text' name='box_number[]' placeholder='Required' value='' maxlength='7' size='8' />\
        </td>\
        <td colspan='3' style='text-align: center;'>\
            <input type='text' name='comments[]' value='' placeholder='Comments Necessary for futrure reference' size='70' />\
        <input type='button' id='removeButton' class='flatBtn' value='X' /></td>\
    </tr>";
        $("#work").after(newField);
        work_count++;

        $("#removeButton").on('click', function (events) {
            $(this).parents('tr').remove();
        });
    });
    //end of document.ready
});

Thanks in advance for helping me figure this out.

Adding multiple elements with exactly the same "id" value is incorrect. — Pointy, Feb 26 '15 at 17:14

score 2 · Accepted Answer · edited May 23 '17 at 12:12

You're using the same type of quotes around the string literals in the Javascript attributes as you are around the attributes. So the quote that starts the literal is ending the attribute. You need to use double quotes around the literals to distinguish them. And since double quotes are also surrounding the string literal that you assign to newField, you need to escape them to prevent from ending that string.

You need to do this in both onkeyup and onblur.

<input type='text' name='proj_no[]' size='8' maxlength='7' value='' class='test' onkeyup='if (this.value.length==3) {this.value=this.value+\"/\"}' onkeypress='if (event.keyCode==45) {return false} else {return true}' onblur='if (this.value.length==6) {this.value=this.value+\"X\"}'  placeholder='111-111' /> \

You can avoid much of this complexity if you bind your event handlers using Javascript/jQuery rather than inline attributes. Since these are dynamically-added elements, you can use event delegation as explained in Event binding on dynamically created elements?

Well done again, Barmar. Glad to see you still here and still helping. I've learned much from your answers in the past - thank you. — cssyphus, Feb 26 '15 at 17:21

Javascript issue with onkeyup

1 Answers1