Disable/Enable buttons if field value changes from loaded form defaults

Question

Quiet new to front end dev and need to have a function where if the form values change from either loaded defaults or placeholder values, that some buttons are disabled/enabled to stop user navigating away without changing the values.

So far i have been able to set the fields to disabled but when i change the value back, it doesn't re-enable to buttons. Not to sure if i need to save the loaded values somewhere first or not.

$('select[name="startTimeHr"]').change(function(){
    console.log("In change func");
    if ($(this).val())
    {
        console.log("Changed");
        console.log($(this).val());
        $("button[name='addButton']").attr('disabled', true);
        $("button[name='modifyButton']").attr('disabled', true);
        $("button[name='deleteButton']").attr('disabled', true);
    } else {
        console.log("Default");
        $("button[name='addButton']").removeAttr('disabled');
        $("button[name='modifyButton']").removeAttr('disabled');
        $("button[name='deleteButton']").removeAttr('disabled');
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="toDr" name="toDr">
  <div class="form-horizontal">
    <div class="form-group">
      <label class="col-lg-2 control-label" for="startTimeHr">
                Start time
            </label>
      <div class="col-lg-1">
        <div class="input-group" style="width: 100%">
          <select id="startTimeHr" name="startTimeHr" class="form-control col-xs-12">
            <option value="startTimeHrDefault">HH
            </option>
            <option value="00">00</option>
            <option value="01">01</option>
            <option value="02">02</option>
            <option value="03">03</option>
            <option value="04">04</option>
          </select>
        </div>
      </div>
    </div>
  </div>
  <div class="col-xs-4 col-md-3 col-lg-2">
    <button class="btn btn-success split_button col-xs-12" id="pack-TEST_split_addextra2" name="addButton">
            Add Rule
        </button>
  </div>
  <div class="col-xs-4 col-md-3 col-lg-2">
    <button class="btn btn-warning split_button col-xs-12" id="pack-TEST_split_mod2" name="modifyButton">
            Modify Rule
        </button>
  </div>
  <div class="col-xs-4 col-md-3 col-lg-2">
    <button class="btn btn-danger split_button col-xs-12" id="pack-TEST_split_del2" name="deleteButton">
            Delete Rule
        </button>
  </div>
</form>

Answer 1

just remove startTimeHrDefault from value="startTimeHrDefault" as your if condition checks if value of select option is empty.

$('select[name="startTimeHr"]').change(function(){
    alert("In change func");
    if ($(this).val())
    {
        alert("Changed");
        alert($(this).val());
        $("button[name='addButton']").attr('disabled', true);
        $("button[name='modifyButton']").attr('disabled', true);
        $("button[name='deleteButton']").attr('disabled', true);
    } else {
        alert("Default");
        $("button[name='addButton']").removeAttr('disabled');
        $("button[name='modifyButton']").removeAttr('disabled');
        $("button[name='deleteButton']").removeAttr('disabled');
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  

  <form id="toDr" name="toDr">    
        <div class="form-horizontal">
            <div class="form-group">
                <label class="col-lg-2 control-label" for="startTimeHr">
                    Start time
                </label>
                <div class="col-lg-1">
                    <div class="input-group" style="width: 100%">
                        <select id="startTimeHr" name="startTimeHr"
                            class="form-control col-xs-12">
                            <option value="">HH
                            </option>
                            <option value="00">00</option>
                            <option value="01">01</option>
                            <option value="02">02</option>
                            <option value="03">03</option>
                            <option value="04">04</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xs-4 col-md-3 col-lg-2">
            <button
                class="btn btn-success split_button col-xs-12"
                id="pack-TEST_split_addextra2"
                name="addButton">
                Add Rule
            </button>
        </div>
        <div class="col-xs-4 col-md-3 col-lg-2">
            <button
                class="btn btn-warning split_button col-xs-12"
                id="pack-TEST_split_mod2"
                name="modifyButton">
                Modify Rule
            </button>
        </div>
        <div class="col-xs-4 col-md-3 col-lg-2">
            <button
                class="btn btn-danger split_button col-xs-12"
                id="pack-TEST_split_del2"
                name="deleteButton">
                Delete Rule
            </button>
        </div>
    </form>

Answer 2

You need to change the select html as (first option value should be Empty)

                    <select id="startTimeHr" name="startTimeHr"
                        class="form-control col-xs-12">
                        <option value="">HH</option>
                        <option value="00">00</option>
                        <option value="01">01</option>
                        <option value="02">02</option>
                        <option value="03">03</option>
                        <option value="04">04</option>
                    </select>

Answer 3

I am not sure about the term value back. onchange the condition is always true. If you mean to enable the button when the first option is selected then you can try if (Number($(this).val()))

$('select[name="startTimeHr"]').change(function(){
    if (Number($(this).val()))
    {
        $("button[name='addButton']").attr('disabled', true);
        $("button[name='modifyButton']").attr('disabled', true);
        $("button[name='deleteButton']").attr('disabled', true);
    } else {
        $("button[name='addButton']").removeAttr('disabled');
        $("button[name='modifyButton']").removeAttr('disabled');
        $("button[name='deleteButton']").removeAttr('disabled');
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="toDr" name="toDr">    
    <div class="form-horizontal">
        <div class="form-group">
            <label class="col-lg-2 control-label" for="startTimeHr">
                Start time
            </label>
            <div class="col-lg-1">
                <div class="input-group" style="width: 100%">
                    <select id="startTimeHr" name="startTimeHr"
                        class="form-control col-xs-12">
                        <option value="startTimeHrDefault">HH
                        </option>
                        <option value="00">00</option>
                        <option value="01">01</option>
                        <option value="02">02</option>
                        <option value="03">03</option>
                        <option value="04">04</option>
                    </select>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xs-4 col-md-3 col-lg-2">
        <button
            class="btn btn-success split_button col-xs-12"
            id="pack-TEST_split_addextra2"
            name="addButton">
            Add Rule
        </button>
    </div>
    <div class="col-xs-4 col-md-3 col-lg-2">
        <button
            class="btn btn-warning split_button col-xs-12"
            id="pack-TEST_split_mod2"
            name="modifyButton">
            Modify Rule
        </button>
    </div>
    <div class="col-xs-4 col-md-3 col-lg-2">
        <button
            class="btn btn-danger split_button col-xs-12"
            id="pack-TEST_split_del2"
            name="deleteButton">
            Delete Rule
        </button>
    </div>
</form>