Entradas de formulário desativadas não aparecem na solicitação

339

Tenho algumas entradas desativadas em um formulário e quero enviá-las para um servidor, mas o Chrome as exclui da solicitação.

Existe alguma solução alternativa para isso sem adicionar um campo oculto?

<form action="/Media/Add">
    <input type="hidden" name="Id" value="123" />

    <!-- this does not appear in request -->
    <input type="textbox" name="Percentage" value="100" disabled="disabled" /> 

</form>
hazzik
fonte
3
A possível duplicação de valores de entradas desativadas não será enviada?
Liam
2
@ Liam, é uma tentativa muito estranha de fechar em favor de perguntas menos assistidas e com respostas de menor qualidade.
9605 hazzik
Uma pergunta mais antiga e menos atendida. Tecnicamente, essa pergunta deveria ser encerrada como duplicada quando solicitada. Eu o sinalizei com um mod para uma possível fusão, pode ou não acontecer. Depende deles.
Liam
@Liam, de fato, as perguntas são diferentes, até algumas respostas são semelhantes. I perguntar sobre como fazer campo "desativado" para enviar valores, e uma outra pergunta pergunta sobre "razões"
hazzik
Só cheguei aqui depois de passar algumas horas tentando resolvê-lo.
Ehhh

Respostas:

728

Os elementos com o disabledatributo não são enviados ou você pode dizer que seus valores não são postados (consulte o segundo marcador na Etapa 3 na especificação do HTML 5 para criar o conjunto de dados do formulário ).

Ou seja,

<input type="textbox" name="Percentage" value="100" disabled="disabled" /> 

FYI, de acordo com 17.12.1 na especificação HTML 4:

  1. Os controles desativados não recebem foco.
  2. Os controles desativados são ignorados na navegação por guias.
  3. Controles desativados não podem ser postados com sucesso.

Você pode usar o readonlyatributo no seu caso, fazendo isso, poderá postar os dados do seu campo.

Ou seja,

<input type="textbox" name="Percentage" value="100" readonly="readonly" />

FYI, de acordo com 17.12.2 na especificação HTML 4:

  1. Os elementos somente leitura recebem foco, mas não podem ser modificados pelo usuário.
  2. Os elementos somente leitura estão incluídos na navegação por guias.
  3. Os elementos somente leitura são lançados com sucesso.
AlphaMale
fonte
8
Para responder minha própria pergunta: Não, o readony funciona apenas para o controle de formulário <input /> do tipo = 'text' e type = 'password' e para <textarea />. O que o readonly faz é impedir que o usuário altere o valor dos controles. Impedir que o usuário altere o valor de uma caixa de seleção (ou entrada do tipo de rádio) não faz muito sentido ... #
504
3
@ danielson317 Você pode manter o elemento selecionado "desativado", mas também adicionar outra entrada oculta com o mesmo valor.
AlphaMale 5/05
11
@AlphaMale Mas o elemento oculto não pode ter o mesmo nome (ou não deveria). Eu superei isso permitindo que o elemento estivesse vazio e apenas obtendo o valor original do estado do formulário salvo. Vale a pena notar que o readonly não funciona em itens de formulário selecionados.
Danielson317 5/05
2
Você sempre descobre algo e pensa: "O que diabos os fez pensar que isso seria óbvio?" Se eu tiver o problema de incluir um campo de entrada que pode ou não ser desativado, isso significa que não quero que o usuário o altere, não que ele atue efetivamente como se nunca tivesse sido declarado!
Nick Bedford
11
Obrigado, isso foi útil e a resposta e a resposta.
user1449249
24

Usando o Jquery e enviando os dados com ajax, você pode resolver o seu problema:

<script>

$('#form_id').submit(function() {
    $("#input_disabled_id").prop('disabled', false);

    //Rest of code
    })
</script>
LipeTuga
fonte
Com +1, a coisa boa sobre esta solução é que você ainda pode usar o ícone vermelho de desativação quando o usuário sobre a entrada =)
JMASTER B
5
@ArielMaduro você pode fazer isso com csscursor:not-allowed;
sricks
@sricks oh really ?? você pode dar um exemplo?
JMASTER B
como esta solução mais do que o uso de somente leitura, porque os campos com deficiência não pode receber foco
Andreas
9

