保留單選按鈕選擇，並保持div可見，直到所有表單域完成

Question

我試圖保留radio按鈕值，如果點擊並顯示其相關div包含form，直到所有表單域完成。因此，如果選擇radio按鈕「yes」，則會顯示div，其中包含form。我需要在頁面上保留div，直到按下submit按鈕後form完全填滿爲止。任何幫助是極大的讚賞。下面是代碼：

<form> 
    Show form? 
    <input type="radio" id="showform" value="yes" name="showform" onchange="showhideForm(this.value)">Yes 
    <input type="radio" id="showform" value="no" name="showform" onchange="showhideForm(this.value)">No 
</form> 

<script type="text/javascript"> 
    function showhideForm(showform) { 
     if (showform == "yes") { 
      document.getElementById("div1").style.display = 'block'; 
      document.getElementById("div2").style.display = 'none'; 
     } 
     if (showform == "no") { 
      document.getElementById("div2").style.display = 'block'; 
      document.getElementById("div1").style.display = 'none'; 
     } 
    } 
</script> 

<div id="div1" style="display:none"> 
    <?php 
    // define variables and set to empty values 
    $nameErr = $emailErr = $genderErr = $websiteErr = ""; 
    $name = $email = $gender = $comment = $website = ""; 

    if ($_SERVER["REQUEST_METHOD"] == "POST") { 
    if (empty($_POST["name"])) { 
    $nameErr = "Name is required"; 
    } else { 
    $name = test_input($_POST["name"]); 
    // check if name only contains letters and whitespace 
    if (!preg_match("/^[a-zA-Z ]*$/",$name)) { 
     $nameErr = "Only letters and white space allowed"; 
    } 
    } 

    if (empty($_POST["email"])) { 
    $emailErr = "Email is required"; 
    } else { 
    $email = test_input($_POST["email"]); 
    // check if e-mail address is well-formed 
    if (!filter_var($email, FILTER_VALIDATE_EMAIL)) { 
     $emailErr = "Invalid email format"; 
    } 
    } 

    if (empty($_POST["website"])) { 
    $website = ""; 
    } else { 
    $website = test_input($_POST["website"]); 
    // check if URL address syntax is valid 
    if (!preg_match("/\b(?:(?:https?|ftp):\/\/|www\.)[-a-z0-9+&@#\/%?=~_|!:,.;]* 
    [-a-z0-9+&@#\/%=~_|]/i",$website)) { 
     $websiteErr = "Invalid URL"; 
    }  
    } 

    if (empty($_POST["comment"])) { 
    $comment = ""; 
    } else { 
    $comment = test_input($_POST["comment"]); 
    } 

    if (empty($_POST["gender"])) { 
    $genderErr = "Gender is required"; 
    } else { 
    $gender = test_input($_POST["gender"]); 
    } 
    } 

    function test_input($data) { 
    $data = trim($data); 
    $data = stripslashes($data); 
    $data = htmlspecialchars($data); 
    return $data; 
    } 
    ?> 

     <p><span class="error">* required field.</span></p> 
     <form method="post" action="<?php echo 
    htmlspecialchars($_SERVER[" PHP_SELF "]);?>"> 
      Name: <input type="text" name="name"> 
      <span class="error">* <?php echo $nameErr;?></span> 
      <br><br> E-mail: <input type="text" name="email"> 
      <span class="error">* <?php echo $emailErr;?></span> 
      <br><br> Website: <input type="text" name="website"> 
      <span class="error"><?php echo $websiteErr;?></span> 
      <br><br> Comment: <textarea name="comment" rows="5" cols="40"></textarea> 
      <br><br> Gender: 
      <input type="radio" name="gender" value="female">Female 
      <input type="radio" name="gender" value="male">Male 
      <span class="error">* <?php echo $genderErr;?></span> 
      <br><br> 
      <input type="submit" name="submit" value="Submit"> 
     </form> 


</div> 
<div id="div2" style="display:none">display form 2 
</div> 

Answer 1

我覺得它工作得很好考慮下面的代碼...

<div id="div1"> 
    Succesfull. 
</div> 
<div id="div2"> 
    <form> 
     <input type="text"><br /> 
     <input type="text"> 
    </form> 
</div> 


<form> Show form? <input type="radio" id="showform" value="yes" name="showform" onchange="showhideForm(this.value)" >Yes 
<input type="radio" id="showform" value="no" name="showform" onchange="showhideForm(this.value)" >No </form> 




<script type="text/javascript"> 
function showhideForm(showform) { if (showform == "yes") { 
document.getElementById("div1").style.display = 'block'; 
document.getElementById("div2").style.display = 'none'; } if (showform == "no") { 
document.getElementById("div2").style.display = 'block'; document.getElementById("div1").style.display = 'none'; 
} 
} 
    </script> 

此代碼的工作如預期！但是，如果這是不是你想要的請進一步說明

Answer 2

我覺得它工作得很好 考慮下面的代碼...

<div id="div1"> 
    Succesfull. 
</div> 
<div id="div2"> 
    <form> 
     <input type="text"><br /> 
     <input type="text"> 
    </form> 
</div> 


<form> Show form? <input type="radio" id="showform" value="yes" name="showform" onchange="showhideForm(this.value)" >Yes 
<input type="radio" id="showform" value="no" name="showform" onchange="showhideForm(this.value)" >No </form> 




<script type="text/javascript"> 
function showhideForm(showform) { if (showform == "yes") { 
document.getElementById("div1").style.display = 'block'; 
document.getElementById("div2").style.display = 'none'; } if (showform == "no") { 
document.getElementById("div2").style.display = 'block'; document.getElementById("div1").style.display = 'none'; 
} 
} 
    </script> 

如果這不是你想請進一步說明什麼