2

チェックボックスが選択されるとフォームが即座に送信され、結果が同じページにある div に表示されるフォームを作成しようとしています。

これは私がこれまで試しているコードですが、運がありません:

<form action="end.php" method="get">
<input name="yourcheckbox" id="yourcheckbox" value="ten" type="checkbox"  onClick="testResults(this.form)"/>
    </form>

<script type="text/javascript">
function(form) {
    $.post($(this).attr("action"), $(this).serialize(), function(html) {
        $("#someDiv").html(html);
    });
    return false; // prevent normal submit
};
</script>

<div id="someDiv">The results from the submitted form appears here</div>

また、値の異なる複数のチェック ボックスを使用する必要があります

行き方の提案はありますか？

4

3 に答える 3

3

あなたの質問のパート1：

元のonClickハンドラーが、存在しない関数を呼び出そうとしていましたtestResults()。入力タグにハンドラーを含める代わりにonClick、クラスまたは div ID を使用してクリック ハンドラーを登録することをお勧めします。

$('#yourcheckbox').click(function(eventObj) {
    // grab the form element by traversing the eventObj parent elements
    var form = eventObj.parent(':form');
    var actionUrl = form.attrs('action');

    // now submit your form here
    $.post(actionUrl, form.serialize(), 
        function (responseData) {
              $("#someDiv").html(responseData);            
        }
    );
});

質問のパート 2:

ここにはいくつかのオプションがあります。

  1. 各チェックボックスには独自の一意の ID があります (各チェックボックスにはクリック イベントを登録する必要があるため、あまりお勧めできません。
  2. 次のように、各チェックボックスに同じ名前を付けますname="mycheckbox[]"。悪い解決策ではありませんが、配列内のすべてのチェックボックスの値が必要ない場合は、これは必要ありません。
  3. すべてのチェックボックス クラスにクラスを使用しclass="mycheckboxesます。jquery クリック レジスタは次のようになります。$('.mycheckboxes).click(function (....
于 2012-07-19T12:12:45.997 に答える
2

現在、関数には名前がなく、パラメーターが渡されることを期待していますが、どこからでも関数を呼び出していません

関数は次の形式である必要があります

function functionName(param1, param2, ...) {
    //body of function
}

関数を呼び出すには、使用する必要があります

functionName(param1, param2, ...);

あなたが持っているものと同様の匿名関数を持つことができますが、これらは別の関数に渡す必要があります。等

ここで、チェックボックスである種のイベントにバインドする必要があります。これは、関数を呼び出すことができるある種の変更イベントである可能性があります。

最後に$(this)、関数内での使用は現在のところ何の意味もありません。実際にフォームをパラメーターとして関数に渡す場合は、代わりにパラメーターの名前を使用する必要があり$(this)ますform。

于 2012-07-19T11:55:33.753 に答える
0

実際にフォームを渡す必要があります

<form action="end.php" method="get" id="FooForm">
<input name="yourcheckbox" id="yourcheckbox" value="ten" type="checkbox" />
</form>

<script type="text/javascript">
function testResults(form) {
    $.post(form.attr("action"), form.serialize(), function(html) {
        $("#someDiv").html(html);
    });
    return false; // prevent normal submit
}
$("yourcheckbox").click(function() {
    testResults($("#FooForm"));
});
</script>

<div id="someDiv">The results from the submitted form appears here</div>
于 2012-07-19T12:12:27.927 に答える