javascript - disabling submit button and enable if change was made to the textbox -

javascript - disabling submit button and enable if change was made to the textbox -

i have textbox , submit button. want have button grayed out (disabled) on pageload , when user makes alter in textbox whether adding text or removing text button enabled , 1 time saved button disabled again.

<h3>username</h3> @html.textboxfor(m=>m.username) <button class="btn btn-small savebtn" type="submit" value="user name">save</button>

now issue having how insert script view. current view:

@model project.models.usernamemodel @using (html.beginform("_usernamepartial", "account")) { <h3>username</h3> @html.textboxfor(m=>m.username) <button class="btn btn-small savebtn" type="submit" value="user name">save</button>

do add together script @ bottom after tag:

@section scripts { <script type="text/javascript"> $(document).ready(function () { $(".savebtn").attr('disabled', 'disabled'); $("#username").keyup(function () { $(".savebtn").removeattr('disabled'); }); $(".savebtn").click(function () { $(this).attr('disabled', 'disabled'); }); }); </script>

if understand requirements correctly, want this:

$(document).ready(function () { //disable save button on page load $(".savebtn").attr('disabled', 'disabled'); //when user name changes, enable save button $("#username").keyup(function() { $(".savebtn").removeattr('disabled'); }); //disable save button 1 time clicked $(".savebtn").click(function() { $(this).attr('disabled', 'disabled'); }); });

and here sample js fiddle.

javascript jquery asp.net-mvc