解决:
- 通过表单标签移动按钮
我有一个文件,我正在修改(html内容)与js和使用按钮工作ajax。但是我遇到了问题,我无法找到错误。
当我第一次加载网页时,我点击按钮(具有onclick ajax功能),页面重新加载并向url 添加问号(?)(index.php变为...... index.php?#page) #page部分来自href属性。
但在这第一次烦人的经历之后,这些按钮完美无缺。是什么原因造成的?
我尝试在ajax上禁用缓存,控制所有html id以解决冲突;但无法诊断问题。
我的代码:
我有一个js函数changehtml,它改变了index.php中的html
function changehtml(tab){
switch(tab){
case 'register':
var html = registericerik;
var silinme = 0;
var left = lefticerik;
var right = righticerik;
var middleclass = kucukmiddle;
if(silinme){
left = "";
right = "";
middleclass = buyukmiddle;
}
document.getElementById('leftyeri').innerHTML = left;
document.getElementById('rightyeri').innerHTML = right;
document.getElementById('karus').innerHTML = karus;
document.getElementById('elmorad').innerHTML = elmorad;
document.getElementById('toplamaccount').innerHTML = toplamaccount;
document.getElementById('onlinesayisi').innerHTML = onlinesayisi;
document.getElementById('middle').className = middleclass;
document.getElementById('news').innerHTML = html;
document.getElementById('captcharegister').src='captcha.php?'+Math.random();
break;
case 'anasayfa' :
var html = anasayfaicerik;
var silinme = 0;
var left = lefticerik;
var right = righticerik;
var middleclass = kucukmiddle;
if(silinme){
left = "";
right = "";
middleclass = buyukmiddle;
}
document.getElementById('leftyeri').innerHTML = left;
document.getElementById('rightyeri').innerHTML = right;
document.getElementById('karus').innerHTML = karus;
document.getElementById('elmorad').innerHTML = elmorad;
document.getElementById('toplamaccount').innerHTML = toplamaccount;
document.getElementById('onlinesayisi').innerHTML = onlinesayisi;
document.getElementById('middle').className = middleclass;
document.getElementById('news').innerHTML = html;
break;
case 'forgotpassword': `..........continues like this for all tabs`
和var html来自js变量,如下所示:
var forgotpasswordicerik = '<div class="registrationform">'+
'<form class="form-horizontal">'+
' <fieldset>'+
' <legend>Şifre Yenileme <i class="fa fa-pencil pull-right"></i></legend>'+
' <div class="form-group">'+
'<label for="inputEmail" class="col-lg-2 control-label">'+
' Kullanıcı Adı</label>'+
' <div class="col-lg-10">'+
' <input type="text" class="form-control" id="accountforgot" placeholder="Kullanıcı Adı">'+
' </div>'+
' </div>'+
' <div class="form-group">'+
' <label for="inputPassword" class="col-lg-2 control-label">'+
' Email</label>'+
' <div class="col-lg-10">'+
' <input type="text" class="form-control" id="emailforgot" placeholder="Email">'+
' </div>'+
' </div>'+
'<div class="form-group">'+
' <label for="inputPassword" class="col-lg-2 control-label">'+
' Gizli Sorunuz</label>'+
' <div class="col-lg-10">'+
' <input type="text" class="form-control" id="gizlisoruforgot" placeholder=" Gizli Soru">'+
' </div>'+
' </div>'+
'<div class="form-group">'+
' <label for="inputPassword" class="col-lg-2 control-label">'+
' Gizli Cevabınız</label>'+
' <div class="col-lg-10">'+
' <input type="text" class="form-control" id="gizlicevapforgot" placeholder=" Gizli Cevap">'+
' </div>'+
' </div>'+
'<div class="form-group">'+
'<center>'+
'<img id="captchaforgot" src="captcha.php" alt="CAPTCHA Image" />'+
'<input style="background-color:black;" type="text" id="captchainputforgot" size="10" maxlength="15" />'+
' <div class="col-lg-10">'+
' </div>'+
'<a onclick="document.getElementById('+"'"+'captchaforgot'+"'"+').src='+"'"+'captcha.php?'+"'"+'+Math.random();">Resmi Değiştir</a>'+
'</div>'+
'</center>'+
'<div class="form-group">'+
'<div class="col-lg-10 col-lg-offset-2">'+
' </div>'+
' </div>'+
' <div class="form-group">'+
' <div class="col-lg-10 col-lg-offset-2">'+
'<button onclick="sendforgotpass()" class="btn btn-primary">'+
'Gönder</button>'+
'</div>'+
' </div>'+
'</fieldset>'+
'</form>'+
' </div>';
var registericerik = '<div class="registrationform">'+
'<form class="form-horizontal">'+
' <fieldset>'+
' <legend>Kayıt Formu <i class="fa fa-pencil pull-right"></i></legend>'+
' <div class="form-group">'+
'<label for="inputEmail" class="col-lg-2 control-label">'+
' Kullanıcı Adı</label>'+
' <div class="col-lg-10">'+
' <input type="text" class="form-control" id="inputidregister" placeholder="Kullanıcı Adı">'+
' </div>'+
' </div>'+
' <div class="form-group">'+
' <label for="inputPassword" class="col-lg-2 control-label">'+
' Şifre</label>'+
' <div class="col-lg-10">'+
' <input type="password" class="form-control" id="inputpasswordregister" placeholder="Şifre">'+
' </div>'+
' </div>'+
'<div class="form-group">'+
' <label for="inputPassword" class="col-lg-2 control-label">'+
' Şifre Onay</label>'+
' <div class="col-lg-10">'+
' <input type="password" class="form-control" id="inputpassword2register" placeholder=" Şifre Onay">'+
' </div>'+
' </div>'+
'<div class="form-group">'+
' <label for="inputEmail" class="col-lg-2 control-label">'+
' Email</label>'+
' <div class="col-lg-10">'+
' <input type="text" class="form-control" id="inputemailregister" placeholder="Email">'+
'</div>'+
' </div>'+
'<div class="form-group">'+
' <label for="inputEmail" class="col-lg-2 control-label">'+
'Gizli Soru</label>'+
' <div class="col-lg-10">'+
' <input type="text" class="form-control" id="secretquesregister" placeholder="Gizli Soru">'+
' </div>'+
'</div>'+
'<div class="form-group">'+
' <label for="inputEmail" class="col-lg-2 control-label">'+
'Gizli Cevap</label>'+
' <div class="col-lg-10">'+
' <input type="text" class="form-control" id="inputsecretregister" placeholder="Gizli Cevap">'+
' </div>'+
'</div>'+
'<div class="form-group">'+
'<center>'+
'<img id="captcharegister" src="captcha.php" alt="CAPTCHA Image" />'+
'<input style="background-color:black;" type="text" id="captchainputregister" size="10" maxlength="15" />'+
' <div class="col-lg-10">'+
' </div>'+
'<a onclick="document.getElementById('+"'"+'captcharegister'+"'"+').src='+"'"+'captcha.php?'+"'"+'+Math.random();">Resmi Değiştir</a>'+
'</div>'+
'</center>'+
'<div class="form-group">'+
'<div class="col-lg-10 col-lg-offset-2">'+
' <div class="checkbox">'+
' <label>'+
'<input type="checkbox" id="checkboxregister">Kabul ediyorum <a href="#"><span class="term-color">kurallar</span></a>'+
' </label>'+
' </div>'+
' </div>'+
' </div>'+
' <div class="form-group">'+
' <div class="col-lg-10 col-lg-offset-2">'+
' <button type="reset" class="btn btn-warning">'+
'İptal</button>'+
'<button onclick="register()" class="btn btn-primary">'+
'Üye Ol</button>'+
'</div>'+
' </div>'+
'</fieldset>'+
'</form>'+
' </div>';
这些按钮具有ajax功能:
function register(){
var id = "";
var pw= "";
var pw2= "";
var email= "";
var secretques="";
var secretans= "";
var checkbox= "";
var captchainput="";
id = document.getElementById('inputidregister').value;
pw = document.getElementById('inputpasswordregister').value;
pw2 = document.getElementById('inputpassword2register').value;
email = document.getElementById('inputemailregister').value;
secretans = document.getElementById('inputsecretregister').value;
secretques = document.getElementById('secretquesregister').value;
captchainput =document.getElementById('captchainputregister').value;
checkbox = document.getElementById('checkboxregister').checked;
if(id && pw && pw2 && email && secretans){
if( pw == pw2){
if(checkbox){
var object = {'id': id,
'pw': pw,
'pw2': pw2,
'email': email,
'secretans': secretans,
'checkbox': checkbox,
'captchainput':captchainput,
'secretques': secretques };
$.ajax( {
type: 'POST',
url: 'register.php',
data: {"data" : JSON.stringify(object)},
success: function(response) {
swal(response);
},error: function(xhr, textStatus, errorThrown){alert('phphatasi');}
});
}else{
swal("You should accept the terms before register");
}
}else{
swal("Password and Password Verify don't match");
}
}else{
swal("Please fill all sections");
}
}