禁用提交按钮，直到所有字段都没有值为止
[英]Disabling submit button until all fields have values is not Working
问题描述
I'm new at using jquery and just copied the jquery code. 
我是使用jquery的新手，只是复制了jquery代码。
The jquery disables the Sumbit button if the all of the field in the form is not filled. 如果未填写表单中的所有字段，则jquery将禁用Sumbit按钮。 The form is already filled with data from a table but the submit button is still diabled. 表单已经用表中的数据填充，但是“提交”按钮仍然可用。
Where did i go wrong? 我哪里做错了？
<?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') means IMMEDIATE child. $('form > input')表示立即子级。
$('form input') means any descendant. $('form input')表示任何后代。
None of your input elements are immediate children of the form element. 您的输入元素都不是form元素的直接子元素。
Change to $('form input') . 更改为$('form input') 。
There are other changes, such as using prop instead of attr that will help. 还有其他更改，例如使用prop代替attr会有所帮助。 As well as binding to both keyup and change events. 以及绑定到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
})()
But even this will not work. 但是，即使这样也行不通。 Why? 为什么？ Because your while loop prints out more than one <form> element without ever closing them. 因为您的while循环会打印出多个<form>元素，而无需关闭它们。 You have a form inside a form inside a form etc etc, depending on how many loops there are. 您在表单等内部的表单中有一个表单，具体取决于有多少个循环。 This will cause unexpected behavior. 这将导致意外的行为。 You need to decide how you really want to handle the while loop, and ensure the forms are printed out properly. 您需要确定如何真正地处理while循环，并确保正确打印表格。
Also, submit element only submits the one form that it's in. So maybe you should only have one more? 另外，submit元素仅提交其所在的一种表单。所以也许您应该再提交一种表单？
Also, the HTML id must be unique ! 另外， HTML ID必须唯一 ！ You must remove id="input" from all of those inputs or else you'll get even more unexpected behavior. 您必须从所有这些输入中删除id="input" ，否则您将获得甚至更多的意外行为。
解决方案2
0 2016-04-07 14:34:39
Do following, 跟随，
$('form input[type="text"]').keyup(function() { $（'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');
}
or add a class to the text boxes and check whether those classes having value or not 或在文本框中添加一个类，然后检查那些类是否有价值
解决方案3
0 2016-04-07 14:35:09
You can try like this also: 您也可以这样尝试：
$(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
Sorry I can't comment yet... 抱歉，我无法发表评论...
Why don't you just add the "required" attribute to all of your input fields like that : <input required type='text' name='username' id='input' value = "<?php echo $row1['admin_Username'];?>" maxlength="50" /> ? 您为什么不只将“ required”属性添加到所有这样的输入字段中： <input required type='text' name='username' id='input' value = "<?php echo $row1['admin_Username'];?>" maxlength="50" />吗？ The button will never be disabled but it won't do anything until each field is filled. 该按钮将永远不会被禁用，但是在填写每个字段之前它不会做任何事情。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.