2012-07-11 17 views
131

¿Es un comportamiento estándar para los navegadores enviar solo los datos del valor de entrada si se comprueba al enviar el formulario?¿<tipo de entrada = "casilla de verificación" /> solo publica datos si está marcada?

Y si no se proporcionan datos de valores, ¿el valor predeterminado siempre está "activado"?

Suponiendo que lo anterior es correcto, ¿este comportamiento es constante en todos los navegadores?

+0

Se 'input type = "checkbox"/>'; 'input type =" checkbox "/>' no funcionará. –

+0

SO está cambiando automáticamente '" ... "' a '" ... "'. En las preguntas, el título es '" ... "'. – Legionar

Respuesta

136

Sí, el comportamiento estándar es el valor sólo se envía si se marca la casilla. Esto normalmente significa que debe tener una forma de recordar qué casillas de verificación está esperando del lado del servidor, ya que no todos los datos provienen del formulario.

El valor predeterminado siempre es "on", esto debe ser coherente en todos los navegadores.

Esto se trata en el W3C HTML 4 recommendation:

casillas de verificación (y de radio botones) son interruptores de encendido/apagado que pueden activarse por el usuario. Un interruptor está "encendido" cuando el atributo marcado del elemento de control está configurado. Cuando se envía un formulario, solo los controles de casilla de verificación "on" pueden tener éxito.

+9

Desafortunadamente, eso es doloroso, solo las casillas marcadas se envían al servidor, no las desmarcadas. Si sabe de antemano qué casillas de verificación están en la página, entonces no es un problema en el script del lado del servidor para administrarlas. El problema es cuando no lo sabes de antemano: casillas de verificación creadas dinámicamente en la página dependiendo de la lógica de negocios. Luego debe hacer trucos y usar campos de entrada hiden paralelos para esas casillas de verificación y cumplirlas con JavaScript. – sbrbot

+0

La clave para crear un validador consistente con "controles permitidos no permitidos (es decir, type =" checkbox ") es designar estos controles de formulario como * transient *. Cuando no son exitosos, modifique dinámicamente su sanitizer y validador en consecuencia. –

7

¿Es el comportamiento estándar de los navegadores enviar solo la entrada de entrada datos de valor si se comprueba al enviar el formulario?

Sí, porque de lo contrario no habría una forma sólida de determinar si la casilla estaba realmente marcada o no (si cambiara el valor, podría existir el caso si el valor deseado fuera el mismo como el que se cambió a).

Y si no se proporcionan datos de valores, ¿el valor predeterminado siempre está "activado"?

Otras respuestas confirman que "on" es el valor predeterminado. Sin embargo, si usted no está interesado en el valor, sólo tiene que utilizar:

if (isset($_POST['the_checkbox'])){ 
    // name="the_checkbox" is checked 
} 
43

En HTML, cada elemento <input /> está asociado a un único nombre y par de valores. Este par se envía en la solicitud posterior (en este caso, un cuerpo de solicitud POST) solo si el <input /> es "exitoso".

Así que si usted tiene estas entradas en su <form> DOM:

<input type="text"  name="one" value="foo"      /> 
<input type="text"  name="two" value="bar" disabled="disabled" /> 
<input type="text"  name="three" value="first"      /> 
<input type="text"  name="three" value="second"      /> 

<input type="checkbox" name="four" value="baz"      /> 
<input type="checkbox" name="five" value="baz" checked="checked" /> 
<input type="checkbox" name="six" value="qux" checked="checked" disabled="disabled" /> 
<input type="checkbox" name=""  value="seven" checked="checked" /> 

<input type="radio" name="eight" value="corge"      /> 
<input type="radio" name="eight" value="grault" checked="checked" /> 
<input type="radio" name="eight" value="garply"      /> 

generará los siguientes pares de nombres + de valor que se someterán al servidor:

one=foo 
three=first 
three=second 
five=baz 
eight=grault 

Tenga en cuenta que:

  • two y six se excluyeron porque tenían el disabled conjunto de atributos.
  • three se envió dos veces porque tenía dos entradas válidas con el mismo nombre.
  • four no se envió porque es un checkbox que no era checked
  • six no fue enviado a pesar de ser checked porque el atributo disabled tiene una prioridad más alta.
  • seven no tiene un atributo name="" enviado, por lo que no se envía.

Con respecto a su pregunta: puede ver que una casilla que no está marcada no tendrá su par de nombre + valor enviado al servidor, pero otras entradas que comparten el mismo nombre se enviarán con él.

Marcos como el trabajo de ASP.NET MVC alrededor de esto (a escondidas) emparejando cada checkbox de entrada con una entrada de hidden en el HTML representado, así:

@Html.CheckBoxFor(m => m.SomeBooleanProperty) 

Renders:

<input type="checkbox" name="SomeBooleanProperty" value="true" /> 
<input type="hidden" name="SomeBooleanProperty" value="false" /> 

Si el usuario no marca la casilla, luego se enviará al servidor:

SomeBooleanProperty=false 

Si el usuario selecciona la casilla, luego ambos se enviarán:

SomeBooleanProperty=true 
SomeBooleanProperty=false 

