CODEWITHSUNDEEP
phpjquery
JK. Constantine
JK. Constantine

Reputation: 35

Disabling submit button until all fields have values is not Working

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>

Upvotes: 0

Views: 1433

Answers (4)

aaronofleonard
aaronofleonard

Reputation: 2576

$('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.

Upvotes: 2

D14n4
D14n4

Reputation: 130

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.

Upvotes: 0

Md Mahfuzur Rahman
Md Mahfuzur Rahman

Reputation: 2359

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

Upvotes: 0

Arumuga Raja
Arumuga Raja

Reputation: 184

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

Upvotes: 0

Related Questions