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

Answer 2

这是一个小提琴，可以准确地为您提供所要求的内容：http://jsfiddle.net/9Le00jtw/

$("#formone").submit( function() {

document.location.assign( "http://onlinereservation.html#!" + "/" + $("input[name=date_from]").val() + "/" + $("input[name=date_to]").val() + "/adults:" + $("select[name=adults]").val() + "/children:" + $("select[name=children]").val() );
return false;
});

以下是我会这样做的小提琴：http://jsfiddle.net/xLmsb1xo/1/

现在我意识到你想使用反斜杠字符来分隔每个值，但是，可能最简单的方法，实际上，最常见/标准的方法是使用语法＆＃34;？variable =＆＃34那就是为什么在此之后建模此代码的原因。它使得从url中解析变量变得更加容易。您会在代码中注意到我将其设置为显示为简单的alert()消息。要链接到网页而不是提醒，您可以将alert()替换为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获取当前窗口的位置，然后使用变量名称将变量附加到它，然后使用其名称属性将相应的输入/选择框的值附加到其中。选择器语法为tagname[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>

编辑：我添加了＃34;返回false;＆＃34;到submit（）函数。原因是因为我们需要告诉表单停止尝试提交并按原样处理脚本，这将允许重定向。

Answer 3

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

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

＆＃13;

var adult = $('.select[name=adults]').val();
var date_from = $('.input[name=date_from]').val();

＆＃13;

等...

然后，您可以在函数中添加字符串并返回输出。

Answer 4

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

但是你可以创建函数，它从表单字段中收集数据。它必须迭代选择＆＃39;和输入＆＃39;表单的标签和生成键值字符串，某种date_from:16-04-2015。之后，您应该使用/加入此字符串。因此，您将拥有网址的右侧，以便您可以将其与静态网址相结合。在您的情况下，静态部分将为online-reservation.html#!/Rooms/。

现在，您可以致电document.location.href = <here your generated url>来更改您的位置。同时，如果您的函数是表单提交事件处理程序，您应该记住阻止默认表单提交事件。

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

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

4 个答案: