CODEWITHSUNDEEP
javascriptjqueryhtml
Eric
Eric

Reputation: 27

Delete field based on selection change

Basically I'm not a coder I need an example of the proper code to accomplish this please. I am trying to make an electronic PTO form which I have linked within fiddle. What I want to do is if type1 changes then it deletes or subtracts anything in hours1 and really preferably in what ever total field the type1 has filled. So if you go to fiddle select Sick and type 8 in the hours field it will auto count in the total hours for sick onchange. However what if someone selects sick and really meant to select vacation currently they have to manually delete and re-enter all the numbers. I would like to automate the whole thing. I really appreciate your wisdom on this.

Here is the selection fields there are multiple.

   <select name="type1" id="type1">
        <option value="">Please Select</option>
          <option value="Sick">Sick</option>
            <option value="Vacation">Vacation</option>
            <option value="Holiday">Holiday</option>
            <option value="Floating Holiday">Floating Holiday</option>
            <option value="Jury Duty">Jury Duty</option>
            <option value="Bereavement">Bereavement</option>
            <option value="Suspension Paid">Suspension Paid</option>
            <option value="Suspension Unpaid">Suspension Unpaid</option>
          </select>

This is where the employee enters in the hours of sick or whatever. 

  <input onchange="javascript:process()" name="hours1" class"hours1" type="text" id="hours1" size="4" maxlength="2" />

When they do this it automatically adds the hours together using the

Sick

<input name="totsick" type="text" id="totsick" size="4" maxlength="2" />

Vacation

<input name="totvac" type="text" id="totvac" size="4" maxlength="2" />

jsfiddle demo

Upvotes: 0

Views: 128

Answers (1)

Banana
Banana

Reputation: 7463

Basically, you should recalculate all the numbers on each change of the type selects, and hours inputs.

that way you avoid miscalculations and lots of unnecessary logic.

here is an example FIDDLE

new code:

//this clause runs after DOM is loaded
$(function(){
    //attach a onchange handler to all the type selects and hours texts easily
    $("select[id^='type']").change(function(){
        processTHREE();
    });
    $("input[id^='hours']").change(function(){
        processTHREE();
    });
});

function processTHREE() {
    //reset all totals
    $("#totsick").val("0");
    $("#totvac").val("0");
    $("#tothol").val("0");
    $("#totfl").val("0");
    $("#totjd").val("0");
    $("#totber").val("0");
    $("#totsp").val("0");
    $("#totsu").val("0");
    //get a list of all selects whose id starts with the word 'type'
    var _types = $("select[id^='type']");
    //iterate through them and check values
    //the id/value here are the id of the select, and the select itself, not his selected value
    $.each(_types, function (_idx, _value) {
        var current_select = _types[_idx];
        //gets the value of the selected option in the current select 
        var Selected_value = $("option:selected", current_select).val();
        //get the corresponding hours value, parent().parent() goes up twice
        //from the select, which means ->td->tr and in the same row search for
        //hours input
        var selected_hours = $("input[id^='hours']",$(current_select).parent().parent()).val();
        //check the value and add to relevant field
        if (Selected_value == "Sick") {
            addTo("totsick",selected_hours);
        } else if (Selected_value == "Vacation") {
            addTo("totvac",selected_hours);
        } else if (Selected_value == "Holiday") {
            addTo("tothol",selected_hours);
        } else if (Selected_value == "Floating Holiday") {
            addTo("totfl",selected_hours);
        } else if (Selected_value == "Jury Duty") {
            addTo("totjd",selected_hours);
        } else if (Selected_value == "Bereavement") {
            addTo("totber",selected_hours);
        } else if (Selected_value == "Suspension Paid") {
            addTo("totsp",selected_hours);
        } else if (Selected_value == "Suspension Unpaid") {
            addTo("totsu",selected_hours);
        }
    });
}
function addTo(elId,hours) {
    var element = document.getElementById(elId);
    var current = element.value;
    //alert(current+"/"+add);
    // + before for integer conversion
    element.value = +current + +hours;

}

Upvotes: 1

Related Questions