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>

might possibly have soemthing to do with `$(this).val()` not returning a falsy value, for example if it returns `""` or `"0"`. Since I assume this is what you used as a "deselect" in your select, check that — Dellirium, Feb 11 '19 at 09:22
What is `value` of the dropdown when you `change the value back`? — Mosh Feu, Feb 11 '19 at 09:29
Replace `` to ``. This way, the value will be "falsy" and the `else` will fire. — Mosh Feu, Feb 11 '19 at 09:30
Remove the value of first option (remove this "startTimeHrDefault"). and it should work fine. — Rohit Mittal, Feb 11 '19 at 09:31
@MoshFeu What ever i select. So on `form` load the value is 'HH' then i change it and it drops into the `IF` as expected but when i change it back to 'HH', it still drops in the `IF` and not the `ELSE` — murday1983, Feb 11 '19 at 09:31
Possible duplicate of [Disable/enable an input with jQuery?](https://stackoverflow.com/questions/1414365/disable-enable-an-input-with-jquery) I'm not sure which version you use but I think you're looking for `.prop('disabled', true);`/`.prop('disabled', false);` — Davy de Vries, Feb 11 '19 at 09:32

score 1 · Accepted Answer · answered Feb 11 '19 at 09:32

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>

Prakash Saripaka · Answer 2 · 2019-02-11T09:37:12.770

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>

This works if i click my 'Add' button as it will always load the default value of 'HH' but this wouldn't work if i click 'Modify' as the drop down will hold a previously selected value (e.g. 02) — murday1983, Feb 11 '19 at 09:36
Hey sorry i ment you need to make value of "HH" option a empty , i have edited the answer accordingly. Please check — Prakash Saripaka, Feb 11 '19 at 09:39

score 0 · Answer 3 · answered Feb 11 '19 at 09:33

0

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>

answered Feb 11 '19 at 09:33

Robin Ding

511
3
9

This works if i click my 'Add' button as it will always load the default value of 'HH' but this wouldn't work if i click 'Modify' as the drop down will hold a previously selected value (e.g. 02) – murday1983 Feb 11 '19 at 09:35
So, what you expected is to a. disable the buttons when you change to a different value b. enable the buttons back when you change back the value; Am I right? If so, you need to set a variable to store the initial value – Robin Ding Feb 11 '19 at 09:40

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

3 Answers3