Question

我有一个页面，它分为3个部分，有2个提交按钮：

第1部分包含模块下拉菜单。用户从下拉菜单中选择选项并提交。每次提交时，它都会更改第2部分，隐藏第3部分。提交后，下拉菜单返回Please Select选项。

第2部分：包含评估下拉菜单，仅在用户提交第1部分后显示。当用户从评估下拉菜单中选择选项并单击提交按钮提交此部分时，请下拉菜单返回Please Select，第3部分出现。每当第2部分提交不同的选项时，第3部分就会发生变化。

第3部分：显示第2部分中的详细信息。仅显示和更改，具体取决于从第2部分中选择和提交的评估。如果用户从第1部分提交，则隐藏此部分。

我的问题是什么是正确的结构，以便能够匹配我上面所说的。我的意思是if语句在哪里，if语句中的内容以及何时关闭if语句？

下面是我的代码，问题是，如果我点击第2部分中的提交按钮，而不是显示第3部分，它只删除第2部分，只显示第2部分所在的第3部分，所以我认为我的页面结构不正确。我评论了每个部分的位置。

    //PART 1

    <form action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>" method="post">
    <table>
    <tr>
    <th>Module: 
    <select name="modules" id="modulesDrop">
    <option value="">Please Select</option>
    <option value="1">Art</option>
    <option value="2">ICT</option>
    <option value="3">Business</option>
    </select>
    </th>
    </tr>
    </table>
    <p><input id="moduleSubmit" type="submit" value="Submit Module" name="moduleSubmit" /></p>
    </form>

    <?php

    if (isset($_POST['moduleSubmit']) || isset($_POST['sessionSubmit'])){   

    //PART 2

    if($_POST['modules'] == ''){
    $pHTML = "<span style='color: red'>Please Select a Module</span>";
    }else if($sqlnum == 0){
    $pHTML = "<span style='color: red'>Sorry, You have No Assessments under this Module</span>";
    } else{

    $sessionHTML = '';
    $sessionHTML = '<select name="session" id="sessionsDrop">'.PHP_EOL;
    $sessionHTML .= '<option value="">Please Select</option>'.PHP_EOL;       
    $sessionHTML .= '<option value="one">AAA</option>'.PHP_EOL;     
    $sessionHTML .= '<option value="two">AAB</option>'.PHP_EOL;     
    $sessionHTML .= '<option value="three">AAC</option>'.PHP_EOL;  
    $sessionHTML .= '</select>';  

    $assessmentform = "
    <form action='".htmlentities($_SERVER['PHP_SELF'])."' method='post' id='assessmentForm'>
    <p id='warnings'>{$pHTML}</p>
    <p><strong>Assessments:</strong> {$sessionHTML} </p>   
    <p><input id='sessionSubmit' type='submit' value='View Assessment Details' name='sessionSubmit' /></p>
    </form>";

    echo $assessmentform;

     }
        }

    if (isset($_POST['sessionSubmit'])) {

    //PART 3

if($_POST['session'] == ''){
$sHTML = "<span style='color: red'>Please Select a Session</span>";
} else{

    $sessiondetails ="
    <p id='warnings'>{$sHTML}</p>
    <p>You have selected an Assessment where the details will be displayed here:</p>
    ";  

    echo $sessiondetails;

    }
}

Answer 1

您确实需要分离数据逻辑（即您要求PHP执行的操作）和渲染（您要求HTML执行的操作）。我将使用PHP功能打开您的脚本，确定您要显示的内容，并将您的HTML放入单独的phtml文件中。

我还会包含一个隐藏字段，指示用户当前所处的步骤。这将允许您执行以下操作：

<?php
   if (isset($_POST['step'] && $step = $_POST['step']) {
      // The user has submitted a form
   } else {
      // They're fresh visitors
      $step = 0;
   }
?>

<!-- HTML markup here -->

<form method="post">

   <input type="hidden" name="step" value="<?=$step + 1?>">

   <? if ($step == 2): ?>

       <? if (!$_POST['modules']): ?>
           <span style='color: red'>Please Select a Module</span>
       <? elseif (!$sqlnum): ?>
           <span style='color: red'>Sorry, You have No Assessments under this Module</span>
       <? endif; ?>

   <? endif; ?>

   <? // etc. etc. ?>

</form>

Answer 2

以下是如何使用jQuery执行此操作的示例。这是使用您的代码的最小示例：

 <!DOCTYPE html>
<html lang="en">
  <head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
// JavaScript Document
$(function()
    {
     $('#form_one').submit(function()
        {
            $('#form_one_error').css("display","none");
            var Modules = $('#modulesDrop').val();
            if(Modules)
            {
                $('#select_two').css("display","block");
                return false;
            }
        $('#form_one_error').css("display","block");
         return false;    
        });
    $('#form_two').submit(function()
        {
            $('#form_two_error').css("display","none");
            $('#select_two').css("display","block");
            var Ses = $('#sessionsDrop').val();
            if(Ses)
            {
                $('#select_three').css("display","block");
                return false;
            }
        $('#form_two_error').css("display","block");
         return false;    
        });
});
</script>  
</head>
  <body>
<div align="left" id="form_one_error" style="display:none;">
<font color="#FF0000">Please Select A Module</font>
</div>

<form action="" id="form_one">
<b> Module:</b> 
    <select name="modules" id="modulesDrop">
    <option value="">Please Select</option>
    <option value="1">Art</option>
    <option value="2">ICT</option>
    <option value="3">Business</option>
    </select>
<p><input type="submit" value="Submit Module"/></p>
</form>


<div align="left" id="form_two_error" style="display:none;">
<font color="#FF0000">Please Select Assessments</font>
</div>

<div align="left" id="select_two" style="display:none;">
<form action="" id='form_two'>
<b>Assessments:</b>
<select name="session" id="sessionsDrop">
    <option value="">Please Select</option>      
    <option value="one">AAA</option>    
    <option value="two">AAB</option>    
    <option value="three">AAC</option> 
 </select>
<p><input id='sessionSubmit' type='submit' value='View Assessment Details' name='sessionSubmit' /></p>
</form>
</div>

<div align="left" id="select_three" style="display:none;">
You have selected an Assessment where the details will be displayed here:
</div>  

  </body>
</html>

如果页面包含2个提交按钮，如何构建页面

2 个答案: