在HTML中生成链接

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

<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，但我不确定如何根据选择更改一个链接？

来源

2016-12-01 Nik

你将需要JavaScript。 – mhatch

需要Javascript为所谓的动态HTML或DHTML。可以这样做：

<!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 &年= 2016年，这将节省您从每个选项创建一个HTML文件（汽车X年= 15个文件！）。 HTTP GET Requests的URL可以像Honda/2017.net一样添加书签。更多的信息在这里：http://php.net/manual/en/reserved.variables.request.php

来源

2016-12-01 18:17:06

它很棒！不过，我确实有一个后续。我正在使用的不同生成的链接不是相同的域。我会在'document.leform.action'中添加几个'if'语句，所以这不是问题，但我怎样才能使链接“干净”？在某种意义上讲，我只是把'document.leform.action ='www.germany.net +'brand +'/'+ year +'.html'作为'www.germany.net/brand/year.html '。如果我现在尝试它，那么生成的链接就是我目前所在站点的一个扩展。 – Nik

使用包括http部分而不是www的完整url。 - 比如'document.leform.action ='http：//www.google.de/'+ brand +'/'+ year +'.html';';） –

我似乎还在延期。如果举个例子，我选择本田2015，那么它是'document.leform.action ='http：//www.japan.net +'brand +'/'+ year +'.html';' – Nik

使用下面的代码片段作为样板。

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title></title> 
 
</head> 
 
<body> 
 
<form> 
 

 
\t <input list="Cars" onchange="generateUrl()"> 
 
\t <datalist id="Cars"> 
 
\t <option value="Honda" selected>Honda</option> 
 
\t <option value="Mazda">Mazda</option> 
 
\t <option value="Ford">Ford</option> 
 
\t <option value="Nissan">Nissan</option> 
 
\t <option value="Subaru">Subaru</option> 
 
\t </datalist> 
 

 
\t <input list="Years" onchange="generateUrl()"> 
 
\t <datalist id="Years"> 
 
\t <option value="2017">2017</option> 
 
\t <option value="2016">2016</option> 
 
\t <option value="2015">2015</option> 
 
\t </datalist> 
 

 
\t <input type="reset"> 
 

 
</form> 
 

 
<p id="generated"> 
 
\t 
 
</p> 
 
<script type="text/javascript"> 
 
function generateUrl(){ 
 
\t var x = document.querySelector("[list='Cars']").value; 
 
\t var y = document.querySelector("[list='Years']").value; 
 
\t document.getElementById('generated').innerHTML = (x+y); 
 
} 
 
</script> 
 
</body> 
 
</html>

来源

2016-12-01 17:56:40 marmeladze

你可以抓住使用onchange事件<datalist>的值;将它们存储在某个变量中，然后将其写入链接。

var car = ''; 
 
var year = ''; 
 

 
$("input[name=car-list]").on('change', function(){ 
 
    car = $(this).val(); 
 
}); 
 

 
$("input[name=yr-list]").on('change', function(){ 
 
    year = $(this).val(); 
 
}); 
 

 
$("input[name=submit]").on('click', function(){ 
 
    $("#mylink").attr('href', car + '/' + year); 
 
    $("#mylink").html(car + '/' + year); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 

 
<input list="Cars" name="car-list"> 
 
    <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" name="yr-list"> 
 
    <datalist id="Years"> 
 
    <option value="2017">2017</option> 
 
    <option value="2016">2016</option> 
 
    <option value="2015">2015</option> 
 
    </datalist> 
 

 
    <input type="button" name="submit" value="Submit"> 
 
    <input type="reset"> 
 

 
</form> 
 

 
<a id="mylink" href="">My Link</a>

来源

2016-12-01 18:00:58 mhatch

在HTML中生成链接

回答

相关问题