时间戳

首页 > 解决方案 > 如何在提交前使用 JS 保存 PHP 表单中的变量

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

问题描述

我对 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>

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

谢谢

标签： javascriptphp

解决方案

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

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

如何提交选择更改表格

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

但是 - 如果您不想使用框架并且不关心旧版浏览器，您可以只使用带有 Fetch 的“vanilla”Javascript（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. 听 onchange on select
  2. 选择更改时从后端获取
  3. 显示抓取结果

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

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

推荐阅读