HTML语言和表格 使用原本应使用的形式

编程问答 2022-06-07

问题描述

我对HTML表单有疑问。我想到的是让网站访问者选择一个位置，然后在Sicily中选择两个位置之一将其重定向到特定的网页，一个基于所选位置的另一个不同于另一个网页（并且现在两个重定向文件位于与主文件相同的文件夹，分别是“ Book = Catania”和“ Book = Mondello”。

我在<input type = "text">中使用了一些“列表”建议。对于答案，我使用了带有if条件的JavaScript脚本。

<html>
<head>
...
</head>
<body>
<SCRIPT LANGUAGE = "JavaScript">
function checkCheckBox (f) {
if (f.mondello.checked == true)
{
window.location.href = 'book=mondello.html';
return false;
}
if (f.catania.checked == true)
{
window.location.href = 'book=catania.html';
return false;
}}
</script>
<form action = "" method = "POST" onsubmit = "return checkCheckBox (this)">
<fieldset>
<br/>
<legend> Indicates the place </legend>
<input type = "text" size = "40" list = "places">
<datalist id = "places">
  <option value = "Mondello,PA,Sicily" name = "mondello">
  <option value = "Catania,CT,Sicily" name = "catania">
</datalist>
</body>
</html>

解决方法

使用原本应使用的形式。

您有很多实际上没有帮助的代码。通过使用基于文本的选择下拉列表，您实际上可以在该字段中输入所需的任何内容。这可能会在您的网站上造成404错误。

我已将您的输入更改为带有名称簿的select。很难在堆栈片段中显示，但是在提交表单时，它将使用参数book=<selected option>导航到当前页面（以更改表单元素上的操作）。您可以重新添加post方法，该方法会将其隐藏在URL中，但这将使其很难链接到朋友。

您唯一需要的JS是强制表单在选择更改时提交。您需要使选择器更适合您的方案，但这就是JS所需的全部。

document.querySelector('select').addEventListener('change',function() {
  document.querySelector('form').submit();
})
<body>
  <form>
    <select name="book">
      <option disabled selected>Select one</option>
      <option value="mondello">Mondello,PA,Sicily</option>
      <option value="catania">Catania,CT,Sicily</option>
    </select>
  </form>
</body>

formshtmljavascriptlistoption