禁用提交按钮，直到所有字段都没有值为止
[英]Disabling submit button until all fields have values is not Working
问题描述
我是使用jquery的新手，只是复制了jquery代码。
如果未填写表单中的所有字段，则jquery将禁用Sumbit按钮。 表单已经用表中的数据填充，但是“提交”按钮仍然可用。
我哪里做错了？
<?php
error_reporting(0);
session_start();
include('dbconn.php');
$admin_ID = $_SESSION['admin_ID'];
if (empty($_SESSION['admin_ID']) && parse_url($_SERVER['REQUEST_URI'], PHP_URL_PATH) != '../index.php') {
header('Location: ../index.php');
exit;
}
$query = "SELECT * FROM tbl_admin WHERE admin_ID='$admin_ID'";
$result = mysqli_query($con, $query);
if (!$query) {
printf("Error: %s\n", mysqli_error($con));
exit();
}
?>
<html>
<head>
<link rel="stylesheet" href="css/add.css" type="text/css" media="screen"/>
<script type="text/javascript">
(function() {
$('form input').keyup(function() {
var empty = false;
$('form > input').each(function() {
if ($(this).val() == '') {
empty = true;
}
});
if (empty) {
$('#Submit').attr('disabled', 'disabled');
} else {
$('#Submit').removeAttr('disabled');
}
});
})()
</script>
</head>
<body>
<div id="header">
<img src="images/sbma.png" class="logo" id="logo"></img>
<a style = "float:left;">My Account</a>
<a href="MainMenu.php">Home</a>
</div>
<div id="navigation">
</div>
<div id="section">
<?php while($row1 = mysqli_fetch_array($result)):;?>
<form class="form-style-1" action="MyUpdateProcess.php" method="post">
<ul>
<fieldset class="fieldset-company">
<li>
<label>Username:</label>
<input type='text' name='username' id='input' value = "<?php echo $row1['admin_Username'];?>" maxlength="50" />
</li>
<li>
<label>Password:</label>
<input type='password' name='password' id='input' value="<?php echo $row1['admin_Password'];?>" maxlength="50" />
</li>
<li>
<label>First Name:</label>
<input type='text' name='fname' id='input' value = "<?php echo $row1['admin_Fname'];?>" maxlength="50" />
</li>
<li>
<label>Middle Name:</label>
<input type='text' name='mname' id='input' value="<?php echo $row1['admin_Mname'];?>" maxlength="50" />
</li>
<li>
<label>Last Name:</label>
<input type='text' name='lname' id='input' value = "<?php echo $row1['admin_Lname'];?>" maxlength="50" />
</li>
<li>
</fieldset>
<fieldset class="fieldset-contacts">
<label>Email:</label>
<input type='text' name='email' id='input' value="<?php echo $row1['admin_Email'];?>" maxlength="50" />
</li>
<li>
<label>Telephone:</label>
<input type='text' name='telephone' id='input' value="<?php echo $row1['admin_Telephone'];?>" maxlength="50" />
</li>
<li>
<label>Mobile:</label>
<input type='text' name='mobile' id='input' value = "<?php echo $row1['admin_Mobile'];?>" maxlength="50" />
</li>
<?php endwhile;?>
</fieldset>
<li>
<input id="Submit" type='Submit' disabled="disabled" name='Submit' value='Submit' />
</li>
</ul>
</form>
</div>
<div id="footer">
S.B.M.A Centralized Information System
</div>
</body>
</html>
4 个解决方案
解决方案1
2 2016-04-07 14:29:50
$('form > input')表示立即子级。
$('form input')表示任何后代。
您的输入元素都不是form元素的直接子元素。
更改为$('form input') 。
还有其他更改，例如使用prop代替attr会有所帮助。 以及绑定到keyup和change事件。
(function() {
$('form input').on('keyup change', function() {
var empty = false;
$('form input').each(function() {
if ($(this).val() == '') {
empty = true;
}
});
if (empty) {
$('#Submit').prop('disabled', true);
} else {
$('#Submit').prop('disabled', false);
}
});
$('form input:eq(0)').keyup(); // run the check
})()
但是，即使这样也行不通。 为什么？ 因为您的while循环会打印出多个<form>元素，而无需关闭它们。 您在表单等内部的表单中有一个表单，具体取决于有多少个循环。 这将导致意外的行为。 您需要确定如何真正地处理while循环，并确保正确打印表格。
另外，submit元素仅提交其所在的一种表单。所以也许您应该再提交一种表单？
另外， HTML ID必须唯一 ！ 您必须从所有这些输入中删除id="input" ，否则您将获得甚至更多的意外行为。
解决方案2
0 2016-04-07 14:34:39
跟随，
$（'form input [type =“ text”]'）。keyup（function（）{
var empty = false;
$('form input[type="text"]').each(function() {
if ($(this).val() == '') {
empty = true;
}
});
if (empty) {
$('#Submit').attr('disabled', 'disabled');
} else {
$('#Submit').removeAttr('disabled');
}
或在文本框中添加一个类，然后检查那些类是否有价值
解决方案3
0 2016-04-07 14:35:09
您也可以这样尝试：
$(document).ready(function() {
$('form input').keyup(function() {
var empty = false;
$('form input').each(function() {
if ($(this).val() == '') {
empty = true;
}
});
if (empty) {
$('#Submit').attr('disabled', 'disabled');
} else {
$('#Submit').removeAttr('disabled');
}
});
});
解决方案4
0 2016-04-07 14:43:09
抱歉，我无法发表评论...
您为什么不只将“ required”属性添加到所有这样的输入字段中： <input required type='text' name='username' id='input' value = "<?php echo $row1['admin_Username'];?>" maxlength="50" />吗？ 该按钮将永远不会被禁用，但是在填写每个字段之前它不会做任何事情。
禁用提交按钮，直到所有隐藏的输入都具有值
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.