Para postar valores de entradas desativadas, além das entradas ativadas, você pode simplesmente reativar todas as entradas do formulário enquanto elas estão sendo enviadas.

<form onsubmit="this.querySelectorAll('input').forEach(i => i.disabled = false)">
    <!-- Re-enable all input elements on submit so they are all posted, 
         even if currently disabled. -->

    <!-- form content with input elements -->
</form>

Se você preferir jQuery:

<form onsubmit="$(this).find('input').prop('disabled', false)">
    <!-- Re-enable all input elements on submit so they are all posted, 
         even if currently disabled. -->

    <!-- form content with input elements -->
</form>

Para o ASP.NET MVC C # Razor, você adiciona o manipulador de envio assim:

using (Html.BeginForm("ActionName", "ControllerName", FormMethod.Post,
    // Re-enable all input elements on submit so they are all posted, even if currently disabled.
    new { onsubmit = "this.querySelectorAll('input').forEach(i => i.disabled = false)" } ))
{
    <!-- form content with input elements -->
}
Tom Blodget
fonte
há uma falta de citações na opção jquery
cagcak
8

Se você absolutamente precisar desabilitar o campo e passar os dados, poderá usar um javascript para inserir os mesmos dados em um campo oculto (ou apenas definir o campo oculto). Isso permitiria desativá-lo, mas ainda publicaria os dados, mesmo que você estivesse postando em outra página.

Chris Pierce
fonte
11
Esta solução é o que eu tenho usado também - mas, como acabei de aprender - a propriedade readonly é uma solução muito melhor #
Muleskinner
4

Estou atualizando esta resposta, pois é muito útil. Basta adicionar somente leitura à entrada.

Portanto, o formulário será:

<form action="/Media/Add">
    <input type="hidden" name="Id" value="123" />
    <input type="textbox" name="Percentage" value="100" readonly/>
</form>
limão
fonte
4

Semanticamente, isso parece o comportamento correto

Eu estaria me perguntando " Por que preciso enviar esse valor? "

Se você tiver uma entrada desativada em um formulário, presumivelmente não deseja que o usuário altere o valor diretamente

Qualquer valor exibido em uma entrada desativada deve ser

  1. saída de um valor no servidor que produziu o formulário ou
  2. se o formulário for dinâmico, seja calculável a partir de outras entradas no formulário

Supondo que o servidor que processa o formulário seja o mesmo que o servidor que o atende, todas as informações para reproduzir os valores das entradas desativadas devem estar disponíveis no processamento

De fato, para preservar a integridade dos dados - mesmo que o valor da entrada desativada tenha sido enviado ao servidor de processamento, você deve realmente validá-la. Essa validação exigiria o mesmo nível de informação que você precisaria para reproduzir os valores de qualquer maneira!

Eu quase argumentaria que entradas somente leitura não deveriam ser enviadas na solicitação

Feliz por ser corrigido, mas todos os casos de uso em que posso pensar em que entradas somente leitura / desativadas precisam ser enviadas são apenas problemas de estilo disfarçados

Arth
fonte
11
não esquecer que do valor pode ser manipulado com as ferramentas para desenvolvedores Chrome diretamente
jimjim
2

Acho que isso funciona mais fácil. leia apenas o campo de entrada e, em seguida, estilize-o para que o usuário final saiba que é somente leitura. as entradas colocadas aqui (do AJAX, por exemplo) ainda podem ser enviadas, sem código extra.

<input readonly style="color: Grey; opacity: 1; ">
Erik Robinson
fonte
-6

Você pode evitar totalmente a desativação, é doloroso, pois o formato do formulário html não envia nada relacionado a <p> outro rótulo.

Então você pode colocar regularmente

<input text tag just before you have `/>

Adicione isso readonly="readonly"

Ele não desativaria o seu texto, mas não mudaria de usuário, por isso funciona como <p>e enviará valor através do formulário. Basta remover a borda se você quiser torná-la mais parecida com uma <p>tag

Amin MyCard
fonte