I'm a beginner in jquery and bootstrap, so forgive my mistakes. I have created 3 tabs with bootstrap for the user profile settings page. I have three tabs Profile, Security, Account. On each tab, there is a form with some inputs. The problem is In the second security tab. the user can update their passwords, so I used the PHP header function to reset the form. but when I reload the page, the page redirects to the profile tab, not the security tab. I have checked some already asked questions here. but sad;y none of them worked for me.
Javascript Code:
var url = document.location.toString();
if (url.match('#')) {
$('.setting-tabs a[href="#' + url.split('#')[1] + '"]').show('tab');
}
$('.setting-tabs a').on('click', function (e) {
window.location.hash = e.target.hash;
})
Also, have tried this:
$('#settingsTab a').click(function(e) {
e.preventDefault();
$(this).tab('show');
});
$("div.setting-tabs > a").on("shown.bs.tab", function(e) {
var id = $(e.target).attr("href").substr(1);
window.location.hash = id;
});
var hash = window.location.hash;
$('#settingsTab a[href="' + hash + '"]').tab('show');
Here is my edit_account.php
<div id="settingsTab" class="list-group setting-tabs">
<a href="edit_account.php#profile" class="list-group-item active" data-target="#profile" data-toggle="tab"><span aria-hidden="true">Profile</span></a>
<a href="edit_account.php#security" class="list-group-item" data-target="#security" data-toggle="tab"><span aria-hidden="true">Security</span></a>
<a href="edit_account.php#account" class="list-group-item" data-target="#account" data-toggle="tab"><span aria-hidden="true">Account</span></a>
<div class="mb-4"></div>
</div>
<div id="profile" class="tab-pane fade active show">
<h3 style="font-weight: 400;">Need to update your profile?</h3>
<hr class="mb-4">
<form action="" method="post" autocomplete="off">
<div class="row mb-3">
<div class="col-lg-3">
<div class="form-group">
<label class="label-profile">EMAIL</label>
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<?php
$user_id = $_SESSION['userId'];
$sql = "SELECT * FROM users WHERE user_id = ?";
$stmt = mysqli_stmt_init($connection);
if (!mysqli_stmt_prepare($stmt, $sql)) {
echo "Query Failed";
} else {
mysqli_stmt_bind_param($stmt, "i", $user_id);
mysqli_stmt_execute($stmt);
$result = mysqli_stmt_get_result($stmt);
while ($row = mysqli_fetch_array($result)) {
$usermail = $row['email'];
echo "<input class='form-control' name='email' value='{$usermail}' type='email'>";
}
}
?>
</div>
</div>
<div class="col-lg-3">
<div class="form-group">
<input type="submit" name="email-update" value="Update" class="btn btn-outline-primary float-right">
</div>
</div>
</form>
</div>
<div class="row mb-3">
<div class="col-lg-3">
<div class="form-group">
<label class="label-profile">PHONE</label>
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<p>Your phone is verified with Bitcoinerrs. Click Edit to change your phone number</p>
</div>
</div>
<div class="col-lg-3">
<div class="form-group">
<a href="phone_verify" class="btn btn-outline-primary float-right">Edit</a>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-3">
<div class="form-group">
<label class="label-profile">IDENTITY</label>
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<p>Your identity is not verified. Click Verify to verify your identity</p>
</div>
</div>
<div class="col-lg-3">
<div class="form-group">
<a href="identity_verify" class="btn btn-outline-primary float-right">Verify</a>
</div>
</div>
</div>
</div>
<div id="security" class="tab-pane fade">
<h3 style="font-weight: 400;">CHANGE PASSWORD</h3>
<hr class="mb-4">
<form action="" method="post" autocomplete="off">
<?php
if (isset($_POST['update-pass'])) {
$currentPass = escape($_POST['currentPass']);
$passwordNew = escape($_POST['passwordNew']);
$passwordRepeat = escape($_POST['passwordRepeat']);
if (empty($currentPass) || empty($passwordNew) || empty($passwordRepeat)) {
header("Location: edit_account.php?error=emptyfields");
exit();
} elseif (strlen($passwordNew) <= '8') {
header("Location: edit_account.php?error=passwordcheck");
exit();
} elseif ($passwordNew !== $passwordRepeat) {
header("Location: edit_account.php?error=passwordverify");
exit();
} else {
$sql = "SELECT password FROM users WHERE user_id = ?";
$stmt = mysqli_stmt_init($connection);
if (!mysqli_stmt_prepare($stmt, $sql)) {
header("Location: edit_account.php?error=sqlerror");
exit();
} else {
mysqli_stmt_bind_param($stmt, "i", $user_id);
mysqli_stmt_execute($stmt);
mysqli_stmt_store_result($stmt);
$resultCheck = mysqli_stmt_num_rows($stmt);
if (!$resultCheck > 0) {
header("Location: edit_account.php?error=invalidpass");
exit();
} else {
$sql = "UPDATE users SET password = ? WHERE user_id = ?";
$stmt = mysqli_stmt_init($connection);
if (!mysqli_stmt_prepare($stmt, $sql)) {
header("Location: edit_account.php?error=sqlerror2");
exit();
} else {
$hashed_password = password_hash($passwordNew, PASSWORD_DEFAULT);
mysqli_stmt_bind_param($stmt, "si", $hashed_password, $user_id);
mysqli_stmt_execute($stmt);
header("Location: edit_account.php?passupdate=success");
exit();
}
}
}
}
mysqli_stmt_close($stmt);
mysqli_close($connection);
}
?>
<div class="row mb-3">
<div class="col-lg-4">
<div class="form-group">
<label class="label-profile">Current Password</label>
</div>
</div>
<div class="col-lg-8">
<div class="form-group">
<input class="form-control" name="currentPass" type="password">
</div>
</div>
</div>
<div class="row mb-3">
<div class="col-lg-4">
<div class="form-group">
<label class="label-profile">New Password</label>
</div>
</div>
<div class="col-lg-8">
<div class="form-group">
<input class="form-control" name="passwordNew" type="password">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4">
<div class="form-group">
<label class="label-profile">Confirm Password</label>
</div>
</div>
<div class="col-lg-8">
<div class="form-group">
<input class="form-control" name="passwordRepeat" type="password">
<p class="mt-3">8 characters or longer. Combine upper and lowercase letters and numbers.</p>
</div>
</div>
</div>
<div class="form-group mb-5">
<input type="submit" name="update-pass" value="Save Changes" class="btn btn-primary float-right">
</div>
</form>
<hr class="my-5">
<div class="row">
<div class="col-lg-4">
<div class="form-group">
<label class="label-profile">TWO FACTOR AUTHENTICATION</label>
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<p>To help keep your account secure, we'll submit a code when using a new device to log in. We'll send the code via email.</p>
</div>
</div>
<div class="col-lg-2">
<div class="form-group">
<input type="checkbox" checked data-toggle="toggle">
</div>
</div>
</div>
</div>