Javascript 获取表单值以创建自定义URL

我有以下表格：

<form>
        <div>Adults</div>
        <div>
            <select name="adults">
            <option selected="selected" value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            </select>
        </div>
    </div>      
    <div>
        <div>Children</div>
        <div>
            <select name="children">
            <option selected="selected" value="0">0</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            </select>
        </div>
    </div>      
    <div>
        <div>Check-in date</div>
        <div>
            <input name="date_from" value="16-04-2015" type="text"></div>
    </div>      
    <div>
        <div>Check-out date</div>
        <div><input name="date_to" value="17-04-2015" type="text"></div>
    </div>      
    <div>
        <input value="Check Availability" type="submit">
    </div>      
</form>

如何创建这个JS函数

---

谢谢。

这是一个字符串操作问题。您的函数需要输出包含所需字段的字符串，是吗

如果您有jQuery，可以从字段中提取值，如下所示：

var成人=$”。选择[name=maintals]'.val；

---

var date_from=$”.输入[name=date_from]'.val 这里有一把小提琴，它会给你你想要的东西：

这里有一个小提琴的方式，我会这样做：

现在我意识到，您希望使用反斜杠字符来分隔每个值，然而，可能是最简单的方法，实际上，最常见/标准的方法是使用语法？variable=，这就是为什么此代码是在这之后建模的。这使得从url解析变量变得更加容易。您会注意到，在代码中，我将其设置为显示为一条简单的警报消息。为了链接到页面而不是警报，您可以将警报替换为document.location.assign

JavaScript:

window.onload = function() {
$("#formone").submit( function() {
    /* when user hits the submit button do following */
   alert( window.location.href + "?datefrom=" + $("input[name=date_from]").val() + "?dateto=" + $("input[name=date_to]").val() + "?adults=" + $("select[name=adults]").val() + "?children=" + $("select[name=children]").val() );
*/get the window location and add "?variable=" then the value of 
the input or select box for that variable a.e. ?dateto=04-17-2015 */
return false;
});
}

在上面的代码中，我们使用window.location.href获取当前窗口的位置，然后使用变量名将变量附加到当前窗口中，然后使用相应的输入/选择框的名称属性将其值附加到当前窗口中。选择器语法是标记名[attr=text]——因此，如果我们试图找到名为bingo的输入框，我们将在jQuery$input[name=bingo]中使用此选择器，如果我们正在寻找名为banana的选择框，我们将使用此选择器$select[name=banana]

HTML:

<form method="POST" id="formone">
<!-- we added the method="POST" so that the browser knows what to do with 
the form when the submit button is tapped and the id so that we can identify 
it -->
        <div>Adults</div>
        <div>
            <select name="adults">
            <option selected="selected" value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            </select>
        </div>
    </div>      
    <div>
        <div>Children</div>
        <div>
            <select name="children">
            <option selected="selected" value="0">0</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            </select>
        </div>
    </div>      
    <div>
        <div>Check-in date</div>
        <div>
            <input name="date_from" value="16-04-2015" type="text"></div>
    </div>      
    <div>
        <div>Check-out date</div>
        <div><input name="date_to" value="17-04-2015" type="text"></div>
    </div>      
    <div>
        <input value="Check Availability" type="submit">
    </div>      
</form>

---

编辑：我添加了returnfalse；到提交功能。原因是因为我们需要告诉表单停止尝试提交并按原样处理脚本，这将允许重定向。

以下内容如何：

online-reservation.html#!/Rooms/date_from:16-04-2015/date_to:17-04-2015/adults:1/children:0

# Serialize the data like we want it
function serialize (form) {
  return [].slice.call(form.querySelectorAll('[name]'))
    .reduce(function (carry, input) {
      return carry + '/' + input.name + ':' + encodeURIComponent(input.value);
    }, '');
}

function submitHandler (e) {
  e.preventDefault();
  window.location = '/online-reservation.html#!' + serialize(e.target)
}

# Bind handler to form submit
document.querySelector('form')
  .addEventListener('submit', submitHandler);

---

您通常不使用表单进行重定向

online-reservation.html#!/Rooms/date_from:16-04-2015/date_to:17-04-2015/adults:1/children:0

但您可以创建函数，该函数从表单字段收集数据。它必须迭代选择表单的“和输入”标记，并生成键值字符串，某种日期为：16-04-2015。之后，您应该将此字符串与/。因此，您将拥有url的右侧，这样您就可以将其与url的静态部分结合起来。在您的情况下，静态部分将是online-reservation.html/房间/

现在，您可以调用document.location.href=更改您的位置。同时，如果您的函数是表单提交事件处理程序，您应该记住防止默认表单提交事件

---

您可以找到有效的解决方案

我觉得如果您将表单数据发布到控制器，然后通过PHP通过服务器端代码处理您想做的事情，那么您尝试做的事情会更好，因为您标记了这个PHP.zfrisch，似乎您已经将我引向了正确的方向。将警报替换为document.location.assign不会将页面提交到新URL。它保留在表单页。@SantoshMaharjan对此表示抱歉。我加了返回假；在submit函数的底部。在任何其他上下文中，document.location.assign都可以正常工作，但由于它是表单提交，因此需要返回false，因为它告诉脚本停止处理并允许重定向。由于某种原因，我无法更新JSFIDLE，但是如果您查看上面的JavaScript，您将看到附加的返回false；通过在表单中添加onsubmit=return false使其正常工作。谢谢你。