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

Cancel button on bootstrap modal doesn't clear filled data

提问by faz faz

How to clear filled data when user clicks on the cancel button on my jQuery modal form.

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

Currently when I click on the cancel button it only closes the popup box and when I reopen it previous filled data is still stored.

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

Please advice

请指教

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

I have used bootstrap validations as well for form fields.

我也对表单字段使用了引导程序验证。

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

Edit

编辑

Here is my password validation

这是我的密码验证

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

    }
} 

回答by Shehary

Just assign an id="reset"to cancel button

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

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

and following code do the trick

和下面的代码做的伎俩

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

Fiddle Example

小提琴示例

Or Better approach, use form id="myform2"

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

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

Fiddle Example with form id

带有表单 ID 的小提琴示例

OR

或者

With bootstrap validation plugin, no need of above code and any change in cancel button, just add following script above your bootstrap validation script.

使用引导验证插件，无需上述代码和取消按钮的任何更改，只需在引导验证脚本上方添加以下脚本即可。

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

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

Note: Here I'm assuming that modal id is #myModalif not you have to change it to your modal id, this will reset the form with cancel button when modal closed and reopen again.

注意：这里我假设 modal id 是#myModal如果不是你必须将它更改为 modal id，这将在 modal 关闭并再次重新打开时使用取消按钮重置表单。

With Bootstrap validation example

使用 Bootstrap 验证示例

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

使用 Bootstrap 验证示例（在模态加载时具有预加载值的自动重置输入）

回答by Oli Soproni B.

add new id attribute to cancel button

添加新的 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>