Question

105

Cancel button on bootstrap modal doesn't clear filled data

rated 0 times [ 106] [ 1] / answers: 1 / hits: 20388 / 9 Years ago, tue, august 11, 2015, 12:00:00

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

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'

        }



    }

}

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

blair

Add To Favorites

Follow

Total Points: 384

Total Questions: 108

Total Answers: 86

Location: Northern Ireland

Member since Tue, May 5, 2020

4 Years ago

answered 9 Years ago jaredsages · Accepted Answer

Just assign an id=reset to cancel button

<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

$(document).ready(function() {

    $(#reset).click(function() {

        $(':input','#myform2').val();

    });

});

Fiddle Example with form 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 #myModal if not you have to change it to your modal id, this will reset the form with cancel button when modal closed and reopen again.

With Bootstrap validation example

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