如何重置表单验证警报和错误消息？

时间：2017-09-15 01:46:24

标签： php jquery ajax bootstrap-modal

我需要帮助。因为我使用1模态进行addRoom，editRoom，editImageRoom。我只想询问是否有一种方法，如果我关闭/ x模态。将刷新/重置数据和错误消息。然后，当我单击打开模态的另一个按钮时。数据将被重置。所以错误和验证将不再显示在其他模态界面中。注意*我只使用1模态。当我点击特定按钮时，我只是隐藏了另一个字段。

我有3个不同的按钮，但它打开的模态只有一个，我只是隐藏了一些字段。

添加按钮

 <a href="javascript:void(0);" onclick="addRoom()" class="btn btn-success"><i class="fa fa-plus"></i> Add a room </a>

编辑信息按钮

<a href="javascript:void(0);" onclick="editImage('.$id.')"><img src="../images/rooms/'.$image.'" class="img-thumbnail" width="90px" height="105px"></a>

修改图片按钮

<a href="javascript:void(0);" onclick="editRoom('.$id.')" class="btn btn-success"><i class="fa fa-edit"></i></a>

这是模态

<div class="modal fade" id="modal_form" tabindex="-1" role="dialog" aria-labelledby="modal_form" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"  aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h3 class="modal-title"></h3>
        </div>
        <div class="modal-body">
            <form id="form" name="form" method="post" >
                <div class="row">
                    <div class="summary-errors alert alert-danger alert-dismissible">
                      <button type="button" class="close" aria-label="Close" data-dismiss="alert">
                        <span aria-hidden="true">×</span>
                      </button>
                      <p>Errors list below: </p>
                      <ul></ul>
                    </div>
                    <div id="for_field">
                        <div class="col-md-12">
                            <div class="form-group input-group">
                                <label class="input-group-addon control-label"><i class="fa fa-database"></i></label>
                                <input type="text" class="form-control"  id="room_num" name="room_num" placeholder="Room Number" />
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="form-group input-group">
                                <label class="input-group-addon control-label"><i class="fa fa-database"></i></label>
                                <select type="text" class="form-control"  id="room_type" name="room_type" placeholder="Room Type">
                                <option value="">--Choose Room Type--</option>
                                <?php 
                                $select = "SELECT * FROM room_type";
                                $qry = mysql_query($select)or die(mysql_query());
                                while($rows = mysql_fetch_array($qry)){
                                    echo '<option value="'.$rows['room_type_id'].'" alt="'.$rows['room_type_description'].'">'.$rows['room_type_name'].'</option>';
                                }
                                ?>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="form-group input-group">
                                <label class="input-group-addon control-label"><i class="fa fa-database"></i></label>
                                <input type="text" class="form-control"  id="rate" name="rate" placeholder="Rate" />
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="form-group input-group">
                                <label class="input-group-addon control-label"><i class="fa fa-database"></i></label>
                                <input type="text" class="form-control"  id="caps" name="caps" placeholder="Capacity" />
                            </div>
                        </div>
                    </div>
                    <div id="for_image">
                        <div class="col-md-12">
                            <div id="show_image" class="form-group input-group">
                            </div>
                        </div>
                    </div>  
                    <div id="for_upload">
                        <div class="col-md-12" >
                           <div class="form-group input-group input-group-file" >
                           <label class="input-group-addon control-label"><i class="fa fa-image"></i></label>
                            <input type="text" class="form-control" readonly>
                            <span class="input-group-btn">
                              <span class="btn btn-success btn-file">
                                <i class="icon wb-upload" aria-hidden="true"></i>
                                <input type="file" id="file" name="file" >
                              </span>
                            </span>
                          </div>    
                        </div>
                    </div>
                    <div class="control-group form-group">
                        <div class="modal-footer">
                            <input type="hidden" id="submitted" name="submitted" value="1" />
                            <input type="hidden" id="id" name="id" value="" />
                            <button type="submit" id="submit" name="submit" onclick="submit()" class="btn btn-primary">Save</button>
                            <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
                            <span align="left" id="loader"></span>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

这里是Jquery 

function addRoom()
{
    save_method = 'add';
    $('.form-group').removeClass('has-error');
    $('#form').formValidation('resetForm', true);
    $('#for_field').show();
    $('#for_image').hide();
    $('#for_upload').show();
    $('#modal_form').modal('show');
    $('.modal-title').text('Add new room');

}

// edit modal
function editRoom(u)
{
    save_method = 'update';
    $.ajax({
        url: "serverside/get/roomGet.php",
        data: "rId="+u,
        type: "POST",
        dataType: "JSON",
        cache: false,
        success: function(data)
        {
            if(data.status == 1)
            {
                $('#id').val(data.room_id);
                $('#room_num').val(data.room_num);
                $('#room_type').val(data.room_type_id);
                $('#rate').val(data.room_rate);
                $('#caps').val(data.room_capacity);
                $('#for_field').show();
                $('#for_upload').hide();
                $('#modal_form').modal('show');
                $('.form-group').removeClass('has-error');
                $('#form').formValidation('resetForm', true);
                $('.modal-title').text('Edit Room No: '+data.room_num);
            }else{
                $('body').html(data.msg);
            }
        }
    });
}

function editImage(u)
{
    save_method = 'update-image';
    $.ajax({
        url: "serverside/get/roomImageGet.php",
        data: "rId="+u,
        type: "POST",
        dataType: "JSON",
        cache: false,
        success: function(data)
        {
            if(data.status == 2)
            {
                $('#hide-field').hide();
                $('#id').val(data.room_id);
                $('#room_num').val(data.room_num);
                $('#for_field').hide();
                $('#for_image').show();
                $('#for_upload').show();
                $('#modal_form').modal('show');
                $('.form-group').removeClass('has-error');
                $('#form').formValidation('resetForm', true);
                $('.modal-title').text('Edit Image');
                $('#show_image').html(data.source);
            }else{
                $('body').html(data.msg);
            }
        }
    });
}

我的代码没有问题。我只是想问一下如何重置模态，以便1按钮（模态）中的数据不会与按钮（模态）冲突。就这样！谢谢！请给我更多好的建议，谢谢：）

1 个答案:

答案 0 :(得分：0)

如果你试图用jquery ajax调用模态，那么你真的不需要冗长的jquery show / hide代码。这是一个示例代码：

的index.html 

<!DOCTYPE html>
<html>

<head>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
</head>

<body>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>


  <ul class="nav navbar-nav" id="menu">
    <li><a href="modal-content.html" data-toggle="modal" data-target="#theModal">Edit/Delete</a>
    </li>
  </ul>
  <div id="theModal" class="modal fade text-center">
    <div class="modal-dialog">
      <div class="modal-content">
      </div>
    </div>
  </div>
</body>

</html>

模态-content.php 

<div class="modal-header">
  <button type="button" class="close" data-dismiss="modal">&times;</button>
  <h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
  <p>Some text in the modal.</p>
</div>
<div class="modal-footer">
  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>

您可以为模型使用三个不同的文件，或者通过Ajax为所有操作调用相同的模式。另外，您可以点击此链接：Getting Bootstrap's modal content from another page

相关问题
最新问题