Question

我有以下表格：

 <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" />

我想将submit按钮变灰，直到填写完表单中的两个字段。我想jquery可以做到这一点吗？

我该怎么做，我应该在哪里放置脚本？

Answer 1

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");
}

} );

Answer 2

该脚本将放在您文档的<head></head>中。像这样。

<script type="text/javascript" src="yourpath"></script>

一种方法是匹配输入值，然后如果值仍然与默认值不同，则从按钮中删除灰色类。这是一个演示。

<强> HTML

<input type="text" value="some text" class="text-input">
<input attr="" type="submit" value="submit" class="submit">

<强> CSS

.disabled {opacity:.2;}

<强>的jQuery

if ($('.text-input').val() == "some text" ) {
    $('.submit').addClass('disabled');    
}

http://jsfiddle.net/APGmy/11/

Answer 3

如果您是javascript的初学者，那么更好的选择是

添加 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>

现在将validateForm()添加为

function validateForm() {
   // Validate all fields in the form
   return true; // if all form entries are valid. else return false
}

注意：这不会使提交按钮变灰。但在这种情况下，只有在所有条目都有效的情况下，提交才有效。

灰色提交按钮，直到表格填写完毕

3 个答案: