フォームAPPENDちょうど私がこのように、単に値をURLに追加してフォームを送信する必要があるURL

Question

にない変数をVALUES：

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

私はこのように送信することができます：

http://thisistheurl.com/serv？ 変数1 =値 & 変数2 =値 & variable3は=値 & 変数4 =値＃検索/

形態は非常に簡単です。

<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

注文が問題でない場合は、フォームの値をシリアル化し、フォームのアクション属性に追加して最終的な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; 
} 

は単に変更、タグで提出しますあなたのonclick属性はonclick ="formSubmit();"です。