CODEWITHSUNDEEP
javascript
Latrell Cruz
Latrell Cruz

Reputation: 17

Site won't submit with enter, but will submit using the submit button

Site won't submit with enter, but will submit using the submit button I've tried changing my CSS, HTML and JavaScript all to no avail, please help me thank you so much!

here's my JavaScript

    $(document).ready(function(){
    $error = $('<center><h2 class = "text-danger">You are not a student here...<h2></center>');
    $error1 = $('<center><h2 class = "text-danger">Please fill up the field<h2></center>');
    $('#login').click(function(){
            $('#login').submit();
        $error.remove();
        $error1.remove();
        $student = $('#student').val();
        if($student == ""){
            $error1.appendTo('#error');
        }else{  
            $.post('check.php', {student: $student},
                function(show){
                    if(show == 'Success'){
                        $.ajax({
                            type: 'POST',
                            url: 'login.php',
                            data: {
                                student: $student
                            },
                            success: function(result){
                                $result = $('<h2 class = "text-warning">You have been login:</h2>' + result).appendTo('#result');
                                $('#student').val('');
                                setTimeout(function(){
                                    $result.remove();
                                }, 10000);
                            }
                        });
                    }else{
                        $('#student').val('');
                        $error.appendTo('#error');
                    }
                }
            )
        }   
    });
});

Here's my HTML, i've already tried editing everything i can, will be glad for you help please thank you so much! Site won't submit with enter, but will submit using the submit button I've tried changing my CSS, HTML and JavaScript all to no avail, please help me thank you so much!

<head>
    <meta charset = "utf-8" />
    <title>Attendance Record System</title>
    <meta name = "viewport" content = "width=device-width, initial-scale=1" />
    <link rel = "stylesheet" type = "text/css" href = "css/bootstrap.css"/>
</head>
<body class = "alert-info">
    <nav class = "navbar navbar-inverse navbar-fixed-top">
        <div class = "container-fluid">
            <div class = "navbar-header">
                <p class = "navbar-text pull-right">ATTENDANCE SYSTEM</p>
            </div>
        </div>
    </nav>
    <div class = "container-fluid">
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <div class = "col-lg-3"></div>
        <div class = "col-lg-6 well">
            <h2>Attendance Login</h2>
            <br />
            <div id = "result"></div>
            <br />
            <br />
            <form enctype = "multipart/form-data">
                <div class = "form-group">
                    <label>Student ID:</label>
                    <input type = "text" id = "student" class = "form-control" required = "required"/>
                    <br />
                    <br />
                    <div id = "error"></div>
                    <br />
                    <button type = "button" id = "login" class = "btn btn-primary btn-block"><span class = "glyphicon glyphicon-login"></span>Login</button>

                </div>
            </form>
        </div>
    </div>
</body>
<script src = "js/jquery.js"></script>
<script src = "js/bootstrap.js"></script>
<script src = "js/login.js"></script>

Upvotes: 1

Views: 64

Answers (1)

Sergey Mell
Sergey Mell

Reputation: 8040

Instead of

$('#login').click(function(){ ... })

you should use

$('your_form_selector').submit(function(){ ... })

In this case you will handle all the possible form submitions (either done by button click or by hitting enter key)

=== Update after form markup posted ===

So, as I've told before you should use

$('form').submit(function(event) {
  event.preventDefault(); // I'd suggest to add this since you do your request asynchronously
  ...
})

and remove type="button" from your login button. It prevents from submitting the form

Upvotes: 2

Related Questions