提交后将选中的单选按钮保留在表单中，但 jquery 功能不起作用答案

【问题标题】：Keeping checked radio button in a form after submit but jquery function doesn't work提交后将选中的单选按钮保留在表单中，但 jquery 功能不起作用
【发布时间】：2014-12-04 15:52:37
【问题描述】：

我有一个简单的表单，其中包含一些输入、2 个单选按钮和两个不同的隐藏 div。 div 的显示取决于用户单击的按钮。让我们假设用户选择了其中一个单选按钮，但表单的其中一个输入存在错误。当我单击提交按钮并再次加载表单时，显示我希望先前选择的单选按钮已被选中的错误。我通过输入代码中的 php 代码实现了这一点。现在我的问题是，当表单再次加载时，单选按钮被选中，但需要显示的隐藏 div 保持隐藏状态。我该如何解决这个问题？非常感谢您的回答。

HTML 代码：

<form method="post"> 
    <input type="radio" name="button" id="button1" value="1" <?php if($_SERVER['REQUEST_METHOD'] == 'POST'){if(empty($error) && $button=="1"){ echo 'checked="checked"'; }} ?> /> 
    <label>Button 1</label><br />
    <input type="radio" name="button" id="button2" value="2" <?php if($_SERVER['REQUEST_METHOD'] == 'POST'){if(empty($error) && $button=="2"){ echo 'checked="checked"'; }} ?> /> 
    <label>Button 1</label><br />
    <div id="one">Div one</div>
    <div id="two">Div two</div>
    <input type="submit" value="submit" />
</form>

查询代码：

   $('#button1').click(function(){
       if($(this).is(':checked')){
           $('#one').show();
           $('#two').hide(); 
       }
   });
   $('#button2').click(function(){
       if($(this).is(':checked')){
           $('#one').hide();
           $('#two').show(); 
       }
   });

PHP 代码：

$error = array();

if ($_SERVER['REQUEST_METHOD'] == 'POST') {

    if (!empty($_POST["button"])){  
        $button = $_POST["button"];
    }

    if (empty($_POST["button"])){   
        $error []= "Choose one option";       
    }   
}

【问题讨论】：

标签： php jquery validation

【解决方案1】：

当您重新加载页面时，用于检查 div 的函数不会运行，因为您已将它们绑定到 click 事件。将点击事件函数移动到它们自己的函数中，并让它们在document.ready 上运行。

var showHide = function(){
    if($('#button1').is(':checked')){
         $('#one').show();
         $('#two').hide(); 
    }

    if($('#button2').is(':checked')){
         $('#one').hide();
         $('#two').show(); 
    }
   };

$(document).ready(showHide);
$('input[name="button"]').click(showHide);

【讨论】：

很遗憾，当带有表单的页面重新加载时，之前显示的隐藏 div 又被隐藏了。
抱歉，我只是快速剪切并粘贴了 javascript。编辑现在应该按照您的预期执行。

【解决方案2】：

我不确定这是否是您正在寻找的答案，但它是您想要实现的目标的更好方法。在 JQuery 中，编写一个名为 myForm_validate() 的函数并使用它来验证您的输入。所以，根据你的例子，你会写：

function myForm_validate() {
   //check for your two inputs to have values, in this case radio buttons

   var foundErrors = false;

   $("#myForm input").each(function() {
     if($(this).is(":checked") == false) { //no choice was selected
        foundErrors = true;
        return false;
     }
   });

   return foundErrors;
 }

然后，在表单提交上编写一个函数。

$("#myForm").submit(function(event) {
   var checkForErrors = myForm_validate();

   if(checkForErrors == true) { //there were errors in the form
      event.preventDefault(); //prevent the form from actually submitting
   }
 });

因此，在提交表单时，此代码将根据 validate 函数中的条件检查错误。如果没有发现错误，它会继续提交。如果发现错误，则会阻止提交。

【讨论】：