从提交单击按钮后将类添加到页脚

add class to footer after click button from submit

本文关键字:添加 提交 单击 按钮      更新时间:2023-09-26

你好,我是PHP和JavaScript开发人员的新手,我有一个问题。我有一个 HTML 文件,其中包含注册表格和页脚部分

在注册表中,当我成功添加用户时,我隐藏了输入文本并显示一条消息,但页脚部分上升了。

为了解决这个视觉问题,我想将"页脚固定底部"添加到 fotter 部分,但只有当以这种方式隐藏输入文本时,我才会阻止页面末尾的页脚。

我在外部文件中有一个 HTML 和一个 Java 脚本...我的问题是从JavaScript访问页脚部分。

网页代码

 <section class="page-login section-4">
    <div class="container">
        <div class="row">
            <div class="col-sm-10 col-sm-offset-1 col-md-6 col-md-offset-3">
                <div class="well well-6 mb0">
                    <h2 class="section-title-2 st-2 mb20">Registrazione</h2>
                    <p>Possiedi gi&agrave un account ? <a href="page_login.html">&nbsp; Login</a></p>
                    <form id="RegistrationForm" class="register-form form form-2" method="post" action="php/registrati.php">
                        <label>
                            Nome Utente
                            <input name="name " id="name" type="text" required class="form-control" placeholder="Nome">
                        </label>
                        <label>
                            Email <span class="required">*</span>
                            <input name="email " id="email" type="email" required class="form-control" placeholder="Email">
                        </label>
                        <label>
                            Password <span class="required">*</span>
                            <input name="password " id="password" type="password" required class="form-control" placeholder="Password">
                        </label>
                        <label>
                            Confirm Password <span class="required">*</span>
                            <input name="confirmpassword" id="confirmpassword" type="password" required class="form-control" placeholder="Confirm Password">
                        </label>
                        <label class="hideFormcontrol">
                            <input type="checkbox" name="terms" id="terms" value="ok" required class="hideFormcontrol">
                            Acconsento a DBSoftware <a href="#" class="hideFormcontrol">Termini e condizioni</a> e <a href="#">Privacy</a>
                        </label>
                        <div class="alert alert-success hidden br0" id="contact-success">
                            <span class="glyphicon glyphicon-ok "></span>&nbsp;
                                <strong>Success!</strong> Grazie per esserti registrato.
                        </div>
                        <div class="alert alert-danger hidden br0" id="contact-error">
                            <span class="glyphicon glyphicon-remove "></span>&nbsp;
                                <strong>Error!</strong> Le password inserite non corrispodono.
                        </div>
                        <div class="alert alert-danger hidden br0" id="contact-present">
                            <span class="glyphicon glyphicon-remove "></span>&nbsp;
                                <strong>Error!</strong> Email gi&agrave presente nel database.
                        </div>
                        <div>
                            <input type="submit" class="hideFormcontrol btn voyo-btn-2 rounded mt5" value="Registrati">
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Footer -->
<footer class="footer-wrapper no-border" >
        <div class="sub-footer">
            <div class="container">
                <div class="row">
                    <div class="col-sm-12">
                        <div class="pull-left">
                            <p>&copy; Copyright 2015 DBSoftware</p>
                        </div>
                        <div class="pull-right">
                            <ul class="social-icon dark-2 rounded">
                                <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                                <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                                <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
                                <li><a href="#"><i class="fa fa-tumblr"></i></a></li>
                                <li><a href="#"><i class="fa fa-rss"></i></a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    <!-- END Sub footer -->
</footer>
<!-- END Footer -->

带有验证代码的 JSCRIPT

if ($('.register-form').length) {
    var form = {
        init: false,
        initialize: function () {
            // if form is already initialized, skip 
            if (this.init) {
                return;
            }
            this.init = true;

            var $form = $(".register-form");

            $form.validate({
                submitHandler: function (form) {
                    // Loading Button
                    var btn = $(this.submitButton);
                    btn.button("loading");
                    // Ajax Submit
                    $.ajax({
                        type: "POST",
                        url: $form.attr("action"),
                        data: {
                            "name": $form.find("#name").val(),
                            "email": $form.find("#email").val(),
                            "password": $form.find("#password").val(),
                            "confirmpassword": $form.find("#confirmpassword").val(),
                            "terms": $form.find("#terms").val()
                        },
                        dataType: "json",
                        success: function (data) {
                            var $success = $form.find("#contact-success"),
                                $error = $form.find("#contact-error"),
                                $present = $form.find("#contact-present");

                            switch (data.response) {
                                case "success":
                                    $success.removeClass("hidden");
                                    $error.addClass("hidden");
                                    $present.addClass("hidden");
                                     //Reset Form
                                    $form.find(".form-control")
                                        .val("")
                                        .blur()
                                        .parent()
                                        .removeClass("has-success")
                                        .removeClass("has-error")
                                        .addClass("hidden")
                                        .find("label.error")
                                        .remove();
                                    $form.find(".hideFormcontrol")
                                        .addClass("hidden")

                                    break;
                                case "error":
                                    $error.removeClass("hidden");
                                    $success.addClass("hidden");
                                    $present.addClass("hidden");
                                    break;
                                case "present":
                                    $error.addClass("hidden");
                                    $success.addClass("hidden");
                                    $present.removeClass("hidden");
                                    break;
                            }
                        },
                        complete: function () {
                            btn.button("reset");
                        }
                    });
                },
                rules: {
                    name: {
                        required: true
                    },
                    email: {
                        required: true,
                        email: true
                    },
                    password: {
                        required: true
                    },
                    confirmpassword: {
                        required: true,
                        equalTo: "#password"
                    },
                    terms: {
                        required: true
                    }
                },
                messages: {
                    name: {
                        required: "<span class='form-message-error'>Please enter your name!</span>"
                    },
                    email: {
                        required: "<span class='form-message-error'>Please enter your email address!</span>",
                        email: "<span class='form-message-error'>Please enter a valid email address!</span>"
                    },
                    password: {
                        required: "<span class='form-message-error'>Please enter a password!</span>"
                    },
                    confirmpassword: {
                        equalTo: "<span class='form-message-error'>Prego, inserire la stessa password!</span>"
                    },
                    terms: {
                        required: "<span class='form-message-error'>Prego, selezionare le condizioni della privacy!</span>"   
                    }
                },
                highlight: function (element) {
                    $(element)
                        .parent()
                        .removeClass("has-success")
                        .addClass("has-error");
                },
                success: function (element) {
                    $(element)
                        .parent()
                        .removeClass("has-error")
                        .addClass("has-success")
                        .find("label.error")
                        .remove();
                }
            });

        } // END initialize
    }; // END form object
    form.initialize();
}

我想在 jscript 中添加一个可以在页脚部分类中添加类的部分。在 jscript 中,我可以访问表单部分中的所有元素,但我无法访问表单外元素部分,如何在部分代码中引用页脚部分?

  case "success":
                                    $success.removeClass("hidden");
                                    $error.addClass("hidden");
                                    $present.addClass("hidden");
                                     //Reset Form
                                    $form.find(".form-control")
                                        .val("")
                                        .blur()
                                        .parent()
                                        .removeClass("has-success")
                                        .removeClass("has-error")
                                        .addClass("hidden")
                                        .find("label.error")
                                        .remove();
                                    $form.find(".hideFormcontrol")
                                        .addClass("hidden")

                                    break;

非常感谢您的帮助。

您可以使用元素/类型选择器来选择<footer>,并使用addClass()向元素添加类。

使用类型选择器:

$('footer').addClass('footer-fixed-bottom');

使用类选择器:

$('.footer-wrapper').addClass('footer-fixed-bottom');