填写表格后更改按钮的颜色

Question

我想知道是否可以在 填写表单中的所有内容后更改按钮的颜色。我想我必须用 jQuery 来做，但我不知道该怎么做.

这是我的表单代码：

 <form action="">
    <div>
      <label for="name"></label>
      <input type="text" id="name" name="user_name" placeholder="  Full Name">
    </div>
    <div>
      <label for="mail"></label>
      <input type="email" id="mail" name="user_mail" placeholder="  Email Address">
    </div>
    <div>
      <label for="message"></label>
      <textarea name="user_message" id="message" cols="30" rows="10" placeholder="  Let me know what's on your mind"></textarea>
    </div>
    <div class="sendButton">
      <button class="btn" type="submit" disabled="disabled">Send</button>
    </div>
  </form>

还有我现在拥有的 Jquery（我知道它还没有完成，但我不知道该怎么做）

    $("input[type='text'], textarea").on("keyup", function () {
  if ($(this).val() != "" && $("textarea").val() != "") {
    $(".btn").removeAttr("disabled");
  } else {
    $(".btn").attr("disabled", "disabled");
  }
});

我想要一个按钮 (.btn) 将其背景颜色更改为紫色。

Answer 1

试试这个 在我的情况下，为您的输入字段提供相同的类，我给它“ma​​ndatoryfields”

< input type="text" id="name" class="mandatoryfields" name="user_name" placeholder="  Full Name">

脚本

$(".mandatoryfields").on("keyup", function () {
    if($(this).val()==''){
    $('.btn').css({background:'red'})
  }
else{
    $('.btn').css({background:'transparent'})
  }

});

Answer 2

您可以在每个input>keyup 中调用function()（我更喜欢input 事件），以检查所有inputs 是否已填写。
检查https://fiddle.jshell.net/kgm3hs9k/4/
希望对您有所帮助。
干杯

工作示例：

$("input[type='text'], textarea").on("input", function () {    	
  canChangeColor();
});


function canChangeColor(){  
  	
  var can = true;  

  $("input[type='text'], textarea").each(function(){
     if($(this).val()==''){
        can = false;
     }
  });
  
  if(can){
    $('.btn').css({background:'red'})
  }else{
    $('.btn').css({background:'transparent'})
  }

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<form action="">
    <div>
      <label for="name"></label>
      <input type="text" id="name" name="user_name" placeholder="  Full Name">
    </div>
    <div>
      <label for="mail"></label>
      <input type="email" id="mail" name="user_mail" placeholder="  Email Address">
    </div>
    <div>
      <label for="message"></label>
      <textarea name="user_message" id="message" cols="30" rows="10" placeholder="  Let me know what's on your mind"></textarea>
    </div>
    <div class="sendButton">
      <button class="btn" type="submit" disabled="disabled">Send</button>
    </div>
  </form>

Answer 3

当然，你可以做到：

var inputName = $("#name");
var inputMail = $("#mail");
var textareaMessage = $("#message");
var btn = $(".btn");

inputName.change(function(){
    if(isValidForm()){
        btn.css("background-color" : "...");
    } else {
        // If necessary, the user will again remove the data
        btn.css("background-color" : "...");
    }
});

inputMail.change(function(){
    if(isValidForm()){
        btn.css("background-color" : "...");
    } else {
        // If necessary, the user will again remove the data
        btn.css("background-color" : "...");
    }
});

textareaMessage.change(function(){
    if(isValidForm()){
        btn.css("background-color" : "...");
    } else {
        // If necessary, the user will again remove the data
        btn.css("background-color" : "...");
    }
});

function isValidForm(){
    return (inputName.val() & inputMail.val() & textareaMessage.val() != "");
}

Answer 4

简单的方法是检查每次更改的所有值。但是，对于非常大的表单，它可能会很慢：

function allFilled() {
  var filled = true; // let's assume the form is complete…
  $("form input[type=text], form textarea").each(function() { //…and go through each of its fields
    if ($(this).val() === "") { // if a field is empty
      filled = false; // flip the variable to false
    }
  });
  return filled;
}

$("form input[type=text], form textarea").on("input", function() { // on every form change ('input' works better than 'keyup' here, because it handles cases like paste or autofill)
  if (allFilled()) { // if everything is filled (see functiuon above)
    $(".btn").addClass("completed"); // add a class to button, causing it to change background
  } else {
    $(".btn").removeClass("completed"); // if not, remove the background (happens if some field is cleared)
  }
});

.btn.completed {
  background: crimson;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="">
    <div>
      <label for="name"></label>
      <input type="text" id="name" name="user_name" placeholder="  Full Name">
    </div>
    <div>
      <label for="mail"></label>
      <input type="email" id="mail" name="user_mail" placeholder="  Email Address">
    </div>
    <div>
      <label for="message"></label>
      <textarea name="user_message" id="message" cols="30" rows="10" placeholder="  Let me know what's on your mind"></textarea>
    </div>
    <div class="sendButton">
      <button class="btn" type="submit" disabled="disabled">Send</button>
    </div>
  </form>

Answer 5

我建议使用包含表单元素的类来控制按钮的颜色。当表单处于不完整状态时，这将使您能够灵活地显示、隐藏或重新设置其他内容的样式。

我还使用了一个 css 类来定位您要检查的表单字段，以防您需要可选的字段。

$(function() {
  // listen to the keydown event which will bubble up to the containing 
  // form element
  $('#myForm').on('keydown', function() {
    // set a flag
    var hasAnEmptyField = false;
    // iterate through each 'required input' and check if it's value 
    // is 'falsey' (i.e. empty)
    $('.requiredInput').each(function() {
      if (!this.value) {
          // update the flag if this input has no value
          hasAnEmptyField = true
      }
    });
    
    // use the flag to decide whether or not to have a class on the 
    //form element
    if (hasAnEmptyField) {
      $('#myForm').addClass('is-incomplete')
      // could also disable the button here.
    } else {
      $('#myForm').removeClass('is-incomplete')
      // optionally re-enable button here.
    }
  });

})

.btn {
  background-color: green;
  border: 0;
  color: white
}
.is-incomplete .btn {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" id="myForm" class="is-incomplete">
    <div>
      <label for="name"></label>
      <input type="text" id="name" class="requiredInput" name="user_name" placeholder="  Full Name">
    </div>
    <div>
      <label for="mail"></label>
      <input type="email" id="mail" class="requiredInput" name="user_mail" placeholder="  Email Address">
    </div>
    <div>
      <label for="message"></label>
      <textarea name="user_message" class="requiredInput" id="message" cols="30" rows="10" placeholder="  Let me know what's on your mind"></textarea>
    </div>
    <div class="sendButton">
      <button class="btn" type="submit" disabled="disabled">Send</button>
    </div>
  </form>