Bootstrap：使用表单参数使用 ajax 加载模式答案

【问题标题】：Bootstrap: load modal with ajax using form paramBootstrap：使用表单参数使用 ajax 加载模式
【发布时间】：2014-03-28 07:29:52
【问题描述】：

我用几个带有按钮的表单对一个页面进行分页，如下所示：

<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>

每个按钮都应打开一个引导模式，其中包含有关所选项目的更多信息（因此模式内容应从已使用 POST 或 GET 传递 itemid 参数的远程页面加载？）

我认为应该是这样的：

<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>

我希望你能理解我的需要并为我提供一些解决方案。如果您能提供我实际的代码，我将不胜感激，因为我是 javascript 新手。我愿意接受我提供的更好的替代方案。

非常感谢

【问题讨论】：

为什么是表格？为什么不只是带有 ID 的简单按钮？
如果这样更容易的话，我当然可以使用按钮。由于过去的实施，我有这些表格。

标签： javascript jquery html ajax twitter-bootstrap

【解决方案1】：

试试这个 HTML 标记

<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>

还有这个 jQuery

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

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

目前，这不会加载任何新内容，因为 URL /file.php?itemid=123 不存在，但请在您现有的项目上尝试。

【讨论】：