CODEWITHSUNDEEP
javascriptjqueryhtmlajaxtwitter-bootstrap
bockzior
bockzior

Reputation: 199

Bootstrap: load modal with ajax using form param

I page a page with several forms with buttons, like this:

<form name="openconfirm">
    <input type="hidden" name="itemid" value="123">
    <button type="submit" class="btn btn-sm btn-success ">Item 123</button>
</form>
<form name="openconfirm">
    <input type="hidden" name="itemid" value="124">
    <button type="submit" class="btn btn-sm btn-success ">Item 125</button>
</form>
<form name="openconfirm">
    <input type="hidden" name="itemid" value="125">
    <button type="submit" class="btn btn-sm btn-success ">Item 125</button>
</form>

Each button should open a bootstrap modal with more info about the selected item (so the modal content should be loaded from a remote page which has been passed the itemid param using POST or GET ?)

I believe it should be something like this:

<script>
  $(function(){
      $('form[name="openconfirm"]').on('submit', function(){
       itemid = itemid input from form; <- Not actual code
       openModal(#myModal, "file.php?itemid=" + itemid); <- Not actual code
      })
  })
</script>

I hope you can understand what I need and provide me with some solution. I would be thankful if you could provide me actual code since I'm new to javascript. I'm open to better alternatives from the one I've provided.

Many thanks

Upvotes: 0

Views: 1323

Answers (1)

Miljan Puzović
Miljan Puzović

Reputation: 5820

Try with this HTML markup

<button type="button" data-toggle="modal" data-target="#myModal" id="123" class="btn someclass">Item 123</button>
<button type="button" data-toggle="modal" data-target="#myModal" id="124" class="btn someclass">Item 124</button>
<button type="button" data-toggle="modal" data-target="#myModal" id="125" class="btn someclass">Item 125</button>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">LOADED CONTENT</div>
    </div>
</div>

and this jQuery

$(function () {
    $('.someclass').on('click', function () {
        var itemid = $(this).attr('id');
        $(".modal-content").load("/file.php?itemid=" + itemid);
    });
});

http://jsfiddle.net/3dSPw/1/

Currently, this doesn't load any new content because URL /file.php?itemid=123 it's not existent, but try it on your existing project.

Upvotes: 1

Related Questions