Clear select and input fields

Question

I have a form, and when I click "Redo Search" I want it to clear all fields.

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>

used the type="reset", But he cleans the inputs. in select, I would like it to leave selected the first <option>, Is there a way? When the guy tells him to redo the search he cleans the input and switch to the first option giving the impression of a new search.

Answer 1

Create a function to clear your fields.

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;
        }
    }
}

An example of the use would be thus.

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

This approach is good for cases where you only want to clear part of the form. You just need to pass the id from some container to clear all the fields inside it.

<form>
    <!-- conteudo -->
    <div id="itens">
        <!-- conteudo -->
        <button type="button" onclick="resetForm('itens');">Limpar dados</button>
    </div>
</form>

Answer 2

Just leave him marked with selected

<select class="estados" name="estado">
        <option value="" selected>UF</option>
        <option value="bla"></option>
    </select>