Por ejemplo tengo un formulario como este:

<form method='post' action='someaction.php' name='myform'>

<input type='text' name='text1'>
<input type='text' name='text2'>

<input type='checkbox' name="check1">Check Me

<textarea rows="2" cols="20" name='textarea1'></textarea>

<select name='select1'>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

<input type='reset' value='Reset' name='reset'>
<input type='submit' value='Submit' name='submit'>

</form>

Cuando yo presione Reset se vacía todos los campos. Pero si me rellenar algunos campos con la dirección URL de parámetros y, a continuación, presione Reset, sólo se vacía campos que entro después de la forma de recarga.

¿Cómo puedo vaciar todos los campos si algunos de los campos se rellenan en el momento de la carga del formulario.

Pregúntese si usted realmente necesita un botón de reset. En general son considerados inútiles. useit.com/alertbox/20000416.html stillnetstudios.com/no-more-reset-buttons-please
Ver la aceptación respuesta aquí para la solución usando jQuery
Stevenson-Leggett: he leído el artículo y es un derecho que el botón de reset no se utiliza hoy en día. Puede ser que no es utilizable cuando el llenado del formulario de registro. Pero cuando se Trabaja en un formulario de búsqueda que muestran los registros en forma de evento de cambio por debajo de la forma, entonces creo reset/clear es útil.
Cuando un formulario está incrustado en un modal/diálogo, desea la forma de volver a configurar cada vez que el modal/abre el cuadro de diálogo.

OriginalEl autor Student | 2011-05-17

9 Comentarios

  1. 20

    Como otros señalaron, creo que se debe reconsiderar la necesidad de en blanco el formulario.
    Pero, si usted realmente necesita esa funcionalidad, esta es una manera de hacerlo:

    Llanura Javascript:

    function resetForm(form) {
        //clearing inputs
        var inputs = form.getElementsByTagName('input');
        for (var i = 0; i<inputs.length; i++) {
            switch (inputs[i].type) {
                //case 'hidden':
                case 'text':
                    inputs[i].value = '';
                    break;
                case 'radio':
                case 'checkbox':
                    inputs[i].checked = false;   
            }
        }
    
        //clearing selects
        var selects = form.getElementsByTagName('select');
        for (var i = 0; i<selects.length; i++)
            selects[i].selectedIndex = 0;
    
        //clearing textarea
        var text= form.getElementsByTagName('textarea');
        for (var i = 0; i<text.length; i++)
            text[i].innerHTML= '';
    
        return false;
    }

    Nota que me comentó el caso en el que puedo borrar la hidden entradas. La mayoría de las veces, esto no es necesario.

    Para que esto funcione, es necesario llamar a la función desde el onclick controlador de un botón (o de alguna otra manera), por ejemplo, como este:

    <input type='reset' value='Reset' name='reset' onclick="return resetForm(this.form);">

    Usted puede probar todo aquí en jsFiddle.

    Si el uso de jQuery en su proyecto, usted puede hacer esto con mucho menos código (y no hay necesidad de cambiar el HTML):

    jQuery(function($) { //onDomReady
    
        //reset handler that clears the form
        $('form[name="myform"] input:reset').click(function () {
            $('form[name="myform"]')
                .find(':radio, :checkbox').removeAttr('checked').end()
                .find('textarea, :text, select').val('')
    
            return false;
        });
    
    });

    También, tenga en cuenta que no tengo claro el valores ocultos en las entradas, casillas de verificación y botones de radio.

    Jugar con este aquí.

    Probado y no borrar los textareas. No sabemos qué va mal?
    Funciona, compruebe el violín: jsfiddle.net/fmTDY ¿por Qué no trabajar para su caso particular, no sé.
    Esto funcionó para mí, si he tenido que cambiar «.getElementsById» con «el documento.getElementById(‘myForm’).getElementsById». No es la cosa más linda del mundo, y no sé por qué . . . pero funciona perfecto.
    Esto no funciona. El área de texto en el que el violín no es clara. Estoy usando Chrome 63.0.3239.132.

    OriginalEl autor Marko Dumic

  2. 7

    En jquery simplemente puede utilizar,

    $("#yourFormId").trigger('reset'); 

    OriginalEl autor tutesFree

  3. 6

    Tendrá que borrar todas ellas a través de javascript (o aclararlo lado del servidor).

    La reset botón sólo se restablecerá elementos de formulario a su valor inicial – si se trataba de un valor específico, que es lo que se restablecerá a.

    Significa que tengo que borrar cada campo, uno por uno. ¿Hay algún camino más corto para borrar todos los campos con una función JS/Declaración de que puedo usar con cada forma? He formulario con campos de más de 50.
    Usted puede obtener todos los elementos de entrada y clara de los valores en un bucle. Sugiero invertir algo de tiempo en el aprendizaje jQuery.
    Un bucle en theForm.elements, comprobar si se trata de un conjunto de campos, seleccione, grupo de radio, casillas de verificación o algo más y luego actuar en consecuencia.

    OriginalEl autor Oded

  4. 1

    Si estás usando jQuery, el código es mucho más sencillo:

    $('#my-form').not(':button, :submit, :reset, :hidden').val('').removeAttr('checked').removeAttr('selected');

    También se puede quitar el :oculto de la .no selector si desea borrar campos ocultos así.

    OriginalEl autor Francis Lewis

  5. 1

    La forma más fácil de borrar un formulario es mediante el uso de la etiqueta HTML

    <input type="reset" value="Reset">

    Ejemplo:

    <form>
      <table>
        <tr>
          <td>Name</td>
          <td><input type="text" name="name"></td>
        </tr>
        <tr>
          <td>Reset</td>
          <td><input type="reset" value="Reset"></td>
        </tr>
      </table>
    </form>
    el único problema con el comportamiento de restablecimiento es que si el formulario se ha rellenado previamente se restablecerá el valor el valor inicial que se fijó. Así que si usted está automáticamente llenar algunos campos de un error o algo como eso, entonces esto no comportamiento como que me espero a la desgracia.

    OriginalEl autor ociugi

  6. 0

    He resumido algunas de las sugerencias que el uso de jQuery para dar una solución más completa a la pregunta:

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8" />
            <title>Demo Forms</title>
            <script src="http://code.jquery.com/jquery-1.11.1.js"></script>
        </head>
        <body>
    
            <form method='post' action='someaction.php' name='myform'>
    
                <input type='text' name='text1'>
                <input type='text' name='text2' value='preset value'>
    
                <input type='checkbox' name="check1">Check Me
    
                <textarea rows="2" cols="20" name='textarea1'></textarea>
    
                <select name='select1'>
                  <option value="volvo">Volvo</option>
                  <option value="saab">Saab</option>
                  <option value="mercedes">Mercedes</option>
                  <option value="audi">Audi</option>
                </select>
    
                <input type='button' value='Reset' name='reset' onclick="return clearForm(this.form);">
                <input type='submit' value='Submit' name='submit'>
    
                <script>
                    function clearForm(form) {
                        var $f = $(form);
                        var $f = $f.find(':input').not(':button, :submit, :reset, :hidden');
                        $f.val('').attr('value','').removeAttr('checked').removeAttr('selected');
                    }
                </script>
            </form>
        </body>
    </html>

    Nota que he añadido la inclusión de jquery lib en la sección de la cabeza y añadió un onclick controlador para el botón de Reset. Por último, he añadido el código javascript basado en la retroalimentación de algunas otras respuestas aquí.

    También he añadido una valor de preselección a un campo de texto. El val('') función no está claro ese campo, es por eso que también he añadido attr('value','') a la última línea del script para claro que tales valores predeterminados así.

    OriginalEl autor Thomas Tempelmann

  7. 0

    Puede hacer algo similar a esto en JS y llamarlo desde onclick dentro de su botón:

    function submit() {
      $('#fieldIdOne').val('');
      $('#fieldIdTwo').val('');
    }

    Y, a continuación, en el archivo HTML:

    <button id="submit" onclick="submit(); return false">SIGN UP</button>

    Si quieres pasar a utilizar esta solución con base avanzada, que en realidad no enviar nada a la base de datos a menos que se agregue return false derecha después de la llamada.

    OriginalEl autor mur7ay

  8. -2

    Me encontré con esta pregunta y han utilizado un <a> para facilitar la limpieza de un formulario por necesidad de recargar la página. Es fácil para un estilo <a> elemento para que aparezca como un botón.

    por ejemplo,

    <a href="?" class="btn btn-default">Clear</a>

    Utilizando ? para el atributo href, el <a> volverá a cargar la página desde el servidor sin necesidad de enviarlo.

    Prefiero soluciones, que no dependen de JavaScript así que espero que esto sea de alguna utilidad para alguien.

    OriginalEl autor John Askew

  9. -3

    Con JavaScript dar la forma de un ID de «myform’:

    documento.getElementById(‘myform’).reset();

    Esto no va a resolver el problema. Si el formulario se carga con pre-pobladas valores, la reset simplemente restablecer el formulario a esos valores.
    No, que todavía va a restablecer, no está claro.

    OriginalEl autor Raoul

Dejar respuesta

Please enter your comment!
Please enter your name here