html - 在 HTML 中生成链接

标签 html forms href datalist

我有一个包含两个 datalist 的表单,我想根据用户的选择生成一个链接。

<form>

<input list="Cars">
  <datalist id="Cars">
  <option value="Honda" selected>Honda</option>
  <option value="Mazda">Mazda</option>
  <option value="Ford">Ford</option>
  <option value="Nissan">Nissan</option>
  <option value="Subaru">Subaru</option>
  </datalist>

<input list="Years">
  <datalist id="Years">
  <option value="2017">2017</option>
  <option value="2016">2016</option>
  <option value="2015">2015</option>
  </datalist>

  <input type="reset">

</form>

例如,如果用户选择本田和 2017,则会出现链接,地址为 Honda/2017.net。如果用户选择斯巴鲁和2015那么地址是Subaru/2015.net等等。

我可以在代码中手动输入不同的 href 但我不确定您如何根据选择更改一个链接?

最佳答案

对于所谓的动态 html 或 DHTML,您需要 Javascript。可以这样做:

<!DOCTYPE html>
<script type="text/javascript">
function generateLink()
{

  var brand = document.getElementById('carBrand').value;

  var year = document.getElementById('carYear').value;

  document.leform.action =brand + '/' + year + '.html';

  return true;

}
</script>

<form name="leform" onsubmit="return generateLink();">

<input list="Cars" id='carBrand'>
  <datalist id="Cars">
  <option value="Honda" selected>Honda</option>
  <option value="Mazda">Mazda</option>
  <option value="Ford">Ford</option>
  <option value="Nissan">Nissan</option>
  <option value="Subaru">Subaru</option>
  </datalist>

<input list="Years" id='carYear'>
  <datalist id="Years">
  <option value="2017">2017</option>
  <option value="2016">2016</option>
  <option value="2015">2015</option>
  </datalist>

  <input type="reset">
  <input type="submit">

</form>

会发生什么?

如果单击提交按钮,则调用 generateLink() 函数。 onsubmit="return generateLink();"

在 generateLink() 函数中,汽车/品牌的所选选项的值和年份是使用 getElementById 函数从 html 中读取的。

然后提取的品牌和年份值用于通过连接汽车、斜杠、年份和最后的字符串“.html”来生成相应的链接。

表单将重定向到的链接在表单操作属性中设置。 document.leform.action

要处理表单提交的数据,您需要某种 CGI 机制:https://en.wikipedia.org/wiki/Common_Gateway_Interface 例如,您可以使用 PHP 将数据进一步传递到数据库。

希望对你有帮助^^-d

PS:您可能还想在 PHP 中实现遵循表单 (action=) 的页面作为动态内容。使用 HTTP GET 请求,这可能看起来像/show.php?car=Subaru&Year=2016,这将使您无需为每个选项创建一个 html 文件(car X year = 15 个文件!)。 HTTP GET 请求的 URL 可以像 Honda/2017.net 这样被添加为书签。这里有更多信息:http://php.net/manual/en/reserved.variables.request.php

关于html - 在 HTML 中生成链接,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40916807/

相关文章:

html - 页脚CSS查询

javascript - 在 Javascripts 中对非英文名称进行排序

php - 可以将提交按钮重新定位到我的表单底部吗?

javascript - Window.open + href 替换并弹出到新窗口但不使用目标_blank

javascript - 如何使用jquery获取链接的href属性并将其设置为下一个同级的href?

html - 指定列宽为h :panelGrid

c# - 客户端 Blazor 表单提交两次

javascript - 扫描条形码后自动提交 HTML 表单

php - 使用xpath和php选择所有href属性和选择所有具有href属性的 anchor 元素之间的区别

javascript - jquery 可拖动输入无法检测到按键/输入任何内容