我想知道是否可以在之后更改按钮的颜色。填写表格中的所有内容。我想我必须使用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'})
}
}
&#13;
<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>
&#13;
答案 3 :(得分:0)
简单的方法是检查每次更改的所有值。但是对于非常大的表格来说可能会很慢:
<Popup
title='Extend Due Date'
closePopup={this.togglePopup}
/>
&#13;
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)
}
});
&#13;
.btn.completed {
background: crimson;
}
&#13;
答案 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>