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

Question

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

网页代码：

<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

重新加载页面时，用于检查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);

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

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