how can I add a parameter to a url with jquery

Question

how can I add a parameter to a url with jquery

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

There is some way to add a parameter to a url I found myself with this script but I still can not understand it

HTML

<select class="form-control js-sort-by" name="sort_by">
<option value="price-ascending">Precio: Menor a Mayor</option>
<option value="price-descending">Precio: Mayor a Menor</option>
<option value="alpha-ascending">A - Z</option>
<option value="alpha-descending">Z - A</option>
<option value="created-descending">Más Nuevo al más Viejo</option>
<option value="created-ascending">Más Viejo al más Nuevo</option>
<option value="best-selling" selected="">Más Vendidos</option>
<input type="submit" value="">
</select>

<script>
$('.js-sort-by').change(function(){
var params = LS.urlParams;
params['sort_by'] = $(this).val();
var sort_params_array = [];
for (var key in params) {
if ($.inArray(key, ['results_only', 'page']) == -1) {
sort_params_array.push(key + '=' + params[key]);
}
}
var sort_params = sort_params_array.join('&');
window.location = window.location.pathname + '?' + sort_params;
});
 </script>

my idea would be to change the option that the parameter is added sort_by

midominio.com/categor/?sort_by=created-ascending

jquery

asked by zayu 10.12.2018 в 19:53

source

2 answers

Gettext does not translate the strings InnerHTML angular 5 does not respect width

score 0 · Answer 1

Try it in the following way (copy it and run it on your pc, the snippet here does not make it right)

<select class="form-control js-sort-by" name="sort_by">
  <option value="price-ascending">Precio: Menor a Mayor</option>
  <option value="price-descending">Precio: Mayor a Menor</option>
  <option value="alpha-ascending">A - Z</option>
  <option value="alpha-descending">Z - A</option>
  <option value="created-descending">Más Nuevo al más Viejo</option>
  <option value="created-ascending">Más Viejo al más Nuevo</option>
  <option value="best-selling" selected="">Más Vendidos</option>
</select>

<label> Probar varios cambios en el select para ver la url</label>
<script
  src="https://code.jquery.com/jquery-3.3.1.js"
  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
  crossorigin="anonymous"></script>

<script>
  $('.js-sort-by').on('change', function() {
  var valor = $(this).val();
  var direccion = window.location.pathname + '?sort_by=' + valor;
  alert("DIRECCION A LA QUE VOY A SER REDIRECCIONADO " + direccion)
  

  window.location.href = window.location.pathname + '?sort_by=' + valor
  });


  $.get = function(key)   { 
    key = key.replace(/[\[]/, '\[');  
    key = key.replace(/[\]]/, '\]');  
    var pattern = "[\?&]" + key + "=([^&#]*)";  
    var regex = new RegExp(pattern);  
    var url = unescape(window.location.href);  
    var results = regex.exec(url);  
    if (results === null) {  
        return null;  
    } else {  
        return results[1];  
    }  
  }
 
    var a = $.get("sort_by");

    if (a != null) {
      alert("VARIABLE QUE ESTA LLEGANDO AL SORT BY: " + a)
}

 </script>

score 0 · Answer 2

Add the id attribute to your select, in this case it was id="sortBy"

<select class="form-control js-sort-by" name="sort_by" id="sortBy">
<option value="price-ascending">Precio: Menor a Mayor</option>
<option value="price-descending">Precio: Mayor a Menor</option>
<option value="alpha-ascending">A - Z</option>
<option value="alpha-descending">Z - A</option>
<option value="created-descending">Más Nuevo al más Viejo</option>
<option value="created-ascending">Más Viejo al más Nuevo</option>
<option value="best-selling" selected="">Más Vendidos</option>
<input type="submit" value="">
</select>

in your js, with a jquery change function you only take the value of your select.

    <script>

        $("#sortBy").change(function(){

             // tomas el valor de tu select.
            var dispatch_value = $("#dispatch").val();

            // lo guardas en una variable que deseas
            var menu = dispatch_value + "?Param="+dispatch_value;

 // con la funcion de jquery attr le mandas el valor de tu url guardado en la variable menu, este simplemente lo sobreescribe cada vez que se encuentre un cambio.
                $('#call_dispatch').attr('href',menu);


          // aqui simpemente lo pruebas
                var x = $('#call_dispatch').attr('href');


          alert(window.location.pathname + x);
// window.location =  window.location.pathname + x
        });
    </script>

I hope I have helped you.