我有一个包含两个 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/