通过选中复选框提交表单，并在指定的 div 中显示结果

Posted 2023-05-08

【中文标题】通过选中复选框提交表单，并在指定的 div 中显示结果

【英文标题】：Submitting a form by selecting a checkbox, and having results display within a specified div

【发布时间】：2012-07-18 14:27:37

【问题描述】：

我正在尝试制作一个表单，在选中复选框时，立即提交表单，结果显示为位于同一页面上的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>

我还需要使用多个具有不同值的复选框

有什么建议吗？

【参考方案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);            
        
    );
);

您问题的第二部分：

你有几个选择：

每个复选框都有自己的唯一 ID（这不是一个好主意，因为每个复选框都需要注册一个点击事件。 为每个复选框命名，如下所示：name="mycheckbox[]"。不错的解决方案，但如果您不需要数组中所有复选框的值，那么您就不需要这个。 为所有复选框类使用一个类：class="mycheckboxes，然后您的 jquery 点击寄存器如下所示：$('.mycheckboxes).click(function (....

【讨论】：

我喜欢使用类（智能移动），但如果页面上有多个表单怎么办？

由于您正在通过复选框收听点击，然后遍历复选框的父级，您将遇到拥有该复选框的第一个表单标签。

oooo 我喜欢这样。我从来不知道。

【参考方案2】：

目前您的函数没有名称，并希望将参数传递给它，但同样您没有从任何地方调用您的函数

函数应采用以下格式

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

要调用你需要使用的函数

functionName(param1, param2, ...);

你可以有匿名函数，类似于你所拥有的，但是这些需要传递给另一个函数，否则它们不能被使用，例如你可以使用匿名函数作为某个请求的回调函数或作为变更处理程序等。

现在您需要绑定到复选框上的某种事件，这可能是某种更改事件，然后您可以调用该函数。

最后，在函数内部使用$(this) 目前没有任何意义，如果您实际上将表单作为参数传递给函数，您应该使用参数的名称而不是$(this)，在您的情况下@ 987654325@.

【参考方案3】：

你需要实际传递表单

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