Question

所以我创建了一个跟踪用户步枪比赛射击分数的网站。我有一个Create Match选项卡，它将它们带到一个包含a的页面武器选择下拉，然后是日期输入，然后是位置输入，然后我有一个保存匹配按钮，它将这三个输入与唯一ID（主键，自动递增）一起发送到数据库，这将允许他们区分匹配是哪个。

现在，对于每个匹配，您可以创建一个用户可以选择的火焰串。因此，在同一页面上，当用户按下Save Match时，它会发送数据，然后调出另一个Dropdown框，其中包含4串Fire模式（200码慢，200yd快速，300yd快速，600yd慢）。然后在其旁边创建一个“创建字符串”按钮，这将按下按钮后可以填写的10个目标分数。我遇到的问题是，当按下此按钮时，它也会删除“创建字符串”下拉框和按钮，并且我不完全确定错误。我认为它与我如何使用POST有关，我只是在推送保存匹配时创建一个下拉+按钮....

对于长篇文章我很抱歉，如果这太混乱，我会尝试将其分解。

所以基本上我希望能够按下第一个按钮（并保留用户放入我工作的那个按钮），然后它会显示一个带有4个条目和一个按钮的下拉列表，然后当第二个按钮按钮创建后，会显示一个包含10个条目的表，并带有“保存”按钮，当按下该按钮时，它会将10个条目发送到数据库。我可以让数据库传输工作正常工作，我只需要创建更多功能按钮/文本输入才能工作。

感谢您的时间！

HTML代码

 <form name="table"  action ='' method="post">
 Rifle:
 <select name="wpn" id="wpn">
 <option>AR15</option>
 <option>HK416</option>
 <option>M1 Garand</option>
 <option>M14</option>
 <option>M4/M16</option>
 <option>M24</option>
 <option>SSG500</option>
 <option>SSG556</option>

</select>
Date: <input type="date" name = "date" id="date" value = "<?php echo $_POST['date']; ?    >">

 Location:<input type="text" name="loc" id="loc" value = "<?php echo $_POST['loc']; ?>" />

<button type="submit" name = "save" value="Save Match">Save Match</button>

PHP代码

<?php
//if ($_SERVER['REQUEST_METHOD'] == "POST"){
if($_POST['save'] == 'Save Match'){
    if($_POST["date"]==NULL){
        apologize("Please enter a valid date!");
    }
    else if($_POST["loc"]==NULL){
        apologize("Please enter a location!");
    }


    $id = $_SESSION['id'];
    $wpn = $_POST['wpn'];
    $date = $_POST['date'];
    $loc =$_POST['loc'];



    //if(isset($_POST['button'])){
        if(query("INSERT INTO matches (id, weapon, date, location) 
    VALUES (?, ?, ?, ?)",
    $id, $wpn, $date, $loc) === false){
        apologize("Sorry insertion of data failure!!!");
   }else{
       // redirect("../public/matches.php");
        //header("Location: ../public/matches.php");

        ?>
        <br /><br />

        Strings of Fire:
        <select name="mode" id="mode">
            <option>200 Yard Slow</option>
            <option>200 Yard Rapid</option>
            <option>300 Yard Rapid</option>
            <option>600 Yard Slow</option>
        </select>

        <button type="submit" name="save" value="Create String">Create String</button>
        <?php
        if(($_POST['save']) == 'Create String'){
            echo test;
        }

   }

}
?>
</form>

Answer 1

好的，这是一项正在进行的工作，但现在就开始了。

我将您展示的内容分成两个单独的文件;这是UI页面：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Shooting Scores for Rifle Competitions</title>
        <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
        <style>
            body {
                background: #e8e8e8;
            }

            .step {
                width: 50%;
                margin: 1em auto;
                padding: 1em;
                background: #fff;
            }

            #step1 select.weapon,
            #step2 select.fire-string
            {
                width: 50%;
            }

            #step1 input.date
            {
                width: 10em;
            }

            #step3 ol.scores-list li
            {
                margin-bottom: 1em;
            }

            #step3 input.score
            {
                width: 8em;
            }
        </style>
    </head>
    <body>
        <div class="container">  
           <?php
               require('process.php');
            ?>   

            <div id="step1" class="step">
                <form class="table" action="" method="post" id="step1-form" role="form">
                    <div class="form-group">
                        <label>Rifle:</label>
                        <select name="wpn" id="wpn" class="form-control weapon">
                            <option>AR15</option>
                            <option>HK416</option>
                            <option>M1 Garand</option>
                            <option>M14</option>
                            <option>M4/M16</option>
                            <option>M24</option>
                            <option>SSG500</option>
                            <option>SSG556</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <label>Date:</label>
                        <input type="date" name="date" id="date" value="<?php echo $_POST['date']; ?>" class="form-control date" />
                    </div>

                    <div class="form-group">
                        <label>Location:</label>
                        <input type="text" name="loc" id="loc" value="<?php echo $_POST['loc']; ?>" class="form-control" />
                    </div>

                    <button type="submit" name="save-match" id="save-match" value="step1" class="btn btn-default">Save Match</button>
                </form>
            </div>

            <div id="step2" class="step hide">
                <form class="table" action="" method="post" id="step2-form" role="form">
                    <div class="form-group">
                        <label>Strings of Fire:</label>
                        <select name="mode" id="mode" class="form-control fire-string">
                            <option>200 Yard Slow</option>
                            <option>200 Yard Rapid</option>
                            <option>300 Yard Rapid</option>
                            <option>600 Yard Slow</option>
                        </select>
                    </div>

                    <button type="submit" name="save-string" id="save-string" value="step2" class="btn btn-default">Create String</button>
                </form>
            </div>

            <div id="step3" class="step hide">
                <form class="table" action="" method="post" id="step3-form" role="form">
                    <div class="form-group">
                        <label>Target Scores:</label>
                        <ol class="scores-list">
                            <li>
                                <input type="text" name="scores[]" class="form-control input-sm score" value="" />
                            </li>
                            <li>
                                <input type="text" name="scores[]" class="form-control input-sm score" value="" />
                            </li>
                            <li>
                                <input type="text" name="scores[]" class="form-control input-sm score" value="" />
                            </li>
                            <li>
                                <input type="text" name="scores[]" class="form-control input-sm score" value="" />
                            </li>
                            <li>
                                <input type="text" name="scores[]" class="form-control input-sm score" value="" />
                            </li>
                            <li>
                                <input type="text" name="scores[]" class="form-control input-sm score" value="" />
                            </li>
                            <li>
                                <input type="text" name="scores[]" class="form-control input-sm score" value="" />
                            </li>
                            <li>
                                <input type="text" name="scores[]" class="form-control input-sm score" value="" />
                            </li>
                            <li>
                                <input type="text" name="scores[]" class="form-control input-sm score" value="" />
                            </li>
                            <li>
                                <input type="text" name="scores[]" class="form-control input-sm score" value="" />
                            </li>
                        </ol>
                    </div>

                    <button type="submit" name="save-scores" id="save-scores" value="step3" class="btn btn-primary">Save Scores and Finish!</button>
                </form>
            </div>
        </div>
        <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
        <script>
            $(function () {

                // http://api.jquery.com/on/
                $(document)
                    .on('click', '#save-match', function (e) {
                        e.preventDefault();

                        var button = $(this);
                        // http://api.jquery.com/serialize/
                        var form = $('#step1-form').serialize()
                            + '&'
                            + encodeURI(button.attr('name'))
                            + '='
                            + encodeURI(button.attr('value'));

                        // http://api.jquery.com/jquery.post/
                        $.post('/process.php', form)
                            .done(function (result, status, jqxhr) {

                                // http://api.jquery.com/slidetoggle/
                                $('#step1').slideToggle('slow', function () {

                                    // http://api.jquery.com/removeclass/
                                    $('#step2').removeClass('hide');
                                });
                            })
                            .fail(function () {
                            });

                    })
                    .on('click', '#save-string', function (e) {
                        e.preventDefault();

                        var button = $(this);
                        var form = $('#step2-form').serialize()
                            + '&'
                            + encodeURI(button.attr('name'))
                            + '='
                            + encodeURI(button.attr('value'));

                        $.post('/process.php', form)
                            .done(function (result, status, jqxhr) {

                                $('#step2').slideToggle('slow', function () {

                                    $('#step3').removeClass('hide');
                                });
                            })
                            .fail(function () {
                            });

                    })
                    .on('click', '#save-scores', function (e) {
                        e.preventDefault();

                        var button = $(this);
                        var form = $('#step3-form').serialize()
                            + '&'
                            + encodeURI(button.attr('name'))
                            + '='
                            + encodeURI(button.attr('value'));

                        $.post('/process.php', form)
                            .done(function (result, status, jqxhr) {
                                alert(result);
                            })
                            .fail(function () {
                            });

                    });
            });
        </script>
    </body>
</html>

这是服务器脚本：

<?php
    if(isset($_POST['save-match']))
    {
        $is_valid = true;

        # step 1
        if(empty($_POST["date"]))
        {
            $is_valid = false;
            apologize("Please enter a valid date!");
        } 
        if(empty($_POST["loc"]))
        {
            $is_valid = false;
            apologize("Please enter a location!");
        } 

        if($is_valid)
        {   
            $id = $_SESSION['id'];
            $wpn = $_POST['wpn'];
            $date = $_POST['date'];
            $loc =$_POST['loc'];

            if(!query("INSERT INTO matches (id, weapon, date, location) VALUES (?, ?, ?, ?)", $id, $wpn, $date, $loc))
            {
                apologize("Sorry insertion of match data failure!!!");
            } 
            else 
            {
                # step 1 finished successfully.
            }
        }
    }
    else if(isset($_POST['save-string']))
    {
        # step 2
        if(empty($_POST["mode"]))
        {
            apologize("Please enter a valid mode!");
        } 
        else 
        {   
            $id = $_SESSION['id'];
            $mode =$_POST['mode'];

            if(!query("YOUR QUERY HERE TO INSERT / UPDATE MODE", $id, $mode))
            {
                apologize("Sorry insertion of mode data failure!!!");
            } 
            else 
            {
                # step 2 finished successfully.
            }
        }
    }
    else if(isset($_POST['save-scores']))
    {
        echo "Received " . count($_POST['scores']) . " scores!";
        # step 3
        if(empty($_POST["scores"]))
        {
            apologize("Please enter your scores!");
        } 
        else 
        {   
            $id = $_SESSION['id'];
            $scores = $_POST["scores"]; # this will be an array

            if(!query("YOUR QUERY HERE TO INSERT / UPDATE SCORES", $id, $scores))
            {
                apologize("Sorry insertion of scores data failure!!!");
            } 
            else 
            {
                # step 3 finished successfully.
            }
        }
    }
    else
    {
        # assuming a GET request at this point
    }
?>

我显然不知道您的apologize()或query()功能是什么。为了示例，我选择假设apologize()只是回显一个字符串，或者可能抛出一个异常。重要的一点是UI页面末尾的脚本部分：

$(function () {

    // http://api.jquery.com/on/
    $(document)
        .on('click', '#save-match', function (e) {
            e.preventDefault();

            var button = $(this);
            // http://api.jquery.com/serialize/
            var form = $('#step1-form').serialize()
                + '&'
                + encodeURI(button.attr('name'))
                + '='
                + encodeURI(button.attr('value'));

            // http://api.jquery.com/jquery.post/
            $.post('/process.php', form)
                .done(function (result, status, jqxhr) {

                    // http://api.jquery.com/slideToggle/
                    $('#step1').slideToggle('slow', function () {

                        // http://api.jquery.com/removeclass/
                        $('#step2').removeClass('hide');
                    });
                })
                .fail(function () {
                });

        })
        .on('click', '#save-string', function (e) {
            e.preventDefault();

            var button = $(this);
            var form = $('#step2-form').serialize()
                + '&'
                + encodeURI(button.attr('name'))
                + '='
                + encodeURI(button.attr('value'));

            $.post('/process.php', form)
                .done(function (result, status, jqxhr) {

                    $('#step2').slideToggle('slow', function () {

                        $('#step3').removeClass('hide');
                    });
                })
                .fail(function () {
                });

        })
        .on('click', '#save-scores', function (e) {
            e.preventDefault();

            var button = $(this);
            var form = $('#step3-form').serialize()
                + '&'
                + encodeURI(button.attr('name'))
                + '='
                + encodeURI(button.attr('value'));

            $.post('/process.php', form)
                .done(function (result, status, jqxhr) {
                    alert(result);
                })
                .fail(function () {
                });

        });
});

我已经包含了第一次使用的每个jQuery函数的链接，所以我建议在某些时候阅读每个jQuery函数的手册。这里发生了什么：

首先，我们绑定＆＃34;事件监听器＆＃34;对于每个提交按钮，使用.on()。通过挂起document的听众，我们可以确保即使表格或按钮在某个时刻被替换，听众仍然可以工作。使用.on()时，第一个参数是我们要处理的特定事件（在本例中为click事件）。第二个参数定义了一个过滤器;基本上，如果匹配该选择器的元素是触发器，则仅处理click事件。最后一个参数是在需要处理事件时调用的函数。
接下来，我们获得对触发事件的按钮的引用（我们将在一秒钟内使用）。然后我们在这个按钮的相关表单上调用jQuery＆＃39; .serialize()，它生成一个表单编码的字符串，我们可以用它来异步发布表单（更多内容在一分钟内）。不幸的是，对于我们的PHP脚本，serialize函数不包括字符串中的按钮（出于超出此问题范围的原因），因此我们必须手动将相关值附加到字符串。
继续，我们使用jQuery的$.post()函数将我们的序列化数据发送到服务器，在那里它将被处理，就好像它是一个普通的POST。 $.post()有一些函数可以用来处理POST的结果;我主要使用的两个是.done()和.fail()。如果请求成功（意味着它返回了3xx HTTP代码），则会调用.done()，并为4xx或5xx HTTP代码调用.fail()。
最后，当收到成功的回复时，我们隐藏当前步骤并显示下一步，直到我们到达最后一步。从那里我会假设您要么返回初始视图，要么显示某种成功消息......

我基本上为三个＆＃34;步骤＆＃34;重复相同的逻辑。你已经概述了。此特定脚本的作用是隐藏并显示每个步骤，因为用户会遍历它。它显然是不完整的，所以让我知道在哪里详细说明。

注意：我已经包含了jQuery和Bootstrap的CDN版本的链接（只是为了让UI看起来不那么简单，并利用一些帮助类）。

HTML按钮创建文本+按钮，然后创建更多关闭

1 个答案: