У меня есть форма настроек, которые я хочу, чтобы пользователь не вносил изменений по ошибке. Когда пользователь будет выполнен, он нажмет кнопку сохранения, которая выведет модальный (модальный формат Bootstrap), предложив пользователю ввести свой пароль, чтобы продолжить обработку оригинальной формы.Обработка результатов ajax post
Если введенный пароль верен, будет отправлена первая форма, иначе страница будет перезагружена/перенаправлена обратно в себя. Первая форма будет содержать много полей, но я просто использую одну для тестирования.
<form action="http://localhost.testing/render_confirm_with_password.php" method="POST" id="validation-form" class="form-horizontal confirm-form">
<div class="form-group">
<label for="deletion_reason" class="col-xs-3 col-lg-4 control-label">Enter Your Value</label>
<div class="col-sm-9 col-lg-6 controls">
<input type="text" name="value" placeholder="[email protected]" class="form-control" />
</div>
</div>
<div class="form-group">
<div class="col-sm-9 col-sm-offset-3 col-lg-6 col-lg-offset-4">
<!-- <button type="submit" class="btn btn-primary"><i class="icon-ok"></i> Process</button> -->
<button type="submit" class="btn btn-primary" data-toggle="modal" data-target="#password_confirm_modal" data-modal-type="password_confirm" data-modal-title="Delete Transaction" data-modal-text="Are you sure you want to delete this transaction?"><i class="icon-ok"></i> Process</button>
</div>
</div>
</form>
Когда пользователь нажимает кнопку «Сохранить», он выведет модальную форму, как показано ниже. Эта форма обрабатывается с использованием jQuery $ .ajax()
<form action="#" method="POST" id="validation-form" class="form-horizontal">
<div class="modal-body">
<div class="form-group">
<label for="deletion_reason" class="col-xs-3 col-lg-4 control-label">Password</label>
<div class="col-sm-9 col-lg-6 controls">
<input type="text" name="password" id="password" placeholder="your password" class="form-control" />
</div>
</div>
<p>PASSWORD RESULT -> <span id="password_result"></span></p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button id="password_confirm_submit" class="btn btn-primary">Process</button>
</div>
</form>
Код ajax показан ниже. После нажатия кнопки модального процесса он задает пароль перед отправкой его на обрабатываемую страницу php. В php я проверяю, соответствует ли пароль сохраненному паролю и эхо возвращает MATCH или NO MATCH, который отображается в модальном формате. Если результат ajax равен MATCH, я обрабатываю первую форму с помощью $ ('. Confirm-form'). Submit(); Я уверен, что я не сделал это безопасным образом.
$('#password_confirm_submit').click(function(e){
var password = $('#password').val();
e.preventDefault();
$.ajax({
type: 'POST',
data: {password: password},
url: 'http://localhost.testing/process_confirm_with_password.php',
success: function(result){
$('#password_result').html(result);
if(result == "MATCH"){
// process form_1
$('.confirm-form').submit();
}else{
// back to form_1
}
}
})
});
Я пробовал перенаправлять изнутри PHP, если пароли не совпадали, но он все еще обрабатывается. Не волнуйтесь, его трудно закодированы только для тестирования
$password = "password";
if(isset($_POST['password'])){
$pw = $_POST['password'];
if($password == $pw){
// process form_1
echo "MATCH";
}else{
// return to form_1
header('Location: http://localhost.testing/confirm_with_password.html');
echo "NO MATCH";
}
}else{
// return to form_1
echo "NOT SET";
}