javascript — создание URL-адреса динамической ссылки на основе информации о пользователе в поле ввода

Question

javascript — создание URL-адреса динамической ссылки на основе информации о пользователе в поле ввода

Я пытаюсь создать различные поля ввода, где посетители могут ввести значение, а затем нажать «Перейти» или «Отправить» для перенаправления на определенный веб-сайт.

На основании введенной ими информации они будут отправлены на конкретную ссылку

Например, если они введут Место: Калифорния, День: 2, Месяц: 2, Год: 17, Идентификационный номер: 234 и нажмут кнопку «Отправить», они отправят их по адресу: http://www.example.com/california/2-2-17/234

Я не программист, но поиск нашел это решение, но только с одним импульсом, и мне было интересно, можно ли изменить его для работы с описанными выше импутами:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$('#button').click(function(e) {
var inputvalue = $("#input").val();
window.location.replace(" http://www.example.com/page/"+inputvalue);

});
});
</script>
</head>
<body>

<input type="text" value="11" id="input">
<button type="button" id="button">Click Me!</button>
</body>
</html>

1

forms hyperlink javascript location-href php

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

это рабочий пример того, что вам нужно

<!DOCTYPE html>
<html dir="ltr">
<head>
<title>Untitled Page</title>
</head>
<body>
<form id="form">
<input type="text" name="place" placeholder="Place" value="" id="place" required>
<input type="text" name="day" placeholder="Day" value="" id="day" required>
<input type="text" name="month" placeholder="Month" value="" id="month" required>
<input type="text" name="year" placeholder="Year" value="" id="year" required>
<input type="text" name="id_number" placeholder="ID Number" value="" id="id_number" required>
<button type="submit" id="button">Click Me!</button>
</form>

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$(document).ready(function () {
$("#form").on('submit', function (e) {
e.preventDefault();
window.location.replace("http://www.example.com/page/" + $("#place").val() + "/" + $("#day").val() + "-" + $("#month").val() + "-" + $("#year").val() + "/" + $("#id_number").val());
});
});
</script>
</body>
</html>

транслятор;

я изменяю вашу декларацию типа документа HTML на стандарт HTML5
добавить обязательный для всех входных данных для минимальной проверки, чтобы избежать неправильной генерации URL. Здесь вы можете узнать больше о проверке HTML5 https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Data_form_validation (ВНИМАНИЕ! Они не работают на каждой версии браузера)
поместите JS-скрипты внизу страницы, чтобы избежать задержки загрузки страницы.

АЛЬТЕРНАТИВА с календарем

предупреждение! Функция HTML5, не во всех браузерах!

<!DOCTYPE html>
<html dir="ltr">
<head>
<title>Untitled Page</title>
</head>
<body>
<form id="form">
<input type="text" name="place" placeholder="Place" id="place" required>
<input type="date" name="calendar" placeholder="Date" id="calendar" required>
<input type="number" name="id_number" placeholder="ID Number" id="id_number" required>
<button type="submit" id="button">Click Me!</button>
</form>

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$(document).ready(function () {
$("#form").on('submit', function (e) {
e.preventDefault();
window.location.replace("http://www.example.com/page/" + $("#place").val() + "/" + $("#calendar").val().split("-").reverse().join("-") + "/" + $("#id_number").val());
});
});
</script>
</body>
</html>

0