Disabling submit button until all fields have values is not Working
Question
I'm new at using jquery and just copied the jquery code.
The jquery disables the Sumbit button if the all of the field in the form is not filled. 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 answers
solution1
2 2016-04-07 14:29:50
$('form > input') means IMMEDIATE child.
$('form input') means any descendant.
None of your input elements are immediate children of the form element.
Change to $('form input') .
There are other changes, such as using prop instead of attr that will help. As well as binding to both keyup and change events.
(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. 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.
Also, submit element only submits the one form that it's in. So maybe you should only have one more?
Also, the HTML id must be unique ! You must remove id="input" from all of those inputs or else you'll get even more unexpected behavior.
solution2
0 2016-04-07 14:34:39
Do following,
$('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
solution3
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');
}
});
});
solution4
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" /> ? The button will never be disabled but it won't do anything until each field is filled.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.