2011-05-22 6 views
5

Supongamos que tengo una forma sencilla en mi página como esta:¿Cómo cambiar la cadena de consulta cuando envío mi formulario GET usando JQuery?

<form action="/properties/search" method="GET" id="form_search"> 
    <p> 
    <label for="price">Min price:</label> 
    <input type="text" name="min_price" id="min_price"> 
    </p> 
    <p> 
    <label for="price">Max price:</label> 
    <input type="text" name="max_price" id="max_price"> 
    </p> 
    <p> 
    <input type="submit"> 
    </p> 
</form> 

Cuando envío mi forma, tengo el siguiente url:

http://.../properties/search?min_price=100000&max_price=200000

Quiero cambiar esta url para tienen:

http://.../properties/search?price=100000,200000

Para hacer eso, estoy usando jQuery y el JQuery querystring plugin:

$(document).ready(function() { 
    $("#form_search").submit(function() { 
     var querystring = rewrite_interval_qstring(); 
     // querystring equals "?price=100000,200000" -> exactly what I want ! 

     // ??? 
    }); 
}); 

¿Cómo puedo cambiar (comentario "???") la url presentar? He probado las siguientes instrucciones por separado, pero no funciona.

window.location = querystring; 
window.location.href = querystring; 
window.location.search = querystring; 

Respuesta

2

Debe impedir que el defecto presentar la acción suceda

$(document).ready(function() { 
    $("#form_search").submit(function(event) { 
     event.preventDefault(); // <-- add this 
     var querystring = rewrite_interval_qstring(); 
     // querystring equals "?price=100000,200000" -> exactly what I want ! 

     window.location.href = querystring; // <-- this should work. 
    }); 
}); 
6

Ya casi está allí. Intercepción de presentar el evento (como lo están haciendo), extraer los valores mínimo y máximo, construir su url y establecer window.location.href

$(document).ready(function() { 
    $("#form_search").submit(function(event) { 
     event.preventDefault(); 
     $this = $(this); 
     // var url = rewrite_interval_qstring(); 
     var min_price = $('#min_price').val(); 
     var max_price = $('#max_price').val(); 
     var url = $this.attr('action') + '?price=' + min_price + ',' + max_price; 
     window.location.href = url; 
    }); 
}); 
1

respuesta por Rob Cowie es un método. Otra opción es agregar un campo oculto llamado "precio" y completarlo antes de enviarlo con el valor que desee.

Cuestiones relacionadas