Question

我正在尝试创建各种输入字段，访问者可以在其中输入值，然后点击或提交以重定向到特定网站。

根据他们输入的信息，他们将被发送到特定链接

例如，如果他们输入Place：california，Day：2，Month：2，Year：17，Id number：234，并点击提交，则会将其发送到http://www.example.com/california/2-2-17/234

我不是程序员，但是搜索找到了这个解决方案，但只有一个输入，并且想知道是否可以修改以使用上述的imputs：

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

Answer 1

这是您需要的工作示例

<!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脚本放在页面底部，以避免延迟加载页面。

ALTERNATIVE with calendar

警告！ 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>

根据输入字段的用户信息创建动态链接URL

1 个答案: