SOLVED:
-by moving buttons out of form tags
I have a file which I am modifying (html contents) with js and making ajax work with buttons. But I have a problem and I can't find the error.
When I load the webpage for the first time anf I click the button (which has onclick ajax function), the page reloads and adds a question mark (?) to url (index.php becomes ...index.php?#page) #page part coming from href property.
But after this first annoying experience, the buttons work perfectly. What causes this?
I tried disabling cache on ajax, control all html id's for conflicts; but couldn't diagnose the problem.
My code:
I have a js function changehtml which changes html in index.php
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`
and var html coming from js variables like this:
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>';
And these buttons have ajax functions:
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");
}
}
