如何在提交前使用 JS 保存 PHP 表单中的变量

Question

我对 PHP 很陌生，所以很抱歉没有完全了解代码结构。

在 PHP 文件中，我有一个表单，其中包含从数据库查询中填充的下拉菜单中的选项（根据参赛者的数量，锦标赛的回合数）。 一旦用户选择了一轮夹具的选项，他们希望查看该选项作为变量传递，以确定提交表单时显示的内容。 在表单上提交页面更改的 rest 以显示与用户从下拉列表中选择的回合相关的数据库中的夹具。

我的挑战是，从下拉菜单中选择轮数后，我必须单击提交按钮两次 - 一次分配变量，然后第二次按下提交，以便能够将变量用作显示过程的一部分来自数据库的夹具信息。

我知道可以使用 JS 来存储一个变量，然后可以在表单提交时使用该变量，但我不确定如何将它与表单 / 的编写方式集成。

在查看了 web 上的几个地方（如 W3Schools）后，我有一些基本的 JS 并尝试过，但我认为用户选择和存储准备好在单击提交时使用的变量之间仍然存在脱节。

//Basic JS
<script>
function getFormIndex() {
  document.getElementById($_POST['roundselect']).innerHTML =
  document.getElementById("roundselect").selectedIndex;
}
</script>

//PHP Elements

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

$roundnum = $_POST['roundselect']; }

<?php
function setround(){

    $roundnum = $_POST['roundselect'];
    echo $roundnum;        
    }
?>  

//Form

<div class="h2_select">
                <?  if($fnum) { 
                    $select_opt = (isset($_GET['round'])) ? $_GET['round'] : 1;                 
                ?>
                    <form method="post" action="/tournaments/<?=$lid; ?>/fixtures/<?= $roundnum; ?>" name="rf">
                        <!--<input type="hidden" name="id" value="/<?=$lid; ?>" />
                        <input type="hidden" name="page" value="/fixtures" /> -->


                            <span class="minput">Select Round
                            <select size=1 class="mselect"  name="roundselect" onChange=getFormIndex();>
                                <? for($i=1; $i <= $total_rounds; $i++) { ?>
                                    <option value="<?= $i ?>" <?php if($i == $select_opt){ echo 'selected'; } ?> > <?= $i?> </option>
                                <? }
                                ?>
                            </select>&nbsp;
                            <input type="submit" name="submit" value="<?= $lang[185] ?>" class="minput"/>
                    </form>              
                <? } ?>
            </div>

为了确认，该表格可以工作并显示正确的信息。 问题是我目前需要点击“提交”两次。

谢谢

Answer 1

好的开始，我会用一点 AJAX 来做到这一点，它允许我们“在后台”发送请求并接收答案 - 这样用户第一次更改 select 我会在后台从后端获取数据并显示它而不需要双重提交。

请检查这个线程 - 我认为它说明了同样的事情；

如何在 Select 更改上提交表格

它基于 JQuery，我认为这对于新开发人员来说是一个好的开始。

但是 - 如果您不想使用框架并且不关心较旧的浏览器，您可以使用“vanilla” Javascript 和 Fetch （ https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API ) 和 onchange https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event

Fetch 返回结果，因此您必须将其传递回网站。

这样做很容易： 1. 在您的页面上设置一个 div 并为其添加一个唯一 ID（例如） 2. 使用 document.getElementById("result").innerHTML = resultFromFetch;

所以：

1. 在 select 上听 onchange
2. 当 select 改变时从后端获取
3. 显示抓取结果

AJAX 非常简洁，非常适合用户体验，因为它允许我们在应用程序的“后台”异步获取数据。 但是，同时显示一些“请稍候”指示并确保显示一些潜在错误是一种很好的用户体验措施（在等待结果时，连接可能 go “关闭”，然后向用户显示错误是明智的他们永远等待）。

希望这有助于为您指明一个新的退出方向。