2
... /busca?tipo%5B%5D=APARTAMENTO%2FAPTO+DUPLEX&area_de=50&area_at=100

Nesta URL tenho 2 tipos de dados:

tipo que é checkbox

  • APARTAMENTO
  • APTO+DUPLEX

area_de que é select

  • 50

area_at que é select

  • 100

Como persistir estes dados após a busca? Como fazer com que eles fiquem checked ou selected para que a busca não seja pedida e que baste dar um outro buscar com um ou outro parâmetro diferente sem ter que remarcar tudo novamente?

Atualização

Caros, o HTML é bem extenso, pois coloco uma parte na pergunta para poder resolver o resto baseado nas resposta, conforme foi solicitado, aqui está o HTML. Este é o HTML de toda a busca.

Código HTML do formulário

<form action="/busca" method="GET" name="frm_busca" id="frm_busca">
    <fieldset class="w255">

        <legend>Tipo</legend>

        <input type="checkbox" name="tipo[]" value="APARTAMENTO/APTO DUPLEX" id="tp1">
        <label for="tp1">Apartamento</label>

        <input type="checkbox" name="tipo[]" value="CASA" id="tp2">
        <label for="tp2">Casa</label>

    </fieldset>
    <fieldset class="w145">

        <legend>Dormitórios</legend>

        <input type="checkbox" name="dorm[]" value="1" id="dorm1">
        <label for="dorm1">1</label>

        <input type="checkbox" name="dorm[]" value="2" id="dorm2">
        <label for="dorm2">2</label>

        <input type="checkbox" name="dorm[]" value="3" id="dorm3">
        <label for="dorm3">3</label>

        <input type="checkbox" name="dorm[]" value="4" id="dorm4">
        <label for="dorm4">4+</label>

    </fieldset>
</form>
4
  • Pode colocar o HTML também?
    – Sergio
    1/11/2014 às 21:58
  • HTML colocado. Obrigado pela presteza. 1/11/2014 às 22:03
  • 4
    Nada impede de você reduzir o HTML ao mínimo essencial para quem lê a pergunta possa responder sem ter que ir a outro site, ter duas janelas abertas para poder ler o problema e ver o código... seu trabalho é facilitar a vida do respondedor... Como criar um exemplo Mínimo, Completo e Verificável
    – brasofilo
    1/11/2014 às 22:06
  • 4
    Cansei de dar dicas. Io sono finito.
    – brasofilo
    1/11/2014 às 22:15

2 Respostas 2

5

Basta por o valor desejado no value dos campos texto, ou opção checked e selected nos checkboxes e selects desejados.

Exemplo para campo texto:

$nome = $_GET['nome'];
$form_nome = htmlentities( $nome );

echo '<input type="text" name="nome" value="'.$form_nome.'">';

Exemplo para select:

$metragem = $_GET['metragem'];

// EXEMPLO DIDATICO APENAS! Na prática pode ser switch ou um loop inteligente
// atrelado a um loop que gere o form, por exemplo, ou if ... elseif, etc:
if( $metragem == '100' ) $form_select100 = ' selected="selected"';
if( $metragem == '200' ) $form_select200 = ' selected="selected"';

echo '<select name ="metragem">';
echo '   <option value="100"'.$form_select100 .'>100m</option>';
echo '   <option value="200"'.$form_select200 .'>200m</option>';
echo '</select>';

Exemplo para checkbox:

$avisar = $_GET['avisar'];

if( $avisar == 'sim' ) $form_avisar = ' checked="checked"';

echo '<input type="checkbox" name="avisar" value="sim"'.$form_avisar.'>Avisar</input>';

Aí basta adaptar ao caso concreto, e aplicar alguma lógica básica para não fazer campo a campo manualmente (aí já é uma questão de programação em geral).

Importante:

  • A versão "longa" vem ao caso apenas para compatibilidade com serialização XML, em HTML5 você pode usar a versão curta tranquilamente:

    Em vez de:                                Pode usar simplesmente:
    <option value="x" selected="selected">    <option value="x" selected>
    <input id="abcde" checked="checked">      <input id="abcde" checked>
    
  • no caso prático, lembre-se de sanitizar os valores textuais com htmlentities() antes de por no value.

  • nos checkboxes lembre-se que você tem que identificar separadamente cada um deles para evitar confusão, visto que checkboxes vazios não são enviados.

  • notar que sempre deixamos um espaço em branco para separar do atributo anterior:

    $ch1 = ' checked="checked"'
            ^
    

Segue mais um exemplo, para uso de arrays. Da mesma forma, exemplo didático, no caso prático pode usar um loop interno, ou mesmo switch. Depende de cada caso.

foreach( $dorm as $item ) {
    // apenas exemplo. use um loop no caso concreto.
    if( $item == '1' ) $ch1 = ' checked="checked"';
    if( $item == '2' ) $ch2 = ' checked="checked"';
    if( $item == '3' ) $ch3 = ' checked="checked"';
    if( $item == '4' ) $ch4 = ' checked="checked"';
}

echo '<input type="checkbox" name="dorm[]" value="1" id="dorm1"'.$ch1.'>';
echo '<input type="checkbox" name="dorm[]" value="2" id="dorm2"'.$ch2.'>';
echo '<input type="checkbox" name="dorm[]" value="3" id="dorm3"'.$ch3.'>';
echo '<input type="checkbox" name="dorm[]" value="4" id="dorm4"'.$ch4.'>';

E aqui uma versão inline da mesma lógica:

echo '<input type="checkbox" name="dorm[]" value="1" '.($item=='1'?' checked':'').'>';
3

Separando o problema em partes:

Se você quer mesmo fazer isto em JavaScript precisa de mais informação nessa query string. Todos os tipos[] que sejam repetidos não dá para saber qual é qual. De qq maneira cá vai uma idea para ajudar:

Para ler a informação da query string:

function getHASH() {
    var hash = window.location.search.slice(1);
    var pares = hash.split('&');
    var chaves = pares.map(function (par) {
        var chave_valor = par.split('=');
        return {
            chave: decodeURI(chave_valor[0]),
            valor: decodeURI(chave_valor[1])
        };
    });
    return chaves;
}

Com essa função vai receber uma array de objetos, no exemplo que colocou dá assim:

"[
    {
        "chave": "tipo[]",
        "valor": "APARTAMENTO%2FAPTO+DUPLEX"
    },
    {
        "chave": "area_de",
        "valor": "50"
    },
    {
        "chave": "area_at",
        "valor": "100"
    }
]"

Para iterar o seu HTML aplicando esses valores:

var pares = getHASH();
pares.forEach(function (par) {
    var chave = Object.keys(par)[0];
    var valor = Object.keys(par)[1];
    $('input[name="' + chave + '"]').filter(function () {
        return ~this.value.indexOf(valor);
    })[0].checked = true;
});

Com este código vai procurar todos os inputs e verificar qual deles tem no seu value o valor que vem da query string e marcá-lo como checked

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .