选中复选框时提交表单

Posted 2023-02-22

【中文标题】选中复选框时提交表单

【英文标题】：submitting a form when a checkbox is checked

【发布时间】：2012-05-23 01:36:45

【问题描述】：

有没有办法在？

<form id="formName" action="<?php echo $_SERVER['PHP_SELF'];?>" method="get">
    <input type ="checkbox" name="cBox[]" value = "3">3</input>
    <input type ="checkbox" name="cBox[]" value = "4">4</input>
    <input type ="checkbox" name="cBox[]" value = "5">5</input>
    <input type="submit" name="submit" value="Search" />
</form>

<?php
    if(isset($_GET['submit']))
        include 'displayResults.php';
    
?>

这就是我目前所拥有的，但是当用户选中或取消选中复选框时，我想提交没有提交按钮的表单。有什么帮助吗？

【参考方案1】：

通过向输入标签添加onChange 属性来使用javascript

<input onChange="this.form.submit()" ... />

【讨论】：

哇，就这么简单！！

如何添加javascript确认？

未捕获的类型错误：Cannot read property 'submit' of undefined at htmlFormElement.onchange

【参考方案2】：

是的，这是可能的。

<form id="formName" action="<?php echo $_SERVER['PHP_SELF'];?>" method="get">
    <input type ="checkbox" name="cBox[]" value = "3" onchange="document.getElementById('formName').submit()">3</input>
    <input type ="checkbox" name="cBox[]" value = "4" onchange="document.getElementById('formName').submit()">4</input>
    <input type ="checkbox" name="cBox[]" value = "5" onchange="document.getElementById('formName').submit()">5</input>
    <input type="submit" name="submit" value="Search" />
</form>

通过将onchange="document.getElementById('formName').submit()" 添加到每个复选框，您将在复选框更改时提交。

如果你对 jQuery 没问题，它会更容易（而且不显眼）：

$(document).ready(function()
    $("#formname").on("change", "input:checkbox", function()
        $("#formname").submit();
    );
);

对于表单中的任意数量的复选框，当“更改”事件发生时，表单就会被提交。如果您使用.on() 方法动态创建更多复选框，这甚至会起作用。

【讨论】：

我已经实现了这段代码，但是当我选中复选框时，搜索结果不显示。需要修改php代码吗？

它与 PHP 无关 - 检查您的 JavaScript 控制台以确保没有错误。点击提交是否有效？

完全没有错误，你给我的两个建议我都试过了。

抱歉在我完成之前按了“添加”。肯定与php有关吗？如果我更改提交按钮的“名称”，if(isset($_GET['submit'])) 不起作用，有什么帮助吗？

再看一遍，PHP 很好 - 它正在寻找 $_GET['submit'] 以具有值，它应该。你有 jQuery 库吗？没有它，第二个建议将行不通。我扩展了 jQuery 以包含整个块 - 我意识到我不知道您对 jQuery 有多熟悉。

【参考方案3】：

$(document).ready(
    function()
    
        $("input:checkbox").change(
            function()
            
                if( $(this).is(":checked") )
                
                    $("#formName").submit();
                
            
        )
    
);

虽然为每个复选框添加类可能会更好

$(".checkbox_class").change();

这样您就可以选择哪些复选框提交表单，而不是全部提交。

【参考方案4】：

我已经搞砸了大约四个小时，并决定与您分享。

您可以通过单击复选框来提交表单，但奇怪的是，在 php 中检查提交时，您希望在选中或取消选中复选框时设置表单。但这不是真的。只有当您实际选中该复选框时才会设置该表单，如果您取消选中它，它将不会被设置。 复选框输入类型末尾的“选中”一词将导致复选框显示已选中，因此如果您的字段被选中，则必须像下面的示例一样反映这一点。当它被取消选中时，php 会更新字段状态，这将导致选中的单词消失。

您的 HTML 应该如下所示：

<form method='post' action='#'>
<input type='checkbox' name='checkbox' onChange='submit();'
<?php if($page->checkbox_state == 1)  echo 'checked' ; ?>>
</form>

和 php：

if(isset($_POST['checkbox'])) 
   // the checkbox has just been checked 
   // save the new state of the checkbox somewhere
   $page->checkbox_state == 1;
 else 
   // the checkbox has just been unchecked
   // if you have another form ont the page which uses than you should
   // make sure that is not the one thats causing the page to handle in input
   // otherwise the submission of the other form will uncheck your checkbox
   // so this this line is optional:
      if(!isset($_POST['submit'])) 
          $page->checkbox_state == 0;
      

【讨论】：

嗯，那么 $page 变量是什么？

【参考方案5】：

选中复选框后提交表单

$(document).ready(function ()    
$("#yoursubmitbuttonid").click(function()           
                if( $(".yourcheckboxclass").is(":checked") )
                
                    $("#yourformId").submit();

                else
                    alert("Please select !!!");
                    return false;
                
                return false;
            ); 
);

【参考方案6】：

您可以通过 JavaScript 中的简单方法单击复选框来提交表单。 在表单标签或输入属性中添加以下属性：

    onchange="this.form.submit()"

例子：

<form>
      <div>
           <input type="checkbox">
      </div>
</form>