Question

当用户点击我的jQuery模式表单上的取消按钮时，如何清除填充数据。

目前，当我点击取消按钮时，它只关闭弹出框，当我重新打开时，以前填充的数据仍然存储。

请咨询

strongify

我也使用过bootstrap验证表单字段。

 <form id="myform2" data-toggle="validator" class="form-horizontal" role="form" method="POST" action="#">
        <div class="form-group">
            <div class="col-md-12">
                <label class="control-label popup-label">Full Name</label>
                <input required type="text" class="form-control" name="full_name"
                       value="{{ old('full_name') }}">
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-12">
                <label class="control-label popup-label">Username</label>
                <input required type="text" class="form-control" name="username"
                       value="{{ old('username') }}">
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-12">
                <label class="control-label popup-label">Password</label>
                <input pattern=".{5,10}" required title="5 to 10 characters"
                       type="password" class="form-control"
                       name="password" value="{{ old('password') }}">
            </div>
        </div>
        <div class="modal-footer">
            <button type="submit" class="btn btn-primary">Create</button>
            <button type="button" class="btn btn-default" data-dismiss="modal">Cancel
            </button>
        </div>
    </form>

修改

这是我的密码验证

$(document).ready(function () {
    $('#myform2').bootstrapValidator({
        // To use feedback icons, ensure that you use Bootstrap v3.1.0 or later
        icon: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            full_name: {
                validators: {
                    notEmpty: {
                        message: 'The Full Name field is required'
                    },
                    stringLength: {
                        min: 5,
                        max: 15,
                        message: 'The Full Name must be more than 5 and less than 15 characters long'
                    },

Answer 1

只需指定id="reset"取消按钮

即可

<button type="button" class="btn btn-default" id="reset" data-dismiss="modal">Cancel</button>

以下代码执行技巧

$(document).ready(function() {
    $("#reset").click(function() {
        $("input").val("");
    });
});

Fiddle Example

或更好的方法，使用表单id="myform2"

$(document).ready(function() {
    $("#reset").click(function() {
        $(':input','#myform2').val("");
    });
});

Fiddle Example with form id

OR

使用bootstrap验证插件，不需要上面的代码和取消按钮的任何更改，只需在引导程序验证脚本上方添加以下脚本。

    $('#myModal').on('hidden.bs.modal', function(){
        $(this).removeData('bs.modal');
        $('#myform2').bootstrapValidator('resetForm', true);
    });

    $('#myform2').bootstrapValidator({
            //Validation code comes here
    });

注意：这里我假设模态ID是#myModal，如果不是你必须将其更改为你的模态id，当模态关闭并重新打开时，这将使用取消按钮重置表单。

With Bootstrap validation example

With Bootstrap Validation example (auto reset inputs with preload values in form on modal load)

Answer 2

为取消按钮添加新的id属性

<button id="cancel" type="button" class="btn btn-default" data-dismiss="modal">Cancel
                                                </button>
<script type="text/javascript">
    $(document).ready(function() {
        // clear input values
        $('#cancel').on('click', function() {
            $('form').find('input').val('');
        });

    });

</script>

bootstrap模式上的取消按钮不会清除填充数据

2 个答案: