使用PHP / AJAX / jQuery

时间:2018-03-21 23:12:48

标签: javascript php jquery ajax

我正在尝试动态地将选定的选项从表单传递到第二种形式,但由于我的第一个AJAX是POST类型而我的jQuery是一个click事件,因此无法确切地知道如何做到这一点。也许我不应该使用jQuery来完成第二部分但是我只是在使用AJAX时遇到了麻烦所以我尝试了这种方法。基本上我想选择比赛的赢家和输家等选项,然后处理比赛中的奖金。以下是当您选择第一个最基本的匹配类型时页面的外观......

initial screen

然后当我点击Add InMatch按钮时,会添加一行奖励评分...

button clicked

然后问题变成了当单击“添加”按钮时,我无法从第一个屏幕中将所选选项作为选项使用。我如何确保当我点击该按钮时,在新的选项列表中可以获得赢家/输家框中的选定选项?

这是我的AJAX函数,根据匹配选择显示不同的初始选项......

$("#matchtype").change(function() {
    var match = $(this).val();
    if(match != "") {
      $.ajax({
        type:"POST",
        url:"scorer.php",
        data:{match_id:match},
        //async: true,
        success:function(response) {
          var resp = $.trim(response);
          $("#matchtypename").html(resp);
        }
      });
    } else {
      $("#matchtypename").html("NOT FOUND!");
    }
});

然后这是我的jQuery函数添加奖金选项...

jQuery(function(){
    var counter = 0;
    jQuery('button.addinmatch').click(function(event){
        event.preventDefault();

        counter++;

        var newRow = jQuery('<tr><td>In-Match Scoring' + counter + ':</td><td><select name=\"inmatchwrestler' + counter + '\"><option value=\"NONE\">Select Wrestler</option></select><select name=\"inmatch' + counter + '\"><option value=\"NONE\">Select In-Match Scoring Option</option><option value=\"finisher\">Finisher</option><option value=\"pinfall\">Pinfall</option><option value=\"dq\">DQ</option><option value=\"co\">Count Out</option><option value=\"nc\">No Contest</option></select></td>');

        jQuery('table.matchscoringtable').append(newRow);

    }); });

最后,这是与AJAX / Query(scorer.php)一起使用的HTML / php文件的相关部分......

<!-- where the AJAX changes the options depending on match type selection... -->
<tr id="matchtypename">       
</tr>



          <br><br>
<!-- the button the jQuery uses to add the bonus options -->
          <tr><td><button class="addinmatch">Add InMatch Option</button><br></td></tr>

选择单曲匹配时调用的php函数...

function singles_match() {

        //echo "<tr>";
        echo "  <td>Match Result:</td>";
        echo "  <td>";
        echo "      <select name=\"matchwinner\">";
        echo "          <option value=\"NONE\">Select Winner</option>";
                        drop_down();
        echo "      </select>";
        echo "      <select name=\"matchloser\">";
        echo "          <option value=\"NONE\">Select Loser</option>";
                        drop_down();
        echo "      </select>";
        echo "      <select name=\"matchhow\">";
        echo "          <option value=\"NONE\">Select How the Match was Won</option>";
        echo "          <option value=\"finisher\">Finisher</option>";
        echo "          <option value=\"pinfall\">Pinfall</option>";
        echo "          <option value=\"dq\">DQ</option>";
        echo "          <option value=\"co\">Count Out</option>";
        echo "          <option value=\"nc\">No Contest</option>";
        echo "      </select>";
        echo "  </td>";
/*      echo "  </tr><br><br>";
        echo "  <tr>";
        echo "  <td>In-Match Scoring 1:</td>";
        echo "  <td>";
        echo "      <select name=\"inmatchwwrestler\">";
        echo "          <option value=\"NONE\">Select Wrestler</option>";
                        drop_down();
        echo "      </select>";
        echo "      <select name=\"matchhow\">";
        echo "          <option value=\"NONE\">Select In-Match Scoring Option</option>";
        echo "          <option value=\"finisher\">Finisher</option>";
        echo "          <option value=\"pinfall\">Pinfall</option>";
        echo "          <option value=\"dq\">DQ</option>";
        echo "          <option value=\"co\">Count Out</option>";               
        echo "          <option value=\"nc\">No Contest</option>";
        echo "      </select>";
        echo "  </td>";*/

}

编辑:完整的HTML ...

<html>
<head>
<title>Scorer</title>
</head>
<body>

<?php

function drop_down() {

    $strSearch = "SELECT name FROM Roster ORDER BY name asc";
    $sqlResult = mysql_query($strSearch);

    while($arrayRow = mysql_fetch_assoc($sqlResult)) {
        $item = $arrayRow[name];
        echo "<option value=\"$item\">$item</option>\n";
    }   
}

function singles_match() {

        //echo "<tr>";
        echo "  <td>Match Result:</td>";
        echo "  <td>";
        echo "      <select name=\"matchwinner\">";
        echo "          <option value=\"NONE\">Select Winner</option>";
                        drop_down();
        echo "      </select>";
        echo "      <select name=\"matchloser\">";
        echo "          <option value=\"NONE\">Select Loser</option>";
                        drop_down();
        echo "      </select>";
        echo "      <select name=\"matchhow\">";
        echo "          <option value=\"NONE\">Select How the Match was Won</option>";
        echo "          <option value=\"finisher\">Finisher</option>";
        echo "          <option value=\"pinfall\">Pinfall</option>";
        echo "          <option value=\"dq\">DQ</option>";
        echo "          <option value=\"co\">Count Out</option>";
        echo "          <option value=\"nc\">No Contest</option>";
        echo "      </select>";
        echo "  </td>";
/*      echo "  </tr><br><br>";
        echo "  <tr>";
        echo "  <td>In-Match Scoring 1:</td>";
        echo "  <td>";
        echo "      <select name=\"inmatchwwrestler\">";
        echo "          <option value=\"NONE\">Select Wrestler</option>";
                        drop_down();
        echo "      </select>";
        echo "      <select name=\"matchhow\">";
        echo "          <option value=\"NONE\">Select In-Match Scoring Option</option>";
        echo "          <option value=\"finisher\">Finisher</option>";
        echo "          <option value=\"pinfall\">Pinfall</option>";
        echo "          <option value=\"dq\">DQ</option>";
        echo "          <option value=\"co\">Count Out</option>";               
        echo "          <option value=\"nc\">No Contest</option>";
        echo "      </select>";
        echo "  </td>";
*/      //echo "  </tr>";

}

function tag_match() {

        //echo "<tr>";
        echo "  <td>Match Result:</td>";
        echo "  <td>";
        echo "      <select name=\"matchwinner1\">";
        echo "          <option value=\"NONE\">Select Winner 1</option>";
                        drop_down();
        echo "      </select>";
        echo "      <select name=\"matchwinner1\">";
        echo "          <option value=\"NONE\">Select Winner 1</option>";
                        drop_down();
        echo "      </select>";
        echo "      <select name=\"matchloserq\">";
        echo "          <option value=\"NONE\">Select Loser 1</option>";
                        drop_down();
        echo "      </select>";
        echo "      <select name=\"matchloser2\">";
        echo "          <option value=\"NONE\">Select Loser 2</option>";
                        drop_down();
        echo "      </select>";
        echo "      <select name=\"matchhow\">";
        echo "          <option value=\"NONE\">Select How the Match was Won</option>";
        echo "          <option value=\"finisher\">Finisher</option>";
        echo "          <option value=\"pinfall\">Pinfall</option>";
        echo "          <option value=\"dq\">DQ</option>";
        echo "          <option value=\"co\">Count Out</option>";
        echo "          <option value=\"nc\">No Contest</option>";
        echo "      </select>";
        echo "  </td>";
        echo "  </tr>";
        echo "  <tr>";
        echo "  <td>In-Match Scoring 1:</td>";
        echo "  <td>";
        echo "      <select name=\"inmatchwwrestler\">";
        echo "          <option value=\"NONE\">Select Wrestler</option>";
                        drop_down();
        echo "      </select>";
        echo "      <select name=\"matchhow\">";
        echo "          <option value=\"NONE\">Select In-Match Scoring Option</option>";
        echo "          <option value=\"finisher\">Finisher</option>";
        echo "          <option value=\"pinfall\">Pinfall</option>";
        echo "          <option value=\"dq\">DQ</option>";
        echo "          <option value=\"co\">Count Out</option>";               
        echo "          <option value=\"nc\">No Contest</option>";
        echo "      </select>";
        echo "  </td>";
        //echo "  </tr>";

}

function triple_match() {

        //echo "<tr>";
        echo "  <td>Match Result:</td>";
        echo "  <td>";
        echo "      <select name=\"matchwinner\">";
        echo "          <option value=\"NONE\">Select Winner</option>";
                        drop_down();
        echo "      </select>";
        echo "      <select name=\"matchloser1\">";
        echo "          <option value=\"NONE\">Select Loser 1</option>";
                        drop_down();
        echo "      </select>";
        echo "      <select name=\"matchloser2\">";
        echo "          <option value=\"NONE\">Select Loser 2</option>";
                        drop_down();
        echo "      </select>";
        echo "      <select name=\"matchhow\">";
        echo "          <option value=\"NONE\">Select How the Match was Won</option>";
        echo "          <option value=\"finisher\">Finisher</option>";
        echo "          <option value=\"pinfall\">Pinfall</option>";
        echo "          <option value=\"dq\">DQ</option>";
        echo "          <option value=\"co\">Count Out</option>";
        echo "          <option value=\"nc\">No Contest</option>";
        echo "      </select>";
        echo "  </td>";
        echo "  </tr>";
        echo "  <tr>";
        echo "  <td>In-Match Scoring 1:</td>";
        echo "  <td>";
        echo "      <select name=\"inmatchwwrestler\">";
        echo "          <option value=\"NONE\">Select Wrestler</option>";
                        drop_down();
        echo "      </select>";
        echo "      <select name=\"matchhow\">";
        echo "          <option value=\"NONE\">Select In-Match Scoring Option</option>";
        echo "          <option value=\"finisher\">Finisher</option>";
        echo "          <option value=\"pinfall\">Pinfall</option>";
        echo "          <option value=\"dq\">DQ</option>";
        echo "          <option value=\"co\">Count Out</option>";               
        echo "          <option value=\"nc\">No Contest</option>";
        echo "      </select>";
        echo "  </td>";
        //echo "  </tr>";

}

function handicap_match() {

        //echo "<tr>";
        echo "  <td>Match Result:</td>";
        echo "  <td>";
        echo "      <select name=\"matchwinner1\">";
        echo "          <option value=\"NONE\">Select Winner 1</option>";
                        drop_down();
        echo "      </select>";
        echo "      <select name=\"matchwinner2\">";
        echo "          <option value=\"NONE\">Select Winner 2</option>";
                        drop_down();
        echo "      </select>";
        echo "      <select name=\"matchloser1\">";
        echo "          <option value=\"NONE\">Select Loser 1</option>";
                        drop_down();
        echo "      </select>";
        echo "      <select name=\"matchloser2\">";
        echo "          <option value=\"NONE\">Select Loser 2</option>";
                        drop_down();
        echo "      </select>";
        echo "      <select name=\"matchhow\">";
        echo "          <option value=\"NONE\">Select How the Match was Won</option>";
        echo "          <option value=\"finisher\">Finisher</option>";
        echo "          <option value=\"pinfall\">Pinfall</option>";
        echo "          <option value=\"dq\">DQ</option>";
        echo "          <option value=\"co\">Count Out</option>";
        echo "          <option value=\"nc\">No Contest</option>";
        echo "      </select>";
        echo "  </td>";
        echo "  </tr>";
        echo "  <tr>";
        echo "  <td>In-Match Scoring 1:</td>";
        echo "  <td>";
        echo "      <select name=\"inmatchwwrestler1\">";
        echo "          <option value=\"NONE\">Select Wrestler 1</option>";
                        drop_down();
        echo "      </select>";
        echo "      <select name=\"matchhow\">";
        echo "          <option value=\"NONE\">Select In-Match Scoring Option</option>";
        echo "          <option value=\"finisher\">Finisher</option>";
        echo "          <option value=\"pinfall\">Pinfall</option>";
        echo "          <option value=\"dq\">DQ</option>";
        echo "          <option value=\"co\">Count Out</option>";               
        echo "          <option value=\"nc\">No Contest</option>";
        echo "      </select>";
        echo "  </td>";
        //echo "  </tr>";

}

function add_in_match_scoring_option($inmatchnum) {
        //echo "  </tr>";
        echo "  <tr>";
        echo "  <td>In-Match Scoring $inmatchnum:</td>";
        echo "  <td>";
        echo "      <select name=\"inmatchwrestler$inmatchnum\">";
        echo "          <option value=\"NONE\">Select Wrestler</option>";
                        drop_down();
        echo "      </select>";
        echo "      <select name=\"inmatch$inmatchnum\">";
        echo "          <option value=\"NONE\">Select In-Match Scoring Option</option>";
        echo "          <option value=\"finisher\">Finisher</option>";
        echo "          <option value=\"pinfall\">Pinfall</option>";
        echo "          <option value=\"dq\">DQ</option>";
        echo "          <option value=\"co\">Count Out</option>";               
        echo "          <option value=\"nc\">No Contest</option>";
        echo "      </select>";
        echo "  </td>";

}


//MySql DB Info
include("../includes/db.php");



if (isset($_POST['card']) OR isset($_POST['schedule']) OR isset($_POST['submitmatch']) OR isset($_POST['start']) OR isset($_POST['results']) OR isset($_POST['finished']) OR isset($_POST['finalize']) OR isset($_POST['grand']) OR isset($_POST['open']) OR isset($_POST['close']) OR isset($_POST['finishedcard']) OR isset($_POST['match_id'])) {


<?php
    if (isset($_POST['submitmatch'])) {
        //Nothing for now
    } elseif (isset($_POST['match_id'])) {
        $matchtype = $_POST['match_id'];

        if ($matchtype == "singles") {
            singles_match();
        }

        if ($matchtype == "tag") {
            tag_match();
        }

        if ($matchtype == "triple") {
            triple_match();
        }

        if ($matchtype == "handicap") {
            handicap_match();
        }

    } /*elseif (isset($_POST['addinmatch'])) {

        $inmatchnum += 1;
        add_in_match_scoring_option($inmatchnum);           

    }*/
    else {          

    include("../includes/sidebar.php");

    ?>

      <p align="center">
      <font size=5><b>Control Panel</b></font><br>
      <form method="post" action="<?php echo $PHP_SELF;?>">
        <table class="matchscoringtable">
          <tr> 
            <td>Show:</td>
            <td><input type="Text" name="ppv" size="30" value="<?php echo $show ?>"> 
            </td>
          </tr>
          <tr> 
            <td style="height: 30px">Match Number:</td>
            <td style="height: 30px"><input type="Text" name="matchnum" size="10" value="<?php echo $matchnum + 1; ?>"> 
            </td>
          </tr><!--
          <tr> 
            <td>Match Type:</td>
            <td><select name="matchtype">
                <option value="REGULAR">Regular Match</option>
                <option value="DOUBLER">Doubler</option>
                <option value="BONUS">Bonus Points</option>
                <option value="TIEBREAKER">Tiebreaker</option>
              </select>
              Doubles Match # / Bonus Points 
              <input type="Text" name="doublebonus" size="1"></td>
          </tr>
-->
          <tr> 
            <td>Match Description Line 1:</td>
            <td><input type="Text" name="matchdesc1" size="70"><br>*** Make sure to only put match participants on this line. ***</td>
          </tr>
          <tr> 
            <td>Match Description Line 2:</td>
            <td><input type="Text" name="matchdesc2" size="70"><br>*** Enter any special stips or title matchs here (i.e. Cage Match or WWE Champsionship). ***</td>
          </tr>
          <tr> 
            <td>Match Type:</td>
            <td><select name="matchtype" id="matchtype">
                <option value="NONE">Select a Match Type</option>
                <option value="singles">Singles Match</option>
                <option value="tag">Tag Team Match</option>
                <option value="triple">Triple Threat Match</option>
                <option value="handicap">Handicap Match</option>
              </select>
            </td>
          </tr>
          <br><br>
          <tr id="matchtypename">
          </tr>       
          <br><br>
          <tr><td><button class="addinmatch">Add InMatch Option</button><br></td></tr>
        </table>
        <br>
        <input type="Submit" value="Submit Match" name="submitmatch">
        Adds / Updates this match based on Match Number <br>
        <br>
        <input type="Submit" value="Save Card" name="finishedcard">
        Submit all matches first, this does not submit a match
      </form>

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="ajax_.js"></script>
      <!--<form method="post" action="<?php echo $PHP_SELF;?>">
        <input type="submit" value="Enter PPV Card" name="card">
        <br>
        <br>
        <input name="closedate" type="text" id="closedate" value="Close Date">
        <br>
        <input name="closetime" type="text" id="closetime" value="Close Time">
        <br>
        <input type="submit" value="Open Registration" name="open">
        <br>
        <input type="submit" value="Close Registration" name="close">
        <br>
        <br>
        <input type="submit" value="Enter PPV Results" name="results">
        <br>
        <br>
        <input type="submit" value="Update Grand Championship" name="grand">
        <br>
        <font size="1">press when results are final (take a look for any scoring 
        issues or messed up tiebreakers before pressing)</font><br>
        <br>
        <input type="submit" value="Close PPV" name="finalize">
        <br>
        <font size="1">simply closes the &quot;current&quot; PPV. Press when you 
        want to start a new PPV. You will have to sign back in though.</font><br>
        <hr>
        <br><font size="2">
        PPV Name<br>
        <input type="text" name="newppvname">
        <br>
        <br>
        PPV Date<br>
        <input type="text" name="newppvdate">
        <br>
        YYYY-MM-DD<br>
        <br>
        PPV Season<br>
        <input type="text" value="<?php echo get_current_season($fed); ?>" name="newppvseason">
        <br>
        <br>
        <input type="submit" value="Add Pay-Per-View" name="schedule">
        <br></font>
      </form>
-->   <br></p>
      <?php
    }

}
<p>&nbsp;</p>
</body>
</html>

EDIT2:完整的ajax_.js

$("#matchtype").change(function() {
    var match = $(this).val();
    if(match != "") {
      $.ajax({
        type:"POST",
        url:"scorer.php",
        data:{match_id:match},
        //async: true,
        success:function(response) {
          var resp = $.trim(response);
          $("#matchtypename").html(resp);
        }
      });
    } else {
      $("#matchtypename").html("NOT FOUND!");
    }
});

jQuery(function(){
    var counter = 0;
    jQuery('button.addinmatch').click(function(event){
        event.preventDefault();

        counter++;

        var newRow = jQuery('<tr><td>In-Match Scoring' + counter + ':</td><td><select name=\"inmatchwrestler' + counter + '\"><option value=\"NONE\">Select Wrestler</option></select><select name=\"inmatch' + counter + '\"><option value=\"NONE\">Select In-Match Scoring Option</option><option value=\"finisher\">Finisher</option><option value=\"pinfall\">Pinfall</option><option value=\"dq\">DQ</option><option value=\"co\">Count Out</option><option value=\"nc\">No Contest</option></select></td>');

        jQuery('table.matchscoringtable').append(newRow);

    });
});

1 个答案:

答案 0 :(得分:0)

您永远不应执行ajax请求,目标“url”与执行ajax请求的页面相同。在您的代码中,您正在 scorer.php 中的控件(“matchtype”)上运行ajax请求,并将 scorer.php 作为“url”属性。 ajax请求也是如此。执行ajax时,确实会获取结果,但 scorer.php 的全部内容将被替换。例如。整个控制面板与“matchscoringtable”表消失。因此,应该添加结果的容器(“matchtypename”)不再存在。简而言之,我决定改变你的整个代码结构,记住,imho,对你的项目会更好。

我强烈建议您不要从php代码输出任何HTML代码。所以,不再是echo '<div>...</div>'。找到解决方案以避免这种难以维护的设计。

我强烈建议您使用 mysqli 扩展名(面向对象的版本,而不是程序版),或者更好的PDO扩展名,以进行数据访问。因为从php 7.0.0开始已经删除了 mysql 扩展名。

我建议你学习并使用Bootstrap 4 css框架,以提供非常漂亮的设计和页面结构。考虑到你未来的这一步,我没有像你那样使用表格,而只是使用div。 Bootstrap不使用表。相反,它使用div来构建一个所谓的网格。无论如何,Bootstrap是100%值得,简单而有趣的学习。

你说:如果我为胜者选择第1人,为输家选择第2人,我希望这些选项在我动态添加的InMatch选项中显示为选项。我仍然不明白在InMatch选项中作为选项出现的含义。因此,我这样做,当单击“添加InMatch选项”按钮时,所选的获胜者和选定的输家将作为“选项”标签附加到 inMatchWrestlerXX 组合框。如果它不是您想要的,您可以轻松更改它以满足您的需求。

我希望你能理解我的代码。请注意,我使用了我的命名和编码约定。从 scorer.php 开始。然后转到 custom.js 。从那里开始遵循代码之路。原则上,您可以按原样运行我的代码。所有页面都位于同一目录级别。

scorer.php

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes" />
        <meta charset="UTF-8" />
        <!-- The above 3 meta tags must come first in the head -->

        <title>Demo</title>

        <!-- CSS resources -->
        <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet">
        <link href="custom.css" rel="stylesheet">

        <!-- JS resources -->
        <script src="https://code.jquery.com/jquery-3.2.1.min.js" type="text/javascript"></script>
        <script src="custom.js" type="text/javascript"></script>
    </head>
    <body>

        <div class="page-container">

            <div class="messages">
                Here appear the error/success messages ...
            </div>

            <div class="form-group">
                <label for="matchType">Match Type:</label>
                <select id="matchType" name="matchType">
                    <option value="">Select a Match Type</option>
                    <option value="singles">Singles Match</option>
                </select>
            </div>

            <div id="matchTypeContent" class="form-group">
                Here appears the content upon the match type selection ...
            </div>

            <div class="form-group">
                <button type="button" id="addInMatchOptionButton" name="addInMatchOptionButton" class="add-in-match">
                    Add In-Match Option
                </button>
            </div>

            <div id="inMatchOptions" class="form-group"></div>

        </div>

    </body>
</html>

custom.js

var inMatchCounter = 0;

$(document).ready(function () {
    $('#matchType').change(function () {
        var matchType = $(this).val();
        var matchTypeLabel = $('#matchType option:selected').text();

        resetMessages();

        if (matchType !== '') {
            $.ajax({
                method: 'post',
                dataType: 'html',
                url: 'matchTypeContent.php',
                data: {
                    'matchType': matchType,
                    'matchTypeLabel': matchTypeLabel
                },
                success: function (response, textStatus, jqXHR) {
                    $('#matchTypeContent').html(response);
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    handleAjaxError(jqXHR);
                },
                complete: function (jqXHR, textStatus) {
                    //...
                }
            });
        } else {
            $('#matchTypeContent').html('');
        }
    });

    $('#addInMatchOptionButton').click(function () {
        var matchWinnerId = $('#matchWinner').val();
        var matchLoserId = $('#matchLoser').val();

        resetMessages();

        if (matchWinnerId === '') {
            displayMessage('warning', 'Please select a match winner.');
            return false;
        }

        if (matchLoserId === '') {
            displayMessage('warning', 'Please select a match loser.');
            return false;
        }

        inMatchCounter++;

        $.ajax({
            method: 'post',
            dataType: 'html',
            url: 'inMatchOption.php',
            data: {
                'matchWinnerId': matchWinnerId,
                'matchLoserId': matchLoserId,
                'inMatchCounter': inMatchCounter
            },
            success: function (response, textStatus, jqXHR) {
                $('#inMatchOptions').append(response);
            },
            error: function (jqXHR, textStatus, errorThrown) {
                handleAjaxError(jqXHR);
            },
            complete: function (jqXHR, textStatus) {
                //...
            }
        });
    });
});

/**
 * Display a user message.
 * 
 * @param type string Message type: success|danger|warning.
 * @param message string Message.
 * @return void
 */
function displayMessage(type, message) {
    $('.messages').html('<div class="message ' + type + '">' + message + '</div>');
}

/**
 * Reset messages.
 * 
 * @return void
 */
function resetMessages() {
    $('.messages').html('');
}

/**
 * Handle an error raised by an ajax request.
 * 
 * If the status code of the response is a custom one (420), defined by 
 * the developer, then the corresponding error message is displayed. 
 * Otherwise, the displayed message will be a general user-friendly 
 * one - so, that no system-related infos will be shown.
 * 
 * @param jqXHR object The jQuery XMLHttpRequest object returned by the ajax request.
 * @return void
 */
function handleAjaxError(jqXHR) {
    var message = (jqXHR.status === 420)
            ? jqXHR.statusText
            : 'An error occurred during your request. Please try again.';

    displayMessage('danger', message);
}

custom.css

html,
body,
button {
    font-family: "Open Sans", Helvetica Neue, Helvetica, Arial, sans-serif !important;
    font-size: 14px !important;
}

select {
    font-size: 14px !important;
}

body {
    margin: 0;
    padding: 20px;
}

.page-container {
    padding: 30px;
    background-color: #f4f4f4;
}

.messages {
    margin-bottom: 20px;
}

.message {
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid transparent;
}

.success {
    color: #3c763d;
    border-color: #d6e9c6;
    background-color: #dff0d8;
}

.danger {
    color: #a94442;
    border-color: #ebccd1;
    background-color: #f2dede;
}

.warning {
    color: #8a6d3b;
    border-color: #faebcc;
    background-color: #fcf8e3;
}

form {
    width: 400px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: inline-block;
    min-width: 100px;
}

button {
    padding: 7px 10px;
    display: block;
    color: #fff;
    border: none;
    background-color: #8daf15;
}

的functions.php

<?php

/**
 * Get the players.
 * 
 * @return array The players list.
 */
function getPlayers() {
    //@todo Fetch from database.
    return array(
        3 => 'Susan',
        19 => 'Jules',
        //...
    );
}

/**
 * Get a player name by player id.
 * 
 * @return string The player name.
 */
function getPlayerName($playerId) {
    //@todo Fetch from database.
    switch ($playerId) {
        case 3:
            $playerName = 'Susan';
            break;
        case 19:
            $playerName = 'Jules';
            break;
    }

    return $playerName;
}

matchTypeContent.php

<?php

// Validate the match type.
if (!isset($_POST['matchType']) || empty($_POST['matchType'])) {
    /*
     * This custom response header triggers the ajax error because the status 
     * code begins with 4xx (which corresponds to the client errors). Here is
     * defined "420" as the custom status code. One can choose whatever code 
     * between 401-499 which is not officially assigned, e.g. which is marked 
     * as "Unassigned" in the official HTTP Status Code Registry. See the link.
     * 
     * @link https://www.iana.org/assignments/http-status-codes/http-status-codes.xhtml HTTP Status Code Registry.
     */
    header('HTTP/1.1 420 No match type provided.');
    exit();
}

$matchType = $_POST['matchType'];
$matchTypeLabel = $_POST['matchTypeLabel'];

switch ($matchType) {
    case 'singles':
        require 'matchTypeSingles.php';
        break;
    case 'tag':
        // require 'matchTypeTag.php';
        break;
    //... and so on ...
    default:
        break;
}

matchTypeSingles.php

<div>Match Result (<?php echo $matchTypeLabel; ?>):</div>

<select id="matchWinner" name="matchWinner">
    <option value="">Select Winner</option>
    <?php require 'playerOptions.php'; ?>
</select>

<select id="matchLoser" name="matchLoser">
    <option value="">Select Loser</option>
    <?php require 'playerOptions.php'; ?>
</select>

<select id="matchHow" name="matchHow">
    <option value="">Select How the Match was Won</option>
    <option value="finisher">Finisher</option>
    <option value="pinfall">Pinfall</option>
    <option value="dq">DQ</option>
    <option value="co">Count Out</option>
    <option value="nc">No Contest</option>
</select>

playerOptions.php

<?php
require_once 'functions.php';

foreach (getPlayers() as $id => $name) {
    ?>
    <option value="<?php echo $id; ?>">
        <?php echo $name; ?>
    </option>
    <?php
}

inMatchOption.php

<?php
require_once 'functions.php';

// Validate the match winner's id.
if (!isset($_POST['matchWinnerId']) || empty($_POST['matchWinnerId'])) {
    header('HTTP/1.1 420 No match winner provided.');
    exit();
}

// Validate the match loser's id.
if (!isset($_POST['matchLoserId']) || empty($_POST['matchLoserId'])) {
    header('HTTP/1.1 420 No match loser provided.');
    exit();
}

// Validate the in-match counter.
if (!isset($_POST['inMatchCounter']) || empty($_POST['inMatchCounter'])) {
    header('HTTP/1.1 420 No in-match counter provided.');
    exit();
}

$matchWinnerId = $_POST['matchWinnerId'];
$matchLoserId = $_POST['matchLoserId'];
$inMatchCounter = $_POST['inMatchCounter'];
?>

<div>In-Match Scoring <?php echo $inMatchCounter; ?>:</div>

<select name="inMatchWrestler<?php echo $inMatchCounter; ?>">
    <option value="">Select Wrestler</option>
    <option value="<?php echo $matchWinnerId; ?>"><?php echo getPlayerName($matchWinnerId); ?> (winner)</option>
    <option value="<?php echo $matchLoserId; ?>"><?php echo getPlayerName($matchLoserId); ?> (loser)</option>
</select>

<select name="inMatch<?php echo $inMatchCounter; ?>">
    <option value="">Select In-Match Scoring Option</option>
    <option value="finisher">Finisher</option>
    <option value="pinfall">Pinfall</option>
    <option value="dq">DQ</option>
    <option value="co">Count Out</option>
    <option value="nc">No Contest</option>
</select>