2

我有一个页面，它分为 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;

    }
}
4

2 回答 2

0

您确实需要分离数据逻辑（即您要求 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>
于 2013-01-13T23:39:20.350 回答
0

这是一个如何使用 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>
于 2013-01-14T01:01:20.047 回答