标签：jquery javascript twitter-bootstrap bootstrap-modal

当用户点击我的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'
        }

    }
} 

解决方法:

只需为取消按钮指定一个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验证插件,无需上述代码和取消按钮的任何更改,只需在引导验证脚本上方添加以下脚本即可.

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

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

注意：这里我假设模态id是#myModal,如果不是你必须将它改为你的模态id,当模态关闭并重新打开时,这将使用cancel按钮重置表单.

With Bootstrap validation example

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

标签：jquery,javascript,twitter-bootstrap,bootstrap-modal
来源： https://codeday.me/bug/20190611/1221951.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。