gpt4 book ai didi

javascript - 提交表单跨度消息更改位置为什么?

转载 作者:行者123 更新时间:2023-11-28 14:37:42 24 4
gpt4 key购买 nike

我试图理解为什么每次字段变空时 jquery 生成的消息都会改变位置!

因此,如果消息是由 ajax 的反馈生成的,那么它会被放置在登录框正下方的适当位置。如果字段(输入框)在提交时为空,则不会调用 ajax 脚本,并且它会显示空字段的消息,但在下方 40px 或更多处显示。

jquery 脚本:

<script type="text/javascript">
<!--
$(document).ready(function(){
$("#loginform").submit(function(){

$('#loginform input[type=text]').each(function(n,element){
if ($(element).val()=='') {
$(".message").html('<p>O campo '+element.id+' tem de ter um valor!</p>').fadeIn("slow").delay(2000).fadeOut(1000);
return false;
}

else{
$.post("login.php", { usrname:$("#Nome").val(), passwd:$("#Palavra-passe").val()}, function(data){
if(data == '1'){
$("#subLog").hide();
$(".message").html('<p>Login efectuado com sucesso, a redirecionar...</p>').fadeIn("slow").delay(2000).fadeOut(1000, function (){
$("#login").fadeOut('slow', function(){
location.reload();
});
});
}
else{
$("#subLog").hide();
$(".message").html('<p>Erro! Tente novamente por-favor!</p>').fadeIn("slow").delay(1500).fadeOut(1000, function(){
$("#subLog").fadeIn('fast');
});
}
});
}
});
return false;
});
});
//-->
</script>

css 消息样式:

.message{
text-align:center;
color: white;
background: rgba(0, 0, 0, .5);
margin-top: 65px;
padding: 4px;
font-weight: bold;
font-size: small;
border: 2px solid white;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-khtml-border-radius: 6px;
border-radius: 6px;
}

形式:

<div class="box" id="login" style="width: 326px; height: 228px; top: 39%; background-image: url('images/loginBox.png');background-repeat: no-repeat;">

<form id="loginform" action="" method="post">

<fieldset style="display: block">
<legend></legend>
<input id="Nome" class="transparent" type="text">
<input id="Palavra-passe" class="transparent" type="password">
<input id="subLog" type="submit" value="Login">
</fieldset>

</form>

<div class="message"></div>

更新:

当调用 ajax 指令时,提交按钮被隐藏,因此位置改变了 65px。为了纠正这个小问题,我从 css 规则中删除了 margin-top 属性,并使用 .css('margin-top', 'value') 更改了位置。通过这种方式,我将值更改为不同的消息,并且都显示在相同的屏幕位置。谢谢。

最佳答案

好吧,我不知道它在 ajax 响应后的具体表现如何,但是如果您将该字段留空,您只需要从 css 中删除这一行

margin-top: 65px;

没关系。

看这里:http://jsfiddle.net/Ature/2/

附言我也补充了

$('div.message').hide();  

避免在生成任何警告之前显示 div 消息

编辑 - 也许您有其他影响您的 div 的规则。如果在插入之前加载了其他规则,则可以添加行

margin-top: 0px;

覆盖它们。

此外:记得在重新加载 yopur 页面时清除缓存!

关于javascript - 提交表单跨度消息更改位置为什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6523335/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com