2

我知道这已经被问了一百万次了，我已经看过几个例子，但我不知道为什么这个表单会提交。Ajax 似乎没有被调用，所以我认为这很简单，比如 div id 问题。这30分钟我一直很沮丧。

JS：

$('#genform').submit(function (e) {
    alert('hi');
    e.preventDefault();
    $.ajax({
        url: "month.php",
        type: "post",
        data: $('#form').serialize(),
        success: function (msg) {
            $("#info").html(msg);
        }
    });
});

HTML：

<!-- trigger button -->
<div class="col-md-4">
<a href="#" id="toggle" class="btn btn-default dropdown-toggle btn-sm"> Bulk PDF Export <span class="caret"></span></a> 
</div>
<!--- popup form div -->
<div id="gendiv" style="display:none;">
    <form id="genform">
        <div class="form-input">
            <select name="month">
                <option value="2013-09-01">September 2013</option>
                <option value="2013-08-01">August 2013</option>
                <option value="2013-07-01">July 2013</option>
            </select>
        </div>
        <div class="form-input"><i class="icon-ellipsis-horizontal"></i> PGY-1  <span class="pull-right"><input type="checkbox" id="pgy1" checked name="pgy[1]"></span> 
        </div>
        <div class="form-input"><i class="icon-ellipsis-horizontal"></i> PGY-2  <span class="pull-right"><input type="checkbox" id="pgy2" checked name="pgy[2]"></span> 
        </div>
        <div class="form-input"><i class="icon-ellipsis-horizontal"></i> PGY-3  <span class="pull-right"><input type="checkbox" id="pgy3" checked name="pgy[3]"></span> 
        </div>
        <div class="form-input" style="text-align:center">
            <button type="submit" class="btn btn-primary btn-xs">Generate</button>
        </div>
        <div id="info"></div>
    </form>
</div>

小提琴：http: //jsfiddle.net/KQ2nM/2/

4

2 回答 2

1

它不起作用的原因是弹出框克隆了表单，然后将 html 放在带有 class 的 div 中.popover-content。

这意味着您绑定的事件仅附加到隐藏的原始 事件。#genform#gendiv

改用这个：

$(document).on('submit', '#genform', function(e) {
    e.preventDefault();
    $.ajax({
        url: "month.php",
        type: "post",
        data: $(this).serialize(),
        success: function (msg) {
            $("#info").html(msg);
        }
    });
});

这使用 jQuery 的.on()函数并将一个事件处理程序附加到document它基本上监视submit在具有 id 的表单上触发的事件#genform。通过将事件处理程序附加到document而不是直接附加到目标元素，它会被submit事件触发，无论在#genform绑定事件时是否存在具有 id 的表单。

它在这里工作：http: //jsfiddle.net/KQ2nM/4/

于 2013-09-02T15:24:39.673 回答
-1

您缺少一些结束标签：

<div class="form-input">
    <i class="icon-ellipsis-horizontal"></i> PGY-1 <span class="pull-right">
        <input type="checkbox" id="pgy1" checked name="pgy[1]">   </input>    <--- here
    </span>
</div>

和 form 方法（否则它会吐出一个错误）：

<form id="genform" method="POST">

现在 django 抱怨 CSRF 令牌，但那是你的东西；）
这是新的 Fiddle。

编辑：似乎我弄错了，因为现在它在没有调用您的自定义处理程序的情况下提交并且乔修复了它。但是您仍然需要关闭这些输入:)

于 2013-09-02T15:21:19.053 回答