Question

I have a form that users can duplicate, so they can submit multiple forms in one times. This works fine. However, i noticed that users don’t use it the right way. For example, i ask for initials and people fill out their front name. PHP checks all fields and auto-corrects them if necessary, but this turns John into J.O.H.N.

Anyway a good way would be to autocorrectfields. This works on the initial form, but goes wrong on the duplicated forms. Especially initials acts weird. My knowledge of jQuery and Javascript is very limited, so after puzzling for weeks i still don’t know how to solve it. Suggestions are welcome.

Fiddle: http://jsfiddle.net/QUxyy/15/

JS

// Lowercase
    $(".lowercase").keyup(function(e)
    {
        $(".lowercase").val(($(".lowercase").val()).toLowerCase());
        if (/[a-z]/g.test(this.value))
        {
            this.value = this.value.replace(/[^a-z ]/g, '');
        }

    });

    // Initials
    $(".initials").focus(function() {
        var current = $(".initials").val();
        $(".initials").keyup(function(e) {
            var key = String.fromCharCode(e.keyCode);
            if (key >= 'A' && key <= 'Z') {
                current += key + ".";
                this.value = current;
            }
            else {
                current = "";
            }
        });
    $(".initials").blur(function() {
        var i = $(".initials").val();
        var last = i[i.length - 1];
        if (last != "." && i.length !== 0){
            this.value += ".";
            }
        });
    });


    // Capitalize
    $(".cap").keyup(function(e)
    {
        function convertToUpper() {
        return arguments[0].toUpperCase();
         }
        val = this.value.toLowerCase().replace(/\b[a-z]/g, convertToUpper);
        this.value = val;

    });

Click for full code and preview

Answer 1

In your callback event handlers function for .voorletters use ‘this’, e.g:

SEE DEMO

$(document).on("keydown", ".voorletters", function(e)  {
            var i = $(this).val();
            if (e.keyCode == 8 && i.charAt(i.length - 1) == ".") {
                $(this).val(i.slice(0, -1));
                current = $(this).val();
            }
        })

And you should do it for all your call back function as .initials, .lowercase, etc…