Question

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

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

我可以像这样发送：

http://thisistheurl.com/serv的变量1 =值＆安培;？变量=值＆安培;的 variable3 =值＆安培;的 variable4 =值＃搜寻/

表格很简单。

<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();"。

表格仅将VALUES而非变量附加到网址

2 个答案: