-2

Tenho um form, e quando eu clicar em "Refazer Busca" eu quero que ele limpe todos os campos.

HTML?

<form action="" class="">
    <ul class="dropdown">
        <li>
            <input type="checkbox" <?php echo (in_array($dadosSegmentos->idAdicional, $_GET['segmentos'])) ? 'checked' : ''; ?> id="<?php echo $dadosSegmentos->descricao; ?>" name="segmentos[]" value="<?php echo $dadosSegmentos->idAdicional; ?>" />
            <label for="<?php echo $dadosSegmentos->descricao; ?>"><?php echo $dadosSegmentos->descricao; ?></label>
        </li>
    </ul>
    <select class="estados" name="estado">
        <option value="">UF</option>
        <option value="">UF1</option>
        <option value="">UF2</option>
        <option value="">UF3</option>
        <option value="bla"></option>
    </select>
    <input class="formInputBusca grid_150" placeholder="Informe a cidade" value="<?php echo ($_GET['cidade']!='' && $_GET['cidade']!='Informe a cidade') ? $_GET['cidade'] : 'Informe a cidade'; ?>" name="cidade" type="text" />
    <input type="reset" class="buscaAvancadaRefazer f-left margin-top-20" value="Refazer Busca" />
    <input type="submit" value="" class="buscaAvancadaBt f-right margin-top-20 cp" />
</form>

usei o type="reset", mas ele limpa os inputs. no select, eu gostaria que ele deixasse selecionado o primeiro <option>, tem como? quando o cara manda refazer a busca ele limpa o input e muda pro primeiro option dando a impressão de nova busca.

6
  • O que está acontecendo quando você limpa? Pelo teste que fiz com o seu código, a opção UF, que é a primeira, está sendo selecionada. Não é isso? 27/01/2015 às 11:31
  • 1
    Fiz o teste aqui e está tudo ok!
    – Marconi
    27/01/2015 às 11:32
  • Então, vou atualizar a resposta, tem mais options, eheh, me enganei, ele ta puxando pelo php aqui 27/01/2015 às 11:33
  • eu quero que ele volta ao primeiro valor mesmo depois que o usuário tenha selecionado outro 27/01/2015 às 11:34
  • @FelipeStoker tem algum navegador especifico, continua funcionando o código.
    – Marconi
    27/01/2015 às 11:35

2 Respostas 2

3

Crie uma função para limpar seus campos.

function resetForm(idForm) {
    // seleciona o form a ser resetado
    var form = document.getElementById(idForm);

    // limpa todos os inputs do tipo text, password, etc...
    var inputs = form.querySelectAll('input');
    for (var i = 0; i < inputs.length; i++) {
        if (inputs[i].type != 'checkbox' && inputs[i].type != 'radio') {
            inputs[i].value = '';
        }
    }

    // limpa todas as textareas
    var textarea = form.querySelectAll('textarea');
    for (var i = 0; i < textarea.length; i++) {
        textarea[i].value = '';
    }

    // desmarca todos os checkboxes e radios
    inputs = form.querySelectAll('input[type=checkbox], input[type=radio]');
    for (i = 0; i < inputs.length; i++) {
        inputs[i].checked = false;
    }

    // seleciona a primeira opcao de todos os selects
    var selects = form.querySelectAll('select');
    for (i = 0; i < selects.length; i++) {
        var options = selects[i].querySelectorAll('option');
        if (options.length > 0) {
            selects[i].value = options[0].value;
        }
    }
}

Um exemplo da utilização seria assim.

<form id="meuForm">
    <!-- conteudo -->
    <button type="button" onclick="resetForm('meuForm');">Limpar formulário</button>
</form>

Essa abordagem é boa para casos em que você queira limpar apenas parte do formulário. Você só precisa passar o id de algum container para limpar todos os campos dentro dele.

<form>
    <!-- conteudo -->
    <div id="itens">
        <!-- conteudo -->
        <button type="button" onclick="resetForm('itens');">Limpar dados</button>
    </div>
</form>
3
  • JS? Uma explicação sobre o que está a fazer seria bom!
    – Jorge B.
    27/01/2015 às 11:44
  • Não tem nem necessidade o código, pois o codigo dela já funciona.
    – Marconi
    27/01/2015 às 11:49
  • 1
    @Marconi de qualquer jeito convém dar uma explicação ;)
    – Jorge B.
    27/01/2015 às 15:23
2

É só você deixar ele marcado com selected

<select class="estados" name="estado">
        <option value="" selected>UF</option>
        <option value="bla"></option>
    </select>
1
  • 1
    O codigo dele já funciona!
    – Marconi
    27/01/2015 às 11:36

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