Создание ссылок в 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>

Для примера, если пользователь выбирает Honda и 2017, то ссылка появляется и адрес Honda/2017.net. Если пользователь выбирает Subaru и 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() значение выбранной опции для автомобиля/бренда и года считывается из html с использованием функции getElementById.

Затем извлеченные значения для бренда и года используются для создания соответствующей ссылки путем объединения автомобиля, косой черты, года и, наконец, строки «.html».

Ссылка, на которую будет перенаправлена форма, устанавливается в атрибуте action. document.leform.action

Для обработки данных, представленных в форме вы будете нуждаться в какой-то механизм CGI: https://en.wikipedia.org/wiki/Common_Gateway_Interface Вы можете использовать PHP для передачи данных дополнительно к базе данных, например.

Надеется, что это помогает ^^ - d

PS: Вы можете также хотите реализовать страницу, которая следует за формой (action=) в PHP как динамический контент. Используя HTTP GET Request, это может выглядеть как /show.php?car=Subaru & Year = 2016, что избавит вас от создания файла html для каждого параметра (автомобиль X year = 15 файлов!). URL-адреса HTTP-запросов GET можно пометить как Хонда/2017.net. Подробнее об этом здесь: http://php.net/manual/en/reserved.variables.request.php

источник

2016-12-01 18:17:06

Он отлично работает! Однако у меня есть последующие действия. Различные сгенерированные ссылки, с которыми я работаю, - это не тот же домен. Я добавлю несколько операторов 'if' в' document.leform.action', так что это не проблема, но как бы сделать ссылку «чистой»? Чистота в том смысле, что я бы просто положил 'document.leform.action = 'www.germany.net +' бренд + '/' + год + '.html'' для' www.germany.net/brand/year.html '.Если я попробую сейчас, то сгенерированная ссылка является расширением сайта, в котором я сейчас. – Nik

используйте полный URL-адрес, включая http-часть, а не только www. - like 'document.leform.action = 'http: //www.google.de/' + brand + '/' + year + '.html';';) –

Кажется, что я получаю расширение. Если для примера я выбираю Honda 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

Вы можете получить значения <datalist> используя onchange событие; сохраните их в переменной где-нибудь, а затем напишите в свою ссылку.

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

ответ

Смежные вопросы