1

I am working on a project which uses bootstrap3 to implement a modal containing edit form. I can display the modal and load original data into each input field by setting the value attribute. The problem is when I make some change and click Close button to cancel it. Then load this edit form again and see the content is what edited last time not the original one. I do not know how to restore it on clicking the Close button. Besides, where is the user input stored in modal? Below is my code

<div class="span4">
            <div class="panel panel-primary">
                <div class="panel-heading">qawsedrftgDI</div>
                <div class="panel-body">jhyuh</div>
            </div>
            <p>
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#editItem2">Edit</button>
                <input type="button" class="btn btn-default" value="Delete" onclick="javascript:deleteCategoryNoneItem(2);" />
            </p>
            <div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" id="editItem2">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                            <h4 class="modal-title" id="myModalLabel">Make Your Change</h4>
                        </div>
                        <div class="modal-body">
                            <form class="form-horizontal" method="POST" id="existingItem2">
                                <div class="form-group">
                                    <label class="control-label col-md-2">Title</label>
                                    <div class="col-md-8">
                                        <input type="text" class="form-control" value="qawsedrftgDI" id="title2" />
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label col-md-2">Content</label>
                                    <div class="col-md-8">
                                        <textarea rows="10" class="form-control" id="content2">jhyuh</textarea>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                            <button type="button" class="btn btn-primary" id="changeExistingItem" onclick="javascript:modifyCategoryNoneItem(2);">Save changes</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
Bing Lan
  • 1,121
  • 1
  • 13
  • 26

1 Answers1

3

See the documentation for Bootstrap modals. In the event section you can use "hidden.bs.modal" event to do some stuff after the modal is closed. So it can look like:

$('#myModal').on('hidden.bs.modal', function (e) {
  $(this).find('input').val('');
});

From here you can specify "placeholder" attributes on input fields, or do some javascript in the event handler.

ndcweb
  • 725
  • 4
  • 10
  • So, the content in "placeholder" persists even user input something? Question comes with this is "placeholder" is only supported by IE10, how about IE9 and earlier? – Bing Lan Jun 13 '14 at 12:07
  • The content in `placeholder` is shown only if the input is empty. If it has some `value`, then `placeholder` content will hide. – ndcweb Jun 13 '14 at 12:09
  • I have to say this solution is so smart and I love it:) – Bing Lan Jun 13 '14 at 12:17
  • 1
    I think this answer is more useful - http://stackoverflow.com/a/20918538/3033149 – James Oct 12 '15 at 20:05