我想知道是否可以在之后更改按钮的颜色。填写表格中的所有内容。我想我必须使用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）将其背景颜色更改为紫色。
答案 0 :(得分：3)
试试这个 在我的情况下，将您的输入字段设为同一类，我将其命名为“ mandatoryfields ”
< 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'})
}
});
答案 1 :(得分：1)
当然，你可以这样做：
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() != "");
}
答案 2 :(得分：0)
您可以在每个function()（我更喜欢input>keyup事件）中拨打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>
答案 3 :(得分：0)
简单的方法是检查每次更改的所有值。但是对于非常大的表格来说可能会很慢：
<Popup
title='Extend Due Date'
closePopup={this.togglePopup}
/>
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;
}
答案 4 :(得分：0)
我建议使用包含表单元素上的类来控制按钮的颜色。当表单处于不完整状态时，这将为您提供一些显示，隐藏或重新设置其他内容的灵活性。
我还使用了一个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>