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

Question

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

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

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

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

查看网络上的一些地方（如 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 来做，它允许我们“在后台”发送请求并接收答案 - 这样当用户第一次更改选择时，我会在后台从后端获取数据并无需重复提交即可显示。

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

How to Submit Form on Select Change

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

但是 - 如果你不想使用框架并且不关心旧浏览器，你可以使用带有 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的“vanilla”Javascript

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

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

所以：

1. 在选择时收听 onchange
2. 选择更改时从后端获取
3. 显示抓取结果

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

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