Sin embargo, el servidor ignorará la versión =false porque ve la versión =true, y por lo que si no ve =true se puede determinar que la casilla de verificación se procesó y el usuario no la verificó, a diferencia de las entradas SomeBooleanProperty que no se procesaron.

+0

si tiene varios campos, como con el cuadro de texto oculto adicional, el servidor recibirá una matriz de valores. – Salami

+0

Sólo recibe una matriz si usa '[]' al final del nombre de la entrada, el comportamiento predeterminado es solo envíe el último elemento con ese nombre, de modo que mientras la entrada oculta esté antes de la casilla de verificación, funcionará. – beeglebug

+0

Al tener dos campos con el mismo nombre (campo oculto + campo de casilla de verificación) y marcar la casilla, el valor de la publicación es una cadena de valores separados por comas, es decir, algo así como "0,1" –

7

De HTML 4 spec, que debe ser consistente a través de casi todos los navegadores:

(botones de radio y)

http://www.w3.org/TR/html401/interact/forms.html#checkbox

Las casillas de verificación son interruptores de encendido/apagado que pueden ser activadas o por el usuario. Un interruptor está "encendido" cuando el atributo marcado del elemento de control está configurado. Cuando se envía un formulario, solo los controles de casilla de verificación "on" pueden tener éxito.

éxito se define como sigue:

Un control exitoso es "válido" para su presentación. Cada control exitoso tiene su nombre de control emparejado con su valor actual como parte de el conjunto de datos de formulario enviado. Un control exitoso debe definirse dentro de un elemento FORM y debe tener un nombre de control.

12

Si la casilla de verificación no está marcada, no contribuye a los datos enviados al enviar el formulario.

sección HTML5 4.10.22.4 Constructing the form data set describe la forma en que se construye formulario de datos:

Si se cumple cualquiera de las condiciones siguientes, a continuación, omitir estos pasos secundarios para este elemento: [...]

El elemento de campo es un elemento de entrada cuyo tipo atributo está en el estado de casilla de verificación y cuya verificación es falsa.

y el valor por defecto valorados on se especifica si value falta:

De lo contrario, si el elemento de campo es un elemento de entrada cuyo atributo tipo está en el estado de casilla de verificación o el estado del botón de radio, a continuación, ejecutar estos siguientes subepsos anidados:

Si el elemento de campo tiene un atributo de valor especificado, entonces let value is the value of that attribute; de lo contrario, permita que value sea la cadena "on".

Por lo tanto, las casillas no marcadas se saltan durante la construcción de los datos del formulario.

Se requiere un comportamiento similar en HTML4. Es razonable esperar este comportamiento de todos los navegadores compatibles.

0

Al igual que la variante ASP.NET, excepto que se coloca la entrada oculta con el mismo nombre antes de la casilla de verificación real (del mismo nombre). Solo se enviarán los últimos valores. De esta forma, si se marca una casilla, se envía su nombre y valor "on", mientras que si no está marcada, se enviará el nombre de la entrada oculta correspondiente y el valor que desee darle. Al final obtendrá la matriz $ _POST para leer, con todos los elementos marcados y no marcados, valores "on" y "false", sin duplicados. Fácil de procesar en PHP.

8

Las casillas de verificación están publicando el valor 'on' si y solo si la casilla de verificación está marcada. Insted de la captura de valor de casilla puede utilizar entradas ocultas

JS:

var chk = $('input[type="checkbox"]'); 
    chk.each(function(){ 
     var v = $(this).attr('checked') == 'checked'?1:0; 
     $(this).after('<input type="hidden" name="'+$(this).attr('rel')+'" value="'+v+'" />'); 
    }); 

chk.change(function(){ 
     var v = $(this).is(':checked')?1:0; 
     $(this).next('input[type="hidden"]').val(v); 
    }); 

HTML:

<label>Active</label><input rel="active" type="checkbox" /> 
-2

he resuelto el problema con este código:

formulario HTML

<input type="checkbox" id="is-business" name="is-business" value="off" onclick="changeValueCheckbox(this)" > 
<label for="is-business">Soy empresa</label> 

y la función de JavaScript por el cambio de la forma del valor casilla de verificación:

//change value of checkbox element 
function changeValueCheckbox(element){ 
    if(element.checked){ 
    element.value='on'; 
    }else{ 
    element.value='off'; 
    } 
} 

y el servidor comprueba si el mensaje de datos es "on" o "off". Solía ​​java playframework

 final Map<String, String[]> data = request().body().asFormUrlEncoded(); 

     if (data.get("is-business")[0].equals('on')) { 
      login.setType(new MasterValue(Login.BUSINESS_TYPE)); 
     } else { 
      login.setType(new MasterValue(Login.USER_TYPE)); 
     } 
0

Tener el mismo problema con casillas sin marcar que no se envían en formularios presentar, salí con una otra solución que reflejar los elementos de casillas de verificación.

Conseguir todas las casillas sin marcar con

var checkboxQueryString; 

$form.find ("input[type=\"checkbox\"]:not(\":checked\")").each(function(i, e) { 
    checkboxQueryString += "&" + $(e).attr("name") + "=N" 
}); 
Cuestiones relacionadas