jQuery 灰色提交按钮，直到表格填写完毕
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14614761/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
grey out submit button until form filled out
提问by samyb8
I have the following form:
我有以下表格：
<form action="http://www.tahara.es/contact/subscribe.php" method="post" id="subscribe" name="subscribe">
<input type="hidden" name="action" value="subscribe">
<label>NAME:</label>
<input type="text" name="name" class="Textbox" id="sub_first_name">
<label>EMAIL:</label>
<input type="text" name="email" class="Textbox" id="sub_email">
<input type="submit" name="button" id="button" value="Subscribe" />
I would like to grey out the submitbutton until both fields in the form have been filled out. I guess jquery would do the trick?
我想将submit按钮灰化，直到表单中的两个字段都已填写。我猜 jquery 会做到这一点？
How can I do this, and where should I place the script?
我该怎么做，我应该把脚本放在哪里？
采纳答案by Mr. Wise
Jquery would do that. On the .keyup event have jquery check if both field's lengths are > 0 and change the button to be disabled or not.
Jquery 会这样做。在 .keyup 事件上，jquery 检查两个字段的长度是否 > 0 并将按钮更改为禁用或不禁用。
$('#yourButton').button("disable");?????????????
$('.fields').bind('keyup', function() {
var nameLength = $("#sub_first_name").length;
var emailLength = $("#sub_email").length;
if (nameLength > 0 && emailLength > 0)
{
$('#yourButton').button("enable");?????????????
}
} );
回答by Kris Hollenbeck
The script would go in the <head></head>of your document. Like so.
该脚本将放在<head></head>您的文档中。像这样。
<script type="text/javascript" src="yourpath"></script>
One way would be to match the values of the inputs and then remove the grayed out class from your button if the values aren't still the same as the default. Here is a demo.
一种方法是匹配输入的值，然后如果值与默认值不同，则从按钮中删除灰色的类。这是一个演示。
HTML
HTML
<input type="text" value="some text" class="text-input">
<input attr="" type="submit" value="submit" class="submit">
CSS
CSS
.disabled {opacity:.2;}
jQuery
jQuery
if ($('.text-input').val() == "some text" ) {
$('.submit').addClass('disabled');
}
回答by Wolf
If you are a beginner of javascript, a better option would be
如果您是 javascript 的初学者，更好的选择是
Add HTMLas follows
添加HTML如下
<form name="myForm" action="demo_form.asp" onsubmit="return validateForm()" method="post">
First name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
Now add validateForm()as
现在添加validateForm()为
function validateForm() {
// Validate all fields in the form
return true; // if all form entries are valid. else return false
}
Note:This will not grey-out the submit button. But in this case submit will work only if all the entries are valid.
注意：这不会使提交按钮变灰。但在这种情况下，只有当所有条目都有效时，提交才会起作用。
