如何在提交之前使用 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>

为了确认,表单有效并显示正确的信息。问题是我目前需要单击"提交"两次。

谢谢

好的开始,我会使用一些 AJAX 来做到这一点,它允许我们发送请求并"在后台"接收答案 - 以便第一次用户更改选择 我会在后台从后端获取数据并显示它,而无需双重提交。

请检查此线程 - 我认为它说明了同样的事情;

如何提交选择更改的表格

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

但是 - 如果您不想使用框架并且不关心较旧的浏览器,则可以将"vanilla"Javascript与Fetch(https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API(一起使用,并在 https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event

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

使用以下方法很容易做到: 1. 在您的页面上设置一个div 并为其添加一个唯一的 ID(如 ( 2. use document.getElementById("result"(.innerHTML = resultFromFetch;

所以:

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

AJAX非常整洁,非常适合用户体验,因为它允许我们在应用程序的"后台"异步获取数据。但是,这是一个很好的用户体验衡量标准,还可以显示一些"请稍候"指示,并确保显示一些潜在的错误(等待结果时连接可能会"关闭",然后向用户显示错误而不是他们永远等待是明智的(。

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

最新更新