提交后保持单选按钮在表单中，但jQuery函数不起作用

Question

我有一个简单的表单，有一些输入，两个单选按钮和两个不同的隐藏div。div的显示取决于用户单击的按钮。假设用户选择了一个单选按钮，但表单的一个输入中存在错误。当我单击submit按钮，表单再次加载，显示错误时，我希望已选中previous choosen单选按钮。我通过输入代码中的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>

JQUERY代码：

   $('#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";       
    }   
}

Answer 1

我不确定这是否是你所寻求的答案，但这是一个更好的方法来实现你的目标。在JQuery中，编写一个名为myForm\u 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函数中的条件检查错误。如果未发现错误，则继续提交。如果发现错误，将阻止提交。

Answer 2

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

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