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

Question

我有以下表格:

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

现在我想在上面的表单提交上调用一个 javascript 函数。此函数将获取所有表单元素值并创建以下 URL 进行重定向。

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

如何创建这个 JS 函数？

谢谢。

Answer 1

以下情况如何:

# 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);