By murday1983


2019-02-11 09:20:49 8 Comments

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>

3 comments

@Prakash Saripaka 2019-02-11 09:33:09

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>

@murday1983 2019-02-11 09:36:22

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)

@Prakash Saripaka 2019-02-11 09:39:02

Hey sorry i ment you need to make value of "HH" option a empty , i have edited the answer accordingly. Please check

@Robin Ding 2019-02-11 09:33:32

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>

@murday1983 2019-02-11 09:35:55

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)

@Robin Ding 2019-02-11 09:40:54

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

@Mamun 2019-02-11 09:32:28

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>

Related Questions

Sponsored Content

8 Answered Questions

[SOLVED] Disabling and enabling a html input button

  • 2012-12-12 01:57:14
  • k.ken
  • 405108 View
  • 167 Score
  • 8 Answer
  • Tags:   javascript jquery

64 Answered Questions

[SOLVED] How do you disable browser Autocomplete on web form field / input tag?

16 Answered Questions

[SOLVED] How to prevent buttons from submitting forms

18 Answered Questions

[SOLVED] jQuery disable/enable submit button

5 Answered Questions

0 Answered Questions

3 Answered Questions

[SOLVED] Cannot display HTML string

0 Answered Questions

Materialize collapsible not working

15 Answered Questions

1 Answered Questions

Sponsored Content