) è stata sollevata la domanda se sarebbe opportuno che i pulsanti del modulo inviato al server impostassero la proprietà disabled = "disabled".

Tuttavia, finora non hanno capito perché questo è necessario e come farlo comunque. Sembrerebbe che potrebbe essere più semplice e di cui puoi parlare qui, ma no - in effetti, tutto si è rivelato non così banale. Immediatamente, noto che il seguente ragionamento si applica a entrambi i tipi di moduli: entrambi inviati tramite il normale SUBMIT e utilizzando AJAX.

Perché è necessario rendere inattivi i pulsanti

1. Per rendere evidente all'utente che ha già cliccato sul pulsante e che il modulo è in fase di invio
2. In modo che il server non venga caricato con richieste non necessarie e per ridurre la probabilità di errori

È chiaro che puoi evitare clic non necessari appendendo una visualizzazione speciale che dice che la richiesta è stata accettata e il modulo è in fase di invio ( l'esempio più semplice- Mostra qualcosa gif animata). I pulsanti rimarranno comunque cliccabili e gli utenti più impazienti non approfitteranno di questa opportunità. Allo stesso tempo, il modulo non sarà più in grado di rispondere a questi clic aggiuntivi (la gif animata sta già girando) e la frustrazione dell'utente aumenterà solo.

È anche chiaro che richieste extra può essere prevenuto inserendo un po' di class="form_is_loading" nel modulo e verificando la presenza di questa classe su ogni invio. Ma perché fare questi controlli quando puoi farne a meno semplicemente rendendo inattivo il pulsante?

Come rendere inattivi i pulsanti

Questa semplice variante proposta nei suddetti argomenti si rivela insufficiente e impraticabile.

Perché non basta rendere inattivo il pulsante premuto:

1. I moduli di invio possono avvenire anche premendo Invio. Pertanto, l'elaborazione dei pulsanti deve essere sospesa all'evento onsubmit del modulo stesso. Inoltre, un modulo può avere più pulsanti e avrebbe senso renderli tutti inattivi, non solo il pulsante che è stato premuto.
2. Se, dopo aver inviato il modulo, torniamo nuovamente alla pagina con il modulo (utilizzando il pulsante "Indietro" nel browser), la memorizzazione nella cache funzionerà: incontreremo pulsanti inattivi e non saremo in grado di inviare nuovamente il modulo - senza riavvio forzato pagina con la perdita di tutti i campi precedentemente compilati (Torna a modulo di ricerca dalla pagina dei risultati di ricerca ecco un esempio dal vivo).
3. Se il modulo ha diversi pulsanti (ad esempio, "Pubblica" e "Annulla"), non saremo in grado di dire al server quale pulsante è stato premuto: pulsante inattivo non passa il suo nome e valore, anche se lo rendiamo inattivo sull'evento onsubmit

Quindi, lo script per la creazione di pulsanti inattivi

In breve, lo scenario è il seguente.

1. I pulsanti vengono resi inattivi dall'evento onsubmit del modulo
2. I pulsanti tornano a stato attivo prima di lasciare la pagina dall'evento window.onunload
3. Ogni pulsante del modulo sull'evento onclick deve creare un campo nascosto con lo stesso nome, attraverso il quale passerà il suo valore al server

E poi segue uno script più dettagliato con il layout del codice.

//// file html //////////////////////////////////////////////////////////////////////

//// file js //////////////////////////////////////////////////////// ////////////////////////////////////////

Quindi oggi avevo bisogno di creare una caratteristica nel mio nuovo progetto. Il progetto è abbastanza grande da spiegare cosa e come e quindi parlerò dell'essenza stessa di questa "caratteristica".

Il compito era consentire all'amministratore di eliminare gli utenti dal database. Quindi impostiamo i parametri di ricerca e lo script php ci fornisce un elenco di utenti. Di fronte a ciascun utente c'è una casella di controllo quadrata (casella di controllo), in modo da poter selezionare ed eliminare.

Ma non tutto è così semplice. Il compito era quello di rendere inattivo il pulsante "cancella", che diventasse attivo solo nel momento in cui almeno una casella di controllo è selezionata. Naturalmente, i mostri di JavaScript diranno sì, ci sono due dita sull'asfalto. Ma non sono un mostro di JS e ricorro alla programmazione in questo linguaggio solo quando voglio qualcosa del genere, per comodità.

Quindi, da persona rispettabile, sono entrato nella rete e Yandex e Google e tutti i tipi di portali hanno inserito molto codice diverso nel mio browser da cui il mio cervello ha ancora accecato esattamente ciò di cui avevo bisogno. Come si è scoperto, non ci sono davvero esempi normali (funzionanti) sulla rete, e quindi, in modo che un'altra persona come me non si spezzi il cervello, ho deciso di pubblicare un esempio funzionante di codice JavaScript.

L'implementazione HTML, penso, non è difficile da capire, ma la aggiungerò comunque:

1 - Uno
2 - Due
3 - Tre
… 10 - Dieci

Allora qual è il problema principale che sto affrontando. Si scopre che puoi "spegnere" il pulsante come preferisci, ad es. accedendo all'elemento di invio in qualsiasi forma disponibile:

submit.disabled = vero;

Tuttavia, è impossibile abilitare (sostituire con false) in un modo simile, ed è per questo che ho già scovato una tale costruzione:

Document.form_del.elements["invia"].disabled = true;

E qui, se sostituiamo true con false, il pulsante si accende e si spegne. E infine, decifrarò questa riga di codice:

Nel documento corrente nella forma denominata “form_del”, l'elemento con il nome “submit” (e nel nostro esempio questo nome è il pulsante) ha la proprietà “disabled”, quindi lo attiviamo su “true” o lo disattiviamo “falso”. Quella. abilitando questa proprietà renderemo inattivo il nostro pulsante e, disabilitando la proprietà, il nostro pulsante tornerà attivo.

Cari visitatori del sito che fanno domande del tipo "Come allegare il carrello al sito?" eccetera. Non realizzo soluzioni già pronte, descrivo le logiche di implementazione, per ogni singolo sito dovrai comunque aggiungere alcune cose, quindi se proprio hai bisogno di fissare o allegare qualcosa, fornisco servizi a pagamento e gratuiti di consulenza e siti di finalizzazione. Scrivi al modulo di feedback in cima alla pagina, risponderò a tutti.

Pulsante di invio disabilitato (attributo DISABLED)

A volte sul sito è necessario creare un form in cui l'utente inserisce alcuni dati. Può esserci un numero qualsiasi di campi nel modulo, ma ci sono sempre campi obbligatori. Come verificare se l'utente ha compilato o meno il campo richiesto. Ci sono due modi:

1. Controllare il gestore, ad es. l'utente compila i campi richiesti, invia il modulo, quindi il gestore controlla i campi richiesti e, se un campo non viene compilato, restituisce l'utente. Tutto è semplice, però serve un meccanismo per riportare nel form i valori ​​dei campi già compilati, che può essere implementato tramite sessioni, ma questo non è molto conveniente.
2. Convalida con metodi JavaScript: tutto è molto più semplice (in termini di funzionamento del modulo stesso). Impostiamo ogni campo un evento onchange o qualsiasi altro evento che risponda all'azione dell'utente (beh, non onmouseover ovviamente, anche se probabilmente può essere fatto anche divertente ...), dopodiché la funzione che abbiamo scritto verificherà se i campi richiesti sono compilati e consentono o disabilitano il pulsante di invio.

La prima opzione è più correlata alla sezione PHP, quindi per ora non verrà presa in considerazione. Consideriamo il secondo in modo più dettagliato. La prima cosa di cui abbiamo bisogno è il modulo stesso:

Come puoi vedere, il pulsante Invia ha un attributo disabilitato impostato su disabilitato. Inoltre, ogni campo del modulo ha un evento onchange che chiama la funzione EnableButton(). Qual è questa funzione? Diciamo che i campi obbligatori sono campo1 e campo3, quindi la funzione EnableButton() sarebbe simile a questa:

funzione EnableButton()
{
con(documento.forms.form1)
{
Se(field1.value!=""&&field2.value!='')
{
disable_button.disabled= falso;
}
altro
{
disable_button.disabled= vero;
}
}
}

Sfortunatamente, non ho trovato un analogo JavaScript della funzione PHP empty(), quindi i valori del campo devono essere confrontati con una stringa vuota. Un'altra cosa a cui vale la pena prestare attenzione è l'istruzione with (document.forms.form1). Per coloro che non hanno familiarità con JavaScript, l'espressione tra parentesi dell'istruzione with verrà aggiunta a tutti gli oggetti, il che può ridurre notevolmente la voce della funzione. Senza con EnableButton() sarebbe simile a questo:

funzione EnableButton()
{
Se(document.forms.form1.field1.value!=""&& document.forms.form1.field2.value!='')
{
falso;
}
altro
{
document.forms.form1.disable_button.disabled= vero;
}
}

D'accordo - piuttosto ingombrante.
Come ulteriore nota, l'attributo disabilitato può essere utilizzato su qualsiasi elemento del modulo. Un esempio è la compilazione di informazioni sull'azienda: indirizzo legale e postale. Due campi per due indirizzi, tuttavia, puoi aggiungere una casella di controllo (- corrisponde a quella legale), contrassegnando la quale, l'utente indicherà che il campo dell'indirizzo postale non ha bisogno di essere elaborato e puoi aggiungere ad esso l'attributo disabilitato.