Clear select and input fields [closed]

Navigation
-3

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>

I used type="reset" , but it clears the inputs. in select, I would like it to let selected the first <option> , how? when the guy has to redo the search he clears the input and changes to the first option giving the impression of a new search.

    
asked by anonymous 27.01.2015 / 12:18

2 answers

1

Create a function to clean 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 usage would be like this. 

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

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

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

It's only you to leave it marked with selected 

<select class="estados" name="estado">
        <option value="" selected>UF</option>
        <option value="bla"></option>
    </select>
    
27.01.2015 / 12:34
Spreadsheet download using the PHPExcel class TUPLA TABLE RELATIONSHIP TABLE 1: 1 [closed]