Reputation: 3
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">
Upvotes: 0
Views: 3070
Reputation: 17029
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>
Upvotes: 1
Reputation: 601
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">
Upvotes: 0