2

2 つの送信ボタンがある 3 つの部分に分割されたページがあります。

パート 1:モジュールのドロップダウン メニューが含まれています。ユーザーはドロップダウン メニューからオプションを選択し、送信します。投稿されるたびにパート 2 が変更され、パート 3 が非表示になります。送信後、ドロップダウン メニューはPlease Selectオプションに戻ります。

パート 2:アセスメント ドロップダウン メニューが含まれます。ユーザーがパート 1 を送信した後にのみ表示されます。ユーザーがアセスメント ドロップダウン メニューからオプションを選択し、送信ボタンをクリックしてこのパートを送信すると、ドロップダウン メニューに戻りPlease Select、パート 3 が表示されます。パート 3 は、パート 2 が異なるオプションで送信されるたびに変更されます。

パート 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 に答える