表单仅将 VALUES 而非变量附加到 URL

Question

我需要发送一个仅包含附加到 URL 的值的表单，如下所示：

http://thisistheurl.com/serv#search/VALUE1/VALUE2/VALUE3/VALUE4

我可以这样发送：

http://thisistheurl.com/serv?variable1=value&variable2=value&variable3=value&variable4=value #搜索/

表格很简单。

<form id="consultatickets" name="consultatickets" role="form" method="get" class="tickets-form" action="http://thisistheurl.com/serv#search/" target="_blank">

<div class="row">
    <div class="form-group col-md-12 col-sm-12">
        <label for="ciudadorigen" class="tickets-imputs">Ciudad de Origen</label>
        <select name="ciudadorigen" class="form-control ciudadorigen tickets-imputs" for="ciudadorigen">
            <option selected disabled>1</option>
            <option value="562">2</option>
            <option value="582">3</option>
        </select>                   
    </div>
</div>

<!-- Here goes the rest of the form -->

<a type="submit" class="btn btn-warning waves-effect btn-block" href="javascript:{}" onclick="document.getElementById('consultatickets').submit();">Buscar <i class="fa fa-search" aria-hidden="true"></i></a>
</div>

我不知道如何仅从变量中提取值并附加到 URL。

Answer 1

如果顺序无关紧要，您可以通过将表单的值序列化并将其附加到表单的 action 属性以构建最终 url 来实现。

<form id="consultatickets" name="consultatickets" role="form" method="get" class="tickets-form" action="http://thisistheurl.com/serv#search" target="_blank">

<div class="row">
    <div class="form-group col-md-12 col-sm-12">
        <label for="ciudadorigen" class="tickets-imputs">Ciudad de Origen</label>
        <select name="ciudadorigen" class="form-control ciudadorigen tickets-imputs" for="ciudadorigen">
            <option selected disabled>1</option>
            <option value="562">2</option>
            <option value="582">3</option>
        </select>
        <label for="campo_adicional">Campo adicional</label>
        <input id="campo_adicional" type="text" name="campo_adicional" />
    </div>
</div>
<input type="submit" value="search"/>
</form>

$("#consultatickets").on('submit',
function(e) {
  e.preventDefault();
  var values = $(this).serializeArray();
  var baseUrl = $(this).prop("action");
  $.each(values, function(i, v) {
    baseUrl += "/" + encodeURIComponent(v.value);
  });
  alert(baseUrl);
}
);

https://jsfiddle.net/kb3rvLjs/

Answer 2

未经测试，我不确定我是否正确地回答了您的问题，但您似乎正在寻找这样的东西：

// your form submit event handler
function formSubmit() {
    var form = $('#consultatickets');
    // build your url
    var url = 'http://thisistheurl.com/serv#search/' + 
        getValues(form).join('/');

    // redirect to your new location
    location.href = url;
};

// function to get the values from the form elements
function getValues(form) {
    // get all form fields in the form
    var fields = $( "input, select", form);
    var values = [];
    // loop over the fields, add them to array
    jQuery.each( fields, function( field ) {
      values.push(encodeURI(field.val()));
    });
    return values;
}

如果您想使用 a 标签触发表单提交，只需将您的 onclick 属性更改为：onclick ="formSubmit();"。