如果页面重新加载，如何在表单上保留对单选按钮的选择

Posted 2023-05-09

【中文标题】如果页面重新加载，如何在表单上保留对单选按钮的选择

【英文标题】：How can I keep the selection of a radio button on a form if a page reloads

【发布时间】：2019-10-26 03:17:05

【问题描述】：

早安，

我创建的表单的一部分由两组单选按钮组成，它们根据选择的按钮显示特定文本。

如果用户单击提交按钮，但没有错误地输入错误（或错过了某个字段），则页面会重新加载并在顶部显示错误。不幸的是，单选按钮被重置为无选择，因此用户必须再次选择选项才能显示需要修改的相关文本。

如何才能使单选按钮在页面重新加载后不会重置（即，将保存选择）？

注意：用户点击提交后，我无法阻止页面重新加载；这就是 CMS 的设置方式。

我尝试了一些脚本并在 Google 上进行了搜索，但由于我正在使用的古老 CMS 的限制，我似乎无法获得任何工作。

<p id="submit">Please select one of the following:<strong class="required" style="color:red">(required)</strong></p><div>

// 这里是需要保存的单选按钮组之一。您会注意到他们正在调用脚本以在选择时显示特定文本

<input type="radio" name="type" id="selection1" onclick="myOwnBehalf()" required> I am submitting this question on my on own behalf.<br/>
<input type="radio" name="type" id="selection2" onclick="onBehalfSomeone()" required> I am making this question on behalf of someone else.<br/>
<input type="radio" name="type" id="selection3" onclick="anon()" required> I would like to be anonymous.<br/>

....

一旦页面重新加载，单选按钮选项将重置为空白，因为用户填写不正确。

【问题讨论】：

How to reload current page without losing any form data?的可能重复

【参考方案1】：

每次您导航到新页面（或返回同一页面）时，所有 javascript 状态都会丢失。

这意味着您需要以一种或另一种方式将旧状态传递给新页面。以下是执行此操作的一些方法：

这些需要为您的页面使用像 php 这样的脚本语言：

PHP 会话（如果您使用 PHP 脚本语言） 使用表单 POST 而不是简单的链接进行导航

这些可以只用 JavaScript 完成

您导航到的 URL 中的 CGI 变量，例如 mypage.php?choice1=3&choice2=5 设置一个cookie然后读取它 html5 本地存储

（CGI 变量：How to get the value from the GET parameters?）