php - 如何检测是否输入了两个输入元素，如文本字段。（php/javascript）

Question

如果表单中有两个输入元素 - 例如 - 文本字段，比如说用户名和密码，获取长度 > 0 的文本输入，那么当用户在两个字段中都键入时，您将如何创建一个事件来更改提交按钮的颜色？

Answer 1

If you have Jquery in your project, you can try something like this:

Assuming your inputs have ids:

<input id="username" name="username"/>
<input id="password" name="password"/>
<input type="submit" value="Submit" id="submit" />

You can bind to the keyup event on either input element to change the color of the button:

$('#username, #password').keyup(function(){
    if ($.trim($('#username').val()) != '' && $.trim($('#password').val()) != '') {
        $('#submit').css('background-color', 'red');
    }
});

Answer 2

Here is the running fiddle:

http://jsfiddle.net/NS5z6/

HTML:

<input type=text id=username />
<input type=password id=password />
<input type=submit id=submit />

CSS:

#submit{ background-color: red; }

JS:

$('input[id="username"], input[id="password"]').change(function(){
  if ($(this).val()!="")
  { 
      $("input[id='submit']").css("background-color","green");
  }else{ 
      $("input[id='submit']").css("background-color","red");
  }
});

Answer 3

document.getElementById('submit').onclick = function() {
    var inputs = document.getElementsByTagName('input'),
        empty = 0;

    for (var i = 0, len = inputs.length - 1; i < len; i++) {
        empty += !inputs[i].value;
    }
    if (empty == 0) {
        //write code for changing the button color
    }
};

Answer 4

I like the answer above, and here is a jquery answer if you like the looks better!

$(document).ready(function() {
    $("#username").change(checkFunction());
    $("#password").change(checkFunction());
}
function checkFunction() {
    var user = $("#username").val();
    var pass = $("#password").val();
    if (user && pass) {
        $("#buttonid").css("background-color:#HEXCODE");
    }
}

Answer 5

制作一个 javascript 函数，检查两个输入的值是否大于零，如果它们这样做，它会在调用时更改提交按钮的颜色。

在输入标记中使用onChange属性并将 javascript 函数的名称放在属性中。

您还可以通过执行设置属性

Object.onChange = functionToCall();

每当输入值更改时，onChange 都会触发它设置的函数。

Answer 6

您可以使用以下逻辑

<input type = "text" name = "username" class = "text">
   <input type = "password" name = "password" class = "text">
   <input type = "button" class = "button">
   <script>
     $(".text").live("keyup", function(){

       var filled = true; 

       $(".text").each(function(i, v){
          if($(this).val() == ''){
             filled = false
          }
       });

       if(filled){
        $(".button").css("background-color:#black");
       }
     });
   </script>