这就是我的情况。我在一个新闻网站上工作,主页上有最新的100篇新闻文章。客户希望访问者能够通过对话框对新闻发表评论。这是文章标题后面的链接。此外,当访问者未登录时,他们可以通过对话框进行登录,当访问者没有帐户时,他可以向注册
我使用的对话框来自jquery ui。布局如下:
|---------------------------------------|
| Login | Registration |
| | |
| username: | username: |
| - Inputfield | - Inputfield |
| password: | password |
| - Inputfield | - Inputfield |
| remember me | password confirm |
| login button | - Inputfield |
| | email: |
| | - Inputfield |
| | register button |
|---------------------------------------|
| |
| Here will be all the comments for the |
| news article from newest to oldest |
|---------------------------------------|
我在这里所做的只是创建3个div。
- 在登录表单和注册表单之间创建一个包装器div
- 在登录表单周围创建一个div
- 在注册表窗体周围创建div
html看起来是这样的:(内容是荷兰语,我没有注释。)
<div class="reactionForm" >
<div id="normalReaction" class="normalReaction activeForm'.(check_login() ? '' : ' login').'">
<form action="" name="plaatsreactie" onsubmit="return validateReaction( '.$_POST['id'].');" method="post">
<div id="reactionForm">
<div class="qr_login">
<h3>Log hieronder in.</h3>
<form action="" method="post" id="reactie_login" >
Gebruikersnaam:<br />
<input id="r_username" type="text" name="gebruikersnaam" class="r_loginInput" value="" /><br />
Wachtwoord:<br />
<input id="r_password" type="password" name="wachtwoord" class="r_loginInput" value="" /><br />
<input id="r_onthouden" type="checkbox" name="onthouden" value="1" class="customCheckbox" id="onthoudenCheck" />
<label for="onthoudenCheck">Onthouden</label><br />
<span class="r_login_option"><a href="/wachtwoord-vergeten/" title="Wachtwoord vergeten?">Vergeten?</a>
<input type="image" name="submit" id="r_login" src="/images/inloggen.png" class="loginSubmit" />
</form>
</div>
<div class="qr_register">
<h3>Nog geen account? <br />Maak hieronder een account aan.</h3>
<form action="" method="post" id="reactie_register" >
Gebruikersnaam:<br />
<input id="r_r_username" type="text" name="gebruikersnaam" class="r_loginInput" value="" /><br />
Wachtwoord:<br />
<input id="r_r_password" type="password" name="wachtwoord" class="r_loginInput" value="" /><br />
Bevestig wachtwoord:<br />
<input id="r_r_password2" type="password" name="wachtwoord2" class="r_loginInput" value="" /><br />
Email adres:<br />
<input id="r_r_email" type="text" name="emailadres" class="r_loginInput" value="" /><br />
<input id="r_r_voorwaarden" type="checkbox" name="voorwaarden" class="register_checkbox"/> Ik accepteer de <a href="/algemene-voorwaarden/" target="_blank">algemene voorwaarden</a>
<input type="image" name="submit" id="r_register" src="/images/registreren.png" class="loginSubmit" />
</form>
</div>
</div>
</form>
</div>
然后当我按下登录按钮时,会出现以下代码:
$("#r_login").live("click",function() {
var unameval = $('#r_username').val();
var pwordval = $('#r_password').val();
var onthoude = $('#r_onthouden').val();
$.post( "/ajax/login.php", { gebruikersnaam: unameval, wachtwoord: pwordval, onthouden: onthoude },
function(data){
$('#reactionForm').html(data);
});
check_login();
return false;
});
对于寄存器是相同的代码,带有一些额外的变量:
$("#r_register").live("click",function() {
var unameval = $('#r_r_username').val();
var pwordval = $('#r_r_password').val();
var pword2val = $('#r_r_password2').val();
var email = $('#r_r_email').val();
var chkbox = $('#r_r_voorwaarden:checked');
if(chkbox.length > 0){
var voorwaarden = 'on';
}else{
var voorwaarden = 'off';
}
$.post( "/ajax/register.php", { gebruikersnaam: unameval, wachtwoord: pwordval, wachtwoord2: pword2val, emailadres: email, voorwaarden: voorwaarden },
function(data){
$('#reactionForm').html('');
$('#reactionForm').html(data);
}
);
return false;
});
上面我给出的关于对话框html布局的代码是当登录或注册数据错误时将返回的,并且只会为一些红色警告添加一些跨度。
但是,它并没有用新的内容(带跨度)取代当前的内容,而是取代了在线的一半
布局看起来是这样的。
|---------------------------------------|
| login button | |
| | |
| Registration |
| username: |
| - Inputfield |
| password |
| - Inputfield |
| password confirm |
| - Inputfield |
| email: |
| - Inputfield |
| register button |
|---------------------------------------|
| |
| Here will be all the comments for the |
| news article from newest to oldest |
|---------------------------------------|
登录表格几乎不见了,只有按钮还在,注册表格就在下面。
我不知道你们的咒骂是否足以给我一个问题的答案,但我就是无法解决这个问题。
问候
编辑->问题已解决问题是HTML中的一个跨度没有关闭。
<label for="onthoudenCheck">Onthouden</label><br />
<span class="r_login_option"><a href="/wachtwoord-vergeten/" title="Wachtwoord vergeten?">Vergeten?</a>
<input type="image" name="submit" id="r_login" src="/images/inloggen.png" class="loginSubmit" />
看看带有r_login_option类的span,它从未关闭。
不管怎样,我希望得到已经给出的答案。
1)不能嵌套FORM元素。2) DIV和FORM元素最后没有按正确的顺序闭合。
先解决这两件事,它就会神奇地开始工作。