I have a bootstrap modal as following:

<div class="modal fade" id="container-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="false">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <ul class="modal_containers" id="list_ctns">
         <li><img src="images/container.png"></li>
         <li><img src="images/container.png"></li>
         <li><img src="images/container.png"></li>
        </ul>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

The above modal is triggered when a particular button is clicked which can be considered as a repository of certain elements.

I have a form which has a submit button. On clicking that submit button, I want to append a list item to the modal_body.

<div class="button-containers">
 <button class="btn btn-success" id="save_item" type="submit">Save</button>
</div>

So, I wrote this simple javascript snippet to append the list item to the modal.

$(document).ready(function(){
$('#save_item').click(function(e){
   $("#list_ctns").append("<li><img src="images/container.png"></li>")
});

});

I am not sure, where I am making a mistake. Please help me with your suggestions.

Cheers, SZ

I have a bootstrap modal as following:

<div class="modal fade" id="container-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="false">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <ul class="modal_containers" id="list_ctns">
         <li><img src="images/container.png"></li>
         <li><img src="images/container.png"></li>
         <li><img src="images/container.png"></li>
        </ul>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

The above modal is triggered when a particular button is clicked which can be considered as a repository of certain elements.

I have a form which has a submit button. On clicking that submit button, I want to append a list item to the modal_body.

<div class="button-containers">
 <button class="btn btn-success" id="save_item" type="submit">Save</button>
</div>

So, I wrote this simple javascript snippet to append the list item to the modal.

$(document).ready(function(){
$('#save_item').click(function(e){
   $("#list_ctns").append("<li><img src="images/container.png"></li>")
});

});

I am not sure, where I am making a mistake. Please help me with your suggestions.

Cheers, SZ

• javascript
• jquery
• html
• twitter-bootstrap

Share Improve this question Follow asked Aug 3, 2015 at 18:25 ShellZeroShellZero 4,6711212 gold badges4242 silver badges5959 bronze badges 1

• if your button is of type submit then its going to cause a postback – Sushil Commented Aug 3, 2015 at 18:27

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

Mind the quotes when you pass that as a string to set a value.

"<li><img src="images/container.png"></li>"

should be either

"<li><img src='images/container.png'></li>"

or

"<li><img src=\"images/container.png\"></li>"

Also don't forget to prevent the default action of the submit button.

$('#save_item').click(function(e) {
   e.preventDefault();
   $("#list_ctns").append("<li><img src='images/container.png'></li>")
});

The button type is submit so when you click it, the form will submit causing the page to be redirected to the "action" url.

You can create a JS function to handle it like this;

function handleModal(form)
{
    $("#list_ctns").append("<li><img src=\"images/container.png\"></li>");

    //Use $.AJAX() to submit the form without refreshing the page.

    return false; //this prevent the form from being submitted. Keep it if you are going to use $.AJAX() to submit the form or remove it if you want the form to submit normally.
}

and then call it from the <form> node by adding onsubmit="return handleModal(this);" attribute to it.