2011-05-08 9 views
19

Tengo un formulario simple con cuatro entradas. Cuando envío mi formulario, quiero usar el método GET http.¿Cómo puedo eliminar campos vacíos de mi formulario en la cadena de consulta?

Por ejemplo:

aaa : foo 
bbb : ____ 
ccc : bar 
ddd : ____ 

Quiero tener esta cadena consulta:

/?aaa=foo&ccc=bar 

El problema es que tengo esta cadena de consulta:

/?aaa=foo&bbb=&ccc=bar&ddd= 

¿Cómo puede Elimino campos vacíos de mi formulario en la cadena de consulta?

Gracias.

+1

¿Por qué querrías hacer esto? – abaumg

+17

Quiero las URL más claras posibles. –

Respuesta

13

Se puede usar de jQuery presentar función para validar/alterar su forma:

<form method="get" id="form1"> 
    <input type="text" name="aaa" id="aaa" /> 
    <input type="text" name="bbb" id="bbb" /> 
    <input type="submit" value="Go" /> 
</form> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#form1").submit(function() { 
      if($("#bbb").val()=="") { 
        $("#bbb").remove(); 
      } 
     }); 
    }); 
</script> 
+1

Solo un seguimiento de esto, ya que su viejo y Google vivirán para siempre. En general, es mejor para el usuario usar $ ("# bbb"). Attr ("deshabilitado", "deshabilitado"); – Chad

+0

¿Podría ser más específico? ¿Está esto en la declaración if o en lugar del remove? – rrauenza

+0

ah, encontró más ejemplos: http: // stackoverflow.com/questions/17829379/form-get-method-prevent-empty-fields-from-submittion-in-query-string – rrauenza

4

Me encanta la idea dada por RaphDG

Pero he modificado el código un poco. Solo uso la propiedad deshabilitada en lugar de eliminar el campo. Aquí está el código cambiado:

<form method="get" id="form1"> 
    <input type="text" name="aaa" id="aaa" /> 
    <input type="text" name="bbb" id="bbb" /> 
    <input type="submit" value="Go" /> 
</form> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#form1").submit(function() { 
      if($("#bbb").val()=="") { 
        $("#bbb").prop('disabled', true); 
      } 
     }); 
    }); 
</script> 

Gracias una vez más por la idea RaphDG (y)

+2

¿Cómo puedo modificar esto para eliminar TODAS las claves sin valores, en lugar de solo una clave específica como #bbb? –

4

Las soluciones actuales dependen del cliente que se ejecuta Javascript/jQuery - que no puede ser garantizada. Otra opción es usar una regla de reescritura. En un servidor Apache, he utilizado lo siguiente para eliminar los valores $ _GET vacíos de los envíos de formularios;

RewriteCond %{REQUEST_URI} \/formpage\/? 
RewriteCond %{QUERY_STRING} ^(.*)(&|\?)[a-z-_]+=(?=&|$)(.*)$ [NC] 
RewriteRule .* \/formpage?%1%2 [R,L,NE] 

... lo que convertiría esto ...;

http://www.yoursite.com/formpage?search=staff&year=&firstname=&surname=smith&area=

... en esto;

http://www.yoursite.com/formpage?search=staff&surname=smith

una explicación rápida:

  1. RewriteCond %{REQUEST_URI} \/formpage\/? es un medio para limitar el alcance de su expresión regular para un sub-página en particular de la dirección de su sitio (por ejemplo, http://www.yoursite.com/formpage). No es estrictamente obligatorio, pero es posible que desee aplicar la expresión solo a la página en la que aparece el formulario. Esta es una forma de lograr esto.

  2. RewriteCond %{QUERY_STRING} ^(.*)(&|\?)[a-z-_]+=(?=&|$)(.*)$ [NC] es una segunda condición, que luego coincide con la cadena de consulta (es decir, cualquier cosa que aparezca (o incluya) el signo de interrogación, como ?firstname=sam$surname=smith).Vamos a descomponerlo;

    • ^(.*) - El símbolo ^ significa que este es el comienzo de la cadena de consulta, y el período . está diciendo cualquier carácter. El asterisco * es un modificador contra el comodín de período, indicando que se debe incluir un número cualquiera en el alcance.
    • (&|\?)[a-z-_]+=(?=&|$) - Esta es la parte más interesante (si te gusta este tipo de cosas ...). Esto encuentra su cadena de consulta vacía. Entre el primer paréntesis, indicamos que la cadena comienza con un signo y O un signo de interrogación literal (la barra diagonal inversa hace que el siguiente carácter sea literal, en este caso; de lo contrario, el signo de interrogación tiene un significado diferente). Entre los corchetes, decimos que coincide con cualquier carácter de a-z, O guión - O subrayado _, e inmediatamente después de eso, el símbolo más + indica que debemos hacer coincidir cualquiera de esos caracteres precedentes 1 o más veces. El signo igual = es exactamente lo que parece (el equivalente entre el nombre de su cadena de consulta y su valor). Finalmente, entre el siguiente paréntesis, tenemos una cláusula de anticipación ?= que establece que el siguiente carácter DEBE SER un símbolo comercial O al final de la línea, como lo indica el signo de dólar $. La intención aquí es que su cadena de consulta solo se considerará una coincidencia si va seguida por el inicio de otra cadena de consulta o al final de la línea sin incluyendo un valor.
    • Los bits finales (.*)$ [NC] coinciden con cualquier contenido que sigue a una cadena de consulta vacía, y la cláusula [NC] significa que es CISe INDISPENSABLE.
  3. RewriteRule .* \/formpage?%1%2 [R,L,NE] es donde le decimos a mod_rewrite qué hacer con nuestro contenido coincidente. Básicamente reescribiendo la URL a su nombre de página siguió toda la cadena de consulta excepto las cadenas vacías coincidentes. Debido a que esto recorrerá su URL hasta que deje de encontrar una coincidencia, no importa si tiene un único valor vacío o 50. Debe detectarlos todos y dejar solo los parámetros que se enviaron con valores. La cláusula [NE] en la regla de reescritura significa que los caracteres tendrán no con codificación URL, lo que puede o no ser útil para usted si espera caracteres especiales (pero obviamente necesita desinfectar sus datos $ _GET cuando lo está procesando) , lo cual deberías estar haciendo de todos modos).

Nuevamente, esto es obviamente una solución de Apache que utiliza mod_rewrite. Si está ejecutando en otro sistema operativo (como un servidor de Windows), esto tendrá que ajustarse en consecuencia.

Espero que sea útil para alguien.

0

con jQuery:

$('form[method="get"]').submit(function(){ 
    $(this).find(':input').each(function() { 
     var inp = $(this); 
     if (!inp.val()) { 
      inp.remove(); 
     } 
    }); 
}); 

Lo utilizo para eliminar todos los parámetros vacíos de todo obtener formularios en mi sitio. El pseudo selector de entrada cubre todas las entradas, áreas de texto, selecciones y botones.

+0

Esto elimina el elemento DOM real, ¿no? eso es un poco al revés. – AlxVallejo

+0

La eliminación real también podría ser inp.prop ('disabled', true); como se sugiere en otra parte de esta página y probablemente sea mejor. Mi solución difiere de otras aquí en que cubre todos los parámetros vacíos para todos los formularios GET. – martti

Cuestiones relacionadas