Создайте динамический 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>

javascript php forms hyperlink location-href
person Bob    schedule 23.02.2017    source источник

Ответы (1)


arrow_upward
0
arrow_downward

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

<!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>

TLTR;

  • я изменяю ваше объявление html doctype на стандарт 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>
person Vitaliy Ryaboy    schedule 23.02.2017