根据文本字段更改按钮颜色

I have an MVC 4 app that I'm working on. One of the pages is a login page with 2 text fields for username and password. I have a submit button at the bottom of the page. I have the styling already set up for the button, what I'm trying to do is make it so the button is my grey color I have set up when there is nothing in the text fields, when there is a value in both text field, the button will change color. How can I accomplish this with JavaScript? Here is what I've tried, but it just throws an error:

我有一个我正在研究的MVC 4应用程序。其中一个页面是一个登录页面,其中包含2个用于用户名和密码的文本字段。我在页面底部有一个提交按钮。我已经为按钮设置了样式,我正在尝试做的是使按钮是我在文本字段中没有任何内容时设置的灰色,当两个文本字段都有值时,按钮会改变颜色。我怎样才能用JavaScript实现这一目标?这是我尝试过的,但它只是抛出一个错误:

$(document).ready(function () {
    $("#uName, #pWord").value(function () {
        if ($("#uName, #pWord").is(null)) {
            $("#submitBtnNormal").removeClass('on');
        } else {
            $("#submitBtnNormal").addClass('on');
        };
    });
});

Thanks for any help in advance! I'm really no good with JS.

在此先感谢您的帮助!我对JS真的不好。

3 个解决方案

#1

Use this

$(document).ready(function () {
    $("#uName, #pWord").change(function () {
        if (!$("#uName").val().length && !$("#pWord").val().length) {
            $("#submitBtnNormal").removeClass('on');
        } else {
            $("#submitBtnNormal").addClass('on');
        };
    });
});

There is no event called value. You want to capture the event change which fires when you edit the text of the input fields.

没有名为value的事件。您希望捕获在编辑输入字段文本时触发的事件更改。

#2

Firstly, the method you're trying to use is val, not value. Secondly, you need to run your code under an event such as keyup. Try this:

首先,您尝试使用的方法是val,而不是值。其次,您需要在keyup等事件下运行代码。试试这个:

$(document).ready(function () {
    $("#uName, #pWord").keyup(function () {
        if (!$("#uName").val() || !$("#pWord").val()) {
            $("#submitBtnNormal").removeClass('on');
        } else {
            $("#submitBtnNormal").addClass('on');
        };
    });
});

#3

Try this,

Js Script

  $(document).ready(function () {
    $("#uName, #pWord").change(function () {
        if ($("#uName").val()!='' && $("#pWord").val()!='') {

            $("#submitBtnNormal").removeClass('on');
        } else {
            $("#submitBtnNormal").addClass('on');
        };
    });
 });

DEMO

#1