2

I'm trying to produce a form whereby when a check box is selected, the form is instantly submitted and results are displayed into a div located on the same page.

这是我到目前为止正在尝试的代码，但没有任何运气：

<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

您的问题的第一部分：

您的原始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);            
        }
    );
});

你的问题的第二部分：

您在这里有几个选择：

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