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です。

これは、バインドしたイベントが、 hidden 内にあるオリジナル にのみ関連付けられることを意味します。#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 の関数を使用し、基本的に id を持つフォームでトリガーされるイベントを監視.on()するイベント ハンドラーを にアタッチします。イベント ハンドラーをターゲット要素に直接ではなく にアタッチすると、イベントがバインドされたときにid を持つフォームが存在するかどうかに関係なく、イベントによってトリガーされます。documentsubmit#genformdocumentsubmit#genform

ここで動作しています: 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 id="genform" method="POST">

今、django は CSRF トークンについて不平を言っていますが、それはあなたのものです ;)
これが新しい Fiddle です。

編集:カスタムハンドラーを呼び出さずに送信し、Joe が修正したため、間違っているようです。ただし、これらの入力を閉じる必要があります:)

于 2013-09-02T15:21:19.053 に答える