jquery ve onay kutuları ile bir sorgu dize bina

3 Cevap php

Ben sonuç sayfasındaki çeşitli filtre seçenekleri ile arama formunu inşa ediyorum.

Domain.com / Biyokütle / ülke / yaş / tipi /: Bu temel bir arama formu var, sonuçlar gibi bir dostu url göstermek

Filtreler sadece tıklamada, kontrolsüz / kontrol edildikten ne tanımlamak için bir sorgu dizesi ile sayfayı yeniden gerekir onay kutularını vardır. (Tercihen hiçbir güncelleştirmesi her onay kutusu tıklama ile sorgu dizesini yeniden inşa edeceğini, orada teslim edilir).

So, for example, on click of some checkboxes we'd build a query string on the end, eg:domain.com/resuts/england/20-29/female/?scene=hipster&status=single

Herkes bir jquery kaynak veya bu yapılır ödendi yardımcı olabilecek bir kod pasajı beni işaret edebilir?

Çok teşekkürler,

Iain.

3 Cevap

JQuery.get fonksiyonu otomatik olarak bir anahtar-değer çifti geçirdiğinizde sorgu dizesi oluşturma ve bina idare edecek:

http://docs.jquery.com/Ajax/jQuery.get

Sen işaretli onay kutularını için bu seçici kullanabilirsiniz:

$('input:checkbox:checked')

Html gibi görünüyorsa

<input type="checkbox" name="scene" value="hipster" />

Senin gibi bir şey kullanabilirsiniz sanırım

var tmp = [];
$('input:checkbox:checked').each(function(){
    tmp.push($(this).attr('name') + '=' + $(this).val());
});
var filters = tmp.join('&');

Bu sizin için ne arıyor? Eğer onay kutularını tıkladığınızda o kadar iyi seçilmiş değerleri gösterir. Eğer formu göndermek zaman size bir uyarının aynı değeri gösterir

<div id="buffer" style="height:2em; border:1px solid black; margin-bottom:1em"></div>
form action="#" method="get"> input type="checkbox" id="j" name="state" value="state">state
input type="checkbox" name="city" value="city">city
input type="checkbox" name="type" value="type">type
input type="submit" value="click me"> /form> 
    $().ready(function(){
//just a simple demo, you could filter the page by the value of the checkbox    
$('form input:checkbox').bind('click',function(){
    if($(this).attr('checked')==false){
        //remove it from the query string
        var pieces=$('#buffer').text().split('/');

        var $this_val=$(this).val();
        for(var i=0;i<pieces.length-1;i++){
            //console.log($(this).val());
            //console.log(pieces[i]);
            if(pieces[i]==$this_val){
                //remove value from the buffer
                pieces.splice(i);
            }

            $('#buffer').text(pieces.join('/')+'/');
        }
    }else{
        //add the value to the query string
        $('#buffer').append($(this).val()+'/');
    }
}); 

    //on form submit
$('#filterWrapper form').submit(function(){
    var queryString='';
    $.each($('form input:checkbox:checked'),function(){
        queryString+=$(this).val()+'/';
    });
    alert('this will get send over: '+queryString);
    return false;//remove this in production
});

Kırık HTML hakkında Üzgünüz, editör formu etiketleri ve giriş etiketleri gibi değil

etiketler