CODEWITHSUNDEEP
phpjqueryformsurl
Estudio 3551
Estudio 3551

Reputation: 170

Form append just VALUES not variables to URL

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.

Upvotes: 0

Views: 77

Answers (2)

james_bond
james_bond

Reputation: 6908

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/

Upvotes: 1

axel.michel
axel.michel

Reputation: 5764

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

Upvotes: 0

Related Questions