从提交单击按钮后将类添加到页脚
add class to footer after click button from submit
你好,我是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à un account ? <a href="page_login.html"> 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>
<strong>Success!</strong> Grazie per esserti registrato.
</div>
<div class="alert alert-danger hidden br0" id="contact-error">
<span class="glyphicon glyphicon-remove "></span>
<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>
<strong>Error!</strong> Email già 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>© 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');
相关文章:
- 将输入字段中的文本提交到我的数据库,同时将其添加到我的列表中
- 使用jQuery检查提交时添加到句子中的单词
- 添加和删除隐藏字段数组中的值,而不提交表单
- 使用加号按钮添加多个文本框,并通过PHP提交
- 为提交文本区域添加输入
- 提交评论不适用于新添加的帖子
- 动态添加/复制表单时绑定到表单提交事件
- 如何在用户提交链接时添加提取推文并将其发布到站点的功能
- Jquery 提交表单,在成功提交表单到 php 后添加
- Rails 4:动态添加的复选框未提交
- 提交表单时如何在 HTML 表格中添加行
- 流星 - 添加带有熨斗的路由后无法提交用户.路由器到登录和注册表单
- 拦截动态添加的表单提交
- 添加提交按钮以 jquery 星级评定
- 如何添加提交表单的 5 分钟脚本倒数计时器
- 如何添加提交函数到js的Onclick函数
- 如何使用JavaScript函数在HTML表单中添加提交按钮
- 如何添加提交功能到我的ng-controller
- 添加提交按钮到jquery搜索表单
- 向submit()添加提交按钮值