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

Question

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

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

请指教

 <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>

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

$(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'
                    },

编辑

这是我的密码验证

password: {
    validators: {
        notEmpty: {
            message: 'The Password field is required.'
        },
        stringLength: {
            min: 5,
            max: 15,
            message: 'The Password must be more than 5 and less than 15 characters long'
        }

    }
}

Answer 1

add new id attribute to cancel button

<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>

Answer 2

只需分配一个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

或

使用 bootstrap 验证插件，不需要上面的代码和取消按钮的任何更改，只需在 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)

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

Cancel button on bootstrap modal doesn't clear filled data

javascript

jquery

twitter-bootstrap

bootstrap-modal