出现问题时,在模态窗口中显示错误

时间:2017-04-18 12:11:57

标签: javascript php html css ajax

我需要一些帮助。当我的模态窗口出现问题时,我需要显示错误。现在,正在关闭,也有错误。我试图找到一些Ajax和Javascript来解决问题,但我无法让它运作良好。有人可以帮助我并感谢你的帮助吗?

if($result->num_rows == 0) {
                    $this->errors[] = "User not fund";
                }else{

模态窗口

<!-- Modal -->    
<div class="modal fade" id="resetPassword" role="dialog">
<div class="modal-dialog">

  <!-- Modal content-->
  <div style="background-color:#3a3a38;" class="modal-content">
    <div class="modal-header">
      <h4 style="color:#fff" class="modal-title">Nulstill adgangskode</h4>
    </div>
    <div class="modal-body">
      <form role="form" action="index.php" method="post">
                                <div class="form-group">
                                    <label class="sr-only" 
for="email_forgot">Email</label>
                                    <input type="text" name="email_forgot" 
placeholder="email..." class="form-username form-control" id="form-username">
                                </div>
                                 <input style="margin-left:auto;margin-
right:auto;" data-backdrop="static" data-keyboard="false" class="btn-lg btn-
default btn-block" type="submit" value="send" name="forgot">
                            </form>
<?php                                              

if (isset($user)) {
if ($user->errors) {
    foreach ($user->errors as $error) {
        echo  '<a style="color:red">'.$error.'</a>';
    }
}
if ($user->messages) {
    foreach ($user->messages as $message) {
        echo '<span style="color:red">'. $message.'</span>';
    }
}
}
?>
    </div>

  </div>

</div>

2 个答案:

答案 0 :(得分:0)

使用ajax提交表单并使用javascript显示错误,而不是使用php。现在您的页面重新加载并丢失了数据。

<script
  src="https://code.jquery.com/jquery-2.2.4.min.js"
  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
  crossorigin="anonymous"></script>



$('form').on('submit', function(event){
  event.preventDefault();
  var formData = $("form").serializeArray();

  $.ajax({
    url: "index.php",
    type: "POST",
    data: formData,
    dataType: 'json',
    success:function(data){
      $('body').html('<h1>Thank You</h1>');   
    },
    error:function(){
      $('body').html('<h1>Error</h1>');   
    }  
  });
});   

答案 1 :(得分:0)

发布数据时有两种不同的选择;你可以ajax验证数据(这意味着你要在不同的文件中验证内容),或者你是ajax-提交数据(这意味着你要验证并使用不同文件中的数据)。

我建议ajax-submitting,因为这样可以满足你表格的需要。

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>

    var $form = $('#resetPassword form');

    $form.submit(function(event) {

        event.preventDefault();

        $.ajax({

            type:   $form.attr('method'),
            url:    $form.attr('action'),
            data:   $form.serialize(),

            success: function ( response ) {

                if(response != "") {

                    alert("Errors: " + response);

                } else {

                    alert("Password reset!");

                }

            }
        });
    });
</script>

要使它工作,你必须使用表单上的METHOD属性指向一个处理文件,你必须创建它(例如; ajax-reset-password.php )。在那里只打印所有错误,如果有的话。如果没有发生错误,请不要打印任何内容。上面的javascript将显示消息“密码重置!”。