Form append just VALUES not variables to URL - php

Question

I need to send a Form with just the values append to the URL, like this:
http://thisistheurl.com/serv#search/VALUE1/VALUE2/VALUE3/VALUE4
I could send like this:
http://thisistheurl.com/serv?variable1=value&variable2=value&variable3=value&variable4=value#search/
The form is very simple.
<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>
I don't know how to extract the just the values from the variables and append to the URL.

Answer 1

If the order doesn't matter, you can achieve this by serializing the values of the form and appending it to the action attribute of the form to build the final 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

Untested and I'm not sure if I got your question correctly but it seems you look for something like this:
// 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;
}
In case you want to trigger the form submit with the a tag, simply change your onclick attribute to: onclick ="formSubmit();".