Eliminar valores vacíos de los parámetros del formulario antes de enviarlo

Question

Tengo un javascript que capta cambios en un formulario y luego llama a la función de envío regular del formulario. El formulario es un formulario GET (para una búsqueda) y tengo muchos atributos vacíos que aparecen en los parámetros. Lo que me gustaría hacer es eliminar todos los atributos vacíos antes de enviar, para obtener una URL más limpio: por ejemplo, si alguien cambia el 'sujeto' seleccionar a 'Inglés' i quieren que su URL búsqueda sea

http://localhost:3000/quizzes?subject=English 

en lugar de

http://localhost:3000/quizzes?term=&subject=English&topic=&age_group_id=&difficulty_id=&made_by=&order=&style= 

como lo está actualmente. Esto es solo con el propósito de tener una URL más limpia y más significativa para vincular y para los marcadores de las personas, etc. Por lo tanto, lo que necesito es algo en esta línea, pero esto no es correcto ya que no estoy editando la forma real sino un objeto JS hecha de parametros del formulario:

quizSearchForm = jQuery("#searchForm"); 
    formParams = quizSearchForm.serializeArray(); 
    //remove any empty fields from the form params before submitting, for a cleaner url 
    //this won't work as we're not changing the form, just an object made from it. 
    for (i in formParams) { 
    if (formParams[i] === null || formParams[i] === "") { 
     delete formParams[i]; 
    } 
    } 
    //submit the form 

creo que estoy cerca con esto, pero me falta el paso de la forma de editar los atributos de la forma real en lugar de hacer otro objeto y editar eso.

agradecido por cualquier consejo - max

EDITAR - SOLUCIONADO - gracias a las muchas personas que han publicado sobre este. Esto es lo que tengo, que parece funcionar perfectamente.

function submitSearchForm(){ 
    quizSearchForm = jQuery("#searchForm"); 
    //disable empty fields so they don't clutter up the url 
    quizSearchForm.find(':input[value=""]').attr('disabled', true); 
    quizSearchForm.submit(); 
} 

Answer 1

Las entradas con el atributo disabled establecido en true no se enviarán con el formulario. Así, en una línea de jQuery:

$(':input[value=""]').attr('disabled', true); 

Answer 2

No puede hacerlo de esa manera si se llama el método de la forma submit; que enviará el formulario completo, no el conjunto que has creado jQuery para ti.

Lo que puede hacer es deshabilitar los campos de formulario que están vacíos antes de enviar el formulario; Los campos desactivados se omiten del envío de formularios. Así que recorra los elementos del formulario y, para cada uno que esté vacío, desactívelo y luego llame al método submit en el formulario. (Si su objetivo es otra ventana, entonces querrá volver y volver a habilitar los campos. Si su objetivo es la ventana actual, no importa, la página se reemplazará de todos modos)

Answer 3

Bien una cosa que podría hacer sería desactivar las entradas vacías antes de llamar "serializeArray"

$('#searchForm').find('input, textarea, select').each(function(_, inp) { 
    if ($(inp).val() === '' || $(inp).val() === null) 
    inp.disabled = true; 
    } 
}); 

La rutina "serializeArray()" no incluirá los de sus resultados. Ahora, es posible que deba volver atrás y volver a habilitarlos si la publicación del formulario no va a generar una página completamente actualizada.

Answer 4

$('form#searchForm').submit(function() { 
    $(':input', this).each(function() { 
     this.disabled = !($(this).val()); 
    }); 
}); 

Answer 5

Su problema me ayudó a entender mi situación, que es un poco diferente - así que tal vez alguien más puede beneficiarse de ella. En lugar de enviar directamente un formulario, necesitaba evitar que los elementos de formulario vacíos se recopilaran en un conjunto serializado que es y luego publicado a través de AJAX.

En mi caso, yo simplemente necesitaba para recorrer los elementos del formulario y desactivar todos los que estaban vacíos y, a continuación, recoger las sobras en una matriz de este modo:

// Loop through empty fields and disable them to prevent inclusion in array 
$('#OptionB input, select').each(function(){ 
    if($(this).val()==''){ 
     $(this).attr('disabled', true); 
    } 
}); 

// Collect active fields into array to submit 
var updateData = $('#OptionB input, select').serializeArray(); 

Answer 6

Otro enfoque siempre recomiendo es hacer que en el lado del servidor, por lo que son capaces de:

1. Validar los datos de entrada correctamente
valores predeterminados
2. Set
3. Cambiar los valores de entrada si n ecesarios
4. tener una URL limpia o una URL amigable como "/ concursos/Inglés/nivel 1 /"

lo contrario, tendrá que lidiar con la entrada de texto, seleccionar, la radio, etc ...

Answer 7

Tal vez algunas de las soluciones propuestas funcionaron en el momento en que se hizo la pregunta (marzo de 2010), pero hoy, agosto de 2014, la solución de inhabilitar las entradas vacías simplemente no está funcionando. Los campos desactivados también se envían en mi Google Chrome. Sin embargo, traté de eliminar el atributo "nombre" y funcionó bien.

$('form').submit(function(){ 
    $(this).find('input[name], select[name]').each(function(){ 
     if (!$(this).val()){ 
      $(this).removeAttr('name'); 
     } 
    }); 
}); 

Actualización: Ok, probablemente la razón porque la desactivación campos no trabajados a mí, no es que algo cambiado desde 2010. Pero aún no funciona en mi Google Chrome. No sé, tal vez solo esté en la versión de Linux. De todos modos, creo que eliminar el nombre attr es mejor ya que, a pesar de la política que adopta el navegador sobre los campos deshabilitados, no hay forma de enviar los parámetros si falta el nombre attr. Otra ventaja es que, por lo general, los campos que inhabilitan implican algunos cambios de estilo, y no es agradable ver un cambio de estilo en el formulario un segundo antes de que finalmente se envíe el formulario. También hay un inconveniente, como mencionó Max Williams en los comentarios, ya que la solución remove name attr no se puede alternar. Aquí es una manera de evitar este problema:

$('form').submit(function(){ 
    $(this).find('input[name], select[name]').each(function(){ 
     if (!$(this).val()){ 
      $(this).data('name', $(this).attr('name')); 
      $(this).removeAttr('name'); 
     } 
    }); 
}); 

function recoverNames(){ 
    $(this).find('input[name], select[name]').each(function(){ 
     if ($(this).data('name')){ 
      $(this).attr('name', $(this).data('name')); 
     } 
    }); 
} 

Sin embargo, creo que este no es un caso muy común, ya que estamos presentando la forma lo que se supone que no hay necesidad de recuperar los nombres de attrs que faltan.

Answer 8

O serializar, clave vacío = pares de valores claros con expresiones regulares y llame window.location:

$("#form").submit(function(e){ 
    e.preventDefault(); 
    //convert form to query string, i.e. a=1&b=&c=, then cleanup with regex 
    var q = $(this).serialize().replace(/&?[\w\-\d_]+=&|&?[\w\-\d_]+=$/gi,""), 
    url = this.getAttribute('action')+ (q.length > 0 ? "?"+q : ""); 
    window.location.href = url; 
});