Disable Save button in update form using JQuery or Js (MVC)

Question

in update(So each text box will have value in it) i want by default Save Button to be disable & Enable it when one of the text box value is changed.using jQuery or Js.

@Html.TextBoxFor(model => model.FirstName, new { @class = "form-control" })
@Html.TextBoxFor(model => model.LastName, new { @class = "form-control" })
@Html.TextBoxFor(model => model.Address, new { @class = "form-control" })
@Html.TextBoxFor(model => model.Phone_No, new { @class = "form-control" })

<input type="submit" class="btn-mvc btn-mvc-green btn-mvc-fullwidth" value="Save Record" id="saveRecord">

Denys Wessels · Accepted Answer · 2016-05-24 08:30:46Z

1

Make sure you add a reference to jQuery >= 1.9 then use the code below:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("#saveRecord").prop('disabled', true);

        $("#saveRecord").click(function () {

        });

        $(".form-control").on("change keyup paste",function () {
            var text = $(this).val();
            var textLength = text.length;

            if(textLength > 0)
                $("#saveRecord").prop('disabled', false);
            else
                $("#saveRecord").prop('disabled', true);
        });
    });
</script>

answered May 24, 2016 at 8:30

Denys Wessels

17.1k16 gold badges85 silver badges121 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

The king Over a year ago

copy and paste same value will enable saveRecord button :(

Denys Wessels Over a year ago

That's what you asked for.If text is entered into one of the text boxes the button should be enabled?

Denys Wessels Over a year ago

So then just change the code above to handle the required jQuery event

Mohammed Tawfik · Accepted Answer · 2016-05-23 20:16:26Z

0

You can listen to keyup event for text boxes and remove disable attribute when any of them have value. Check this sample code:

$('input[type=text].form-control').on("change", function(){
  if($(this).val() != ''){
    $('#saveRecord').attr('disabled', false);
  }else{
     $('#saveRecord').attr('disabled', true);
  }
});

You have to add disabled="disabled" to the save button as following:

<input type="submit" class="btn-mvc btn-mvc-green btn-mvc-fullwidth" value="Save Record" id="saveRecord" disabled="disabled">

answered May 23, 2016 at 20:16

Mohammed Tawfik

6091 gold badge9 silver badges23 bronze badges

1 Comment

The king Over a year ago

i'm sorry brother Mohammed your code is working fine..i forgot to add disabled...jazakallahu khairan

Collectives™ on Stack Overflow

Disable Save button in update form using JQuery or Js (MVC)

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related