Question

我试图通过Jquery提交表单，但我的代码的提交部分不起作用！我无法理解它的错误。

<?php
    if(!isset($_SESSION["useridentity"])){
        die(header("Location:index.php"));
    }
    include("actions/connect.php");
    $q = "SELECT username FROM users WHERE useridentity = '".$_SESSION["useridentity"]."'";
    $r = mysql_query($q,$con);
    $f = mysql_fetch_array($r);
?>
<div class="absolutedialog" id="login">
    <form class="loginform" id="loginform" name="loginform" method="POST" action="actions/login.php">
        <div class="label">
            Welcome back, <b><?php echo $f["username"]; ?></b>. Please, type your password to confirm your identity.
        </div>
        <input class="loginformpassword" id="password" type="password" name="pass" maxlength="32"/>
        <div id="passwordfail"></div>
        <input class="regularbutton" id="submit" type="button" value="Submit"/>
        <button class="grayregularbutton" id="gobacktoconsole" type="button">Go back</button>
    </form>
</div>
<div class="blackoverlay"></div>

<script>
    $(document).ready(function() {
        $('#login').fadeIn(1000);
        $('.blackoverlay').fadeIn(500);

        //Destroy $_SESSION variables and go back to console
        $('#gobacktoconsole').on('click',this, function(e) {
            $(".absolutedialog").fadeOut(500);
            $(".blackoverlay").fadeOut(1000);
            window.setTimeout(  
                function() {  
                    window.location.href="actions/logout.php";
                },
                1000
            );
        });

        //Submit validations
        $('#submit').on('click',this, function(e){

            if($("#password").val() == "")
                $("#passwordfail").html("Please, type your password");
            else{
                $("form#loginform").submit();
                $(".absolutedialog").fadeOut(500);
                $(".blackoverlay").fadeOut(1000);
            }

        });

        //Clear password message error when something is typed in the password input
        $('#password').on('keyup',this, function(e) {
            $("#passwordfail").html("");
        });

        //Prevent default submit on enter, and click #submit button instead in order to execute validations
        $('#loginform').bind("keyup keypress", function(e) {
            var code = e.keyCode || e.which; 
            if(code  == 13){
                e.preventDefault();
                $("#submit").click();

            }
        });
    });
</script>

我尝试在return false;下面添加$("form#loginform").submit();，但不起作用。我错过了什么吗？请帮助！

很抱歉缺乏细节;如果您需要我添加更多，请询问。

Answer 1

你有这个元素：

 <input class="regularbutton" id="submit" type="button" value="Submit"/>

当你说

时

$("form#loginform").submit();

brpwser假设您正在调用它，而不是表单对象的submit（）方法。只需将id更改为其他内容即可。

 <input class="regularbutton" id="submitButton" type="button" value="Submit"/>

有史以来最糟糕的事情！希望这会有所帮助。

Answer 2

我已经多次看到有关表单提交和表单验证的问题，我发现最好的方法是使用一个简单的开源jquery插件，例如jquery.validate.js。

这是一个关于阻止默认提交和成功发布数据到php文件的示例。首先，你必须得到这些开源框架，你可以随时使用它们。文件是三个脚本：

 <script src="js/jquery.min.js></script>
<script src="js/bootstrap.min.js"></script> <!-- open source framework twitter bootstrap -->

和一个css文件：

<link href="bootstrap/bootstrap.min.css" rel="stylesheet" media="screen">

代码示例：

<form  method="post" action="php/inscriptionAction2.php" class="form-horizontal" name="register" id="register">
 // code of site inscription : name , email , password , confirmed password ....
<div class="form-group">
        <div class="col-xs-offset-3 col-xs-9">
                   <div class="form-actions">
                <input type="submit" class="btn btn-primary" name="newsubmit" id="newsubmit" value="Submit">
                <input type="reset" class="btn btn-default" value="Reset">
                   </div>
           </div>
        </div>
</form>

这是一个简单的脚本

$(document).ready(function(){

jQuery.validator.addMethod("lettersonly", function(value, element) {
    return this.optional(element) || /^[a-z]+$/i.test(value);
}); 


$('#loginForm').validate({
    rules: {
        name: {
            minlength: 2,
            lettersonly:true,
            required: true
        },
        lname: {
            minlength: 2,
            lettersonly:true,
            required: true
        },
        username: {
            lettersonly:true,
            minlength: 2, 
            required: true

        },
        email: {
            required: true,
            email: true,
            remote: {
                url: '/setup/verify_email/',
                cache: false
            }
        },
        password: {
            required: true,
            minlength: 5,
            maxlength: 250
        },
        password2: {
            equalTo: '#password'
        },

        gender: {
            required: true
        }
    },

    messages: {

        name: {
            required:"Please enter your first name",
            minlenght:"Your first name must consist of at least {0} characters",
            lettersonly: "Letters only please"
        },
          lname: {
            required:"Please enter your last name",
            minlenght:"Your last name must consist of at least {0} characters",
            lettersonly: "Letters only please"
        },
        username: {
            lettersonly: "Letters only please",
            required: "Please enter a username",
            minlength: "Your username must consist of at least {0} characters"
        },
        email: {
            required:"Please enter your email address",
            email:"Please enter a valid email adress",
            url:"Please enter a valid url",
            cache:""
        },
        password: {
            required: "Please provide a password",
            minlength: "Your password must be at least {0} characters long",
            maxlength: "Your password must be less than {0} characters long"
        },
        password2: {
            equalTo: "Please enter the same passwords"
        },
        postal_code: "Please enter a valid zip code",
        timezones: "Please select a time zone",
        mp: "Please enter a valid mobile number. Only numbers please.",
        gender: "Please select a gender",
        dob: "Please enter a valid Date of Birth in mm/dd/yyyy format."
    },
    highlight: function (element, errorClass, validClass) {
        $(element).closest('.control-group').removeClass('success').addClass('error');
    },
    unhighlight: function (element, errorClass, validClass) {
        $(element).closest('.control-group').removeClass('error').addClass('success');
    },
    success: function (label) {
        $(label).closest('form').find('.valid').removeClass("invalid");
    },
    errorPlacement: function (error, element) {
        element.closest('.control-group').find('.help-block').html(error.text());
    }
}).cancelSubmit=true; // to block the submit of this plugin and call submit to php file

通过使用两个强大的框架，Twitter Bootstrap和jQuery，您可以使您的工作更快，更专业。有关详细信息，请查看其文档。

Answer 3

首先你应该导入jquery

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

第二次将按钮的id值更改为其他任何内容并且可以正常工作，您可能需要在提交前设置超时，以便在淡出效果后延迟提交

Jquery - 表单不提交

3 个答案: