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

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'})
  }

});