Question

How can this function work for all textboxes when I use

$('#date, #date2').blur(function () {

but not when I use

$('#date').blur(function () { ?

MVC Viewer:

@Html.TextBoxFor(x => x.ArrivalDateStart, new { id = "date" })
@Html.TextBoxFor(x => x.ArrivalDateEnd, new { id = "date" })
@Html.TextBoxFor(x => x.OtherDateEnd, new { id = "date" })
@Html.TextBoxFor(x => x.OtherDateEnd, new { id = "date" })

Javascript:

$(function () {
    $('#date, #date2').blur(function () {
        var date = $(this).val();
        var result = "";
        if (date.length === 8) {
            result = result += date.substring(0, 4) + "-" + date.substring(4, 6) + "-" + date.substring(6, 8);
            $(this).val(result);
            $(this).blur()
        }
    });
});

Answer 1

Your elements are meant to have unique IDs. Turn that into a class attribute instead of an ID attribute:

@Html.TextBoxFor(x => x.ArrivalDateStart, new { @class = "date" })

and select it like this:

$('.date').blur(function () {