Calculate input field based on expiry date

Question

A form with 50 entries: each with P1-48, E1-48, and X1-48. I want to calculate the Entry Fee "E1" based on the expires date X1. The js date format for the expires date is YYYY.MM.DD, ex. 2018.04.21 and a player pays $3 if his expires date is greater or equal to today's date. He pays $5 if his expires date is older or less than today's date. But if the expires date is blank and the player pays a membership fee, the Entry Fee is waived to zero.

JS:

<script src = "js/moment.min.js"></script>

I also have this as a "template" starting guide. I think it could be modified and piggyback the target result onto it.

<script> // change expiration date color
function getExpireDate(ele) {
var i = null;
for (i = 0; members.length > i; i++) {
    if (members[i].Name == ele.value) {
        var exDate = moment(members[i].Expires, 'YYYY.MM.DD');
        if (moment().isAfter(exDate)) {
        $(ele).closest('.universal').find('.expDate').css('color', "#A3005B");
        } else {
        $(ele).closest('.universal').find('.expDate').css('color', "#275052");
        }
        return members[i].Expires;
     }
}
return '';
}
</script>

<script>

for (let i = 0; i <= 48; i++) {
    $("#P" + i).on("blur", function(){
    $("#X" +i).val(getExpireDate(this));
    });
}
</script>

<script>

    var members [
    {"Name": "Jones, David", "Expires": "2017.05.03" },
    {"Name": "Roth, Bill", "Expires": "2017.03.08" },
    {"Name": "Scullin, Kenn", "Expires": "2019.02.20" }
    ]

<script>

HTML:

<div>
    <input type = "text" id = "P1"> <!--Player-->
    <input type = "text" id = "E1"> <!--Entry Fee--> 
    <input type = "text" id = "M1"> <!--Membership Fee--> 
<input type = "text" id = "X1" onblur="getExpireDate()" class="expDate"> <!--expires-->
<div>

Funny thing is:

<input type = "text" onblur="getClass()" class="text" id="Y1" maxlength = "4" size = "4" disabled /> <!--works even with input disabled -->

<input type = "text" onblur="calcEntryFee(this);" class="expDate" name = "exp" id="X1" maxlength = "10" size = "10" disabled /><!--new code doesn't work -->

<script> // Lookup class or rating

function getClass(ele) {
var i = null;
for (i = 0; members.length > i; i++) {
if (members[i].Name == ele.value) {
return members[i].Rating;

}
}
return;
}


for (let i = 0; i <= 48; i++) {
$("#P" + i).on("blur", function(){
$("#Y" +i).val(getClass(this));
});
}
</script>

Answer 1

How about this:

(The main function is calcEntryFee().)

var members = [
  // ... fill data here.
];

function getMemberData( name ) {
    var a = jQuery.trim( name ).toLowerCase(),
        i, b, member;

    for ( i = 0; i < members.length; i++ ) {
        b = jQuery.trim( members[ i ].Name ).toLowerCase();
        if ( a === b ) {
            member = members[ i ];
            break;
        }
    }

    return member || {};
}

function calcEntryFee( elem ) {
    var idx, member, exDate, today, fee;

    elem = elem || {};
    if ( /^[PEMX](\d+)$/.test( elem.id ) ) {
        idx = RegExp.$1;
    } else {
        return false;
    }

    member = getMemberData( jQuery( '#P' + idx ).val() );
    mmfee = parseFloat( jQuery( '#M' + idx ).val() );
    exDate = moment( member.Expires, 'YYYY.MM.DD' );
    today = moment();
    fee = '';

    if ( exDate.isBefore( today ) ) {
        fee = 5;
    } else if ( exDate.isSameOrAfter( today ) ) {
        fee = 3;
    } else if ( ! member.Expires && mmfee > 0 ) {
        fee = 0;
    }

    // Updates the entry fee input value.
    jQuery( '#E' + idx ).val( fee );

    return fee;
}

You'd use calcEntryFee() like this:

<input id="X1" placeholder="X" size="10" onblur="calcEntryFee( this );" />

See the full code and try a live demo on https://codepen.io/anon/pen/WJRNVY.

UPDATE

Because the expiry date field/input is disabled, use this instead: (take note of the id value, which could also be P2, P3, etc.)

<input id="P1" placeholder="P" onblur="calcEntryFee( this );" />

I.e. Add the calcEntryFee( this ); to the onblur attribute of the "Player" field and not the expiry date field. Or add it to any sibling/related fields which is not disabled, or which we can tab to. (So that we can focus and "un-focus" or blur on the field, and the browser would then invoke the calcEntryFee( this ); that was attached to the field's blur event.)

Try a live demo on: https://codepen.io/anon/pen/xjgQyx

Alternatively, you may add it without using the onblur attribute of the input/field: (refer to the code you provided in your question)

for (let i = 0; i <= 48; i++) {
  $("#P" + i).on("blur", function() {
    $("#X" + i).val(getExpireDate(this));
    calcEntryFee(this); // <- add it here
  });
}