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
– Pointy, Commented Feb 26, 2015 at 17:14

Community · Accepted Answer · 2017-05-23 12:12:51Z

2

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?

edited May 23, 2017 at 12:12

CommunityBot

11 silver badge

answered Feb 26, 2015 at 17:19

Barmar

789k57 gold badges554 silver badges669 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

cssyphus Over a year ago

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.

Collectives™ on Stack Overflow

Javascript issue with onkeyup

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related