填写表格后更改按钮的颜色 [英] Change the button's color after fill out the form

问题描述

我想知道是否可以在填写表格中的所有内容后更改按钮的颜色.我认为我必须使用jQuery，但是我不确定如何做到这一点.

I am wondering if I can change the color of the button after everything in form is filled in. I think I have to do it with jQuery, but I'm not sure how to do it.

这是我的表单代码:

 <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(我知道它还没有完成，但是我不知道怎么做)

and the Jquery which I have for now (I know it is not completed but I don't know how to do it)

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

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

I want a button (.btn) to change its background color to purple.

推荐答案

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

You can call a function() in each input>keyup (I prefer input event), to check all inputs were filled.
Check https://fiddle.jshell.net/kgm3hs9k/4/
Hope it help.
Cheers

工作示例:

$("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>

这篇关于填写表格后更改按钮的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！