2009-11-30 15 views
71

Sto cercando il modo più pulito per creare un modulo HTML che non ha un pulsante di invio. Questo è di per sé abbastanza semplice, ma devo anche impedire che il modulo si ricarichi da solo quando vengono effettuate operazioni simili alla submission (ad esempio, premendo Immettere in un campo di testo).modulo senza azione e dove immettere non ricarica pagina

+0

Vuoi non inviarlo mai? – UpTheCreek

+0

Se hai solo un con un solo che è un campo di testo che non deve inviare quando premi Invio, dovrebbe? –

+0

Voglio che si presenti su qualche altra condizione (di fatto colpendo un determinato pulsante). Il problema è che non sono riuscito a ottenere il comportamento di "entrare nel campo di testo" di postare/raggiungere lo stesso URL per non accadere. Quindi il mio modulo creato con cura, dove devi fare X, Y e Z per farlo inviare, può essere inviato erroneamente dall'utente premendo enter. –

risposta

31

Aggiungi un gestore onsubmit al modulo (tramite js semplice o jquery $(). Submit (fn)) e restituisce falso a meno che non siano soddisfatte le condizioni specifiche.

A meno che non si desideri inviare il modulo, mai - nel qual caso, perché non lasciare semplicemente l'attributo 'azione' sull'elemento del modulo?

+115

Un modulo senza un attributo 'action' non è una forma, secondo gli standard - e in effetti farà in modo che una pagina si ricarichi in alcuni browser. Ho trovato che action =" javascript: void (0); "' funziona bene . – Dutchie432

+0

La risposta Dutchies funziona perfettamente. Firefox stava semplicemente aggiornando la pagina. – Doomsknight

+1

@ Dutchie432 dovrebbe rendere questo in una risposta invece di un commento. Poi si dirigerebbe verso l'alto dove appartiene. In alternativa, KPrime potrebbe aggiustare la sua risposta, poiché omettere l'azione non ha funzionato per me ... – sage

8

Basta aggiungere questo evento al campo di testo. Si eviterà una sottomissione su premendo Invio, e tu sei libero di aggiungere un pulsante di invio o chiamare il form.submit() come richiesto:

onKeyPress="if (event.which == 13) return false;" 

Ad esempio:

<input id="txt" type="text" onKeyPress="if (event.which == 13) return false;"></input> 
+1

Grazie per quello. Temo che la chiarezza della tua risposta mi abbia chiarito la correttezza di una risposta precedente in modo da non ottenere la risposta accettata, ma ottieni la mia gratitudine e una spinta verso l'alto! –

+2

Grazie. Felice di aiutare. Comunque non sono mai stato uno alla ribalta. ;) – GenericMeatUnit

143

Vorrete per includere action="javascript:void(0);" nel modulo per impedire il ricaricamento della pagina e mantenere lo standard HTML.

+3

Appena trascorso 2 giorni cercando di sopprimere l'azione predefinita del pulsante di invio quando viene premuto Invio, perché anche se l'azione ha avuto luogo, la pagina ha finito per ricaricare (Firefox). Aggiungendo il vuoto javascript come azione sul modulo risolto. Grazie per quello. –

+0

grazie per questa risposta aggiuntiva. questo funziona ancora - ma è ancora la soluzione "state of the art" nel 2016? –

+1

@low_rents Continuo a usarlo sempre e non ho trovato personalmente una soluzione migliore. – Dutchie432

2

un'idea:

<form method="POST" action="javascript:void(0);" onSubmit="CheckPassword()"> 
    <input id="pwset" type="text" size="20" name='pwuser'><br><br> 
    <button type="button" onclick="CheckPassword()">Next</button> 
</form> 

e

<script type="text/javascript"> 
    $("#pwset").focus(); 
    function CheckPassword() 
    { 
     inputtxt = $("#pwset").val(); 
     //and now your code 
     $("#div1").load("next.php #div2"); 
     return false; 
    } 
</script> 
0

bidirezionale per risolvere: valore di azione

  1. maschera è "javascript: void (0);".
  2. aggiungi listener di eventi keypress per il modulo per impedire l'invio.
0

La prima risposta è la soluzione migliore: (. Sia tramite js pianura o jquery $() presenta (fn))

Aggiungere un gestore onsubmit alla forma, e restituire false a meno che il condizioni specifiche sono soddisfatte.

più specifiche con jQuery:

$('#your-form-id').submit(function(){return false;}); 

A meno che non si desidera che il modulo per presentare, sempre - in questo caso, perché non solo lasciare fuori l' 'azione' attributo sul elemento di forma?

Scrivere le estensioni di Chrome è un esempio di dove si potrebbe avere un modulo per l'input dell'utente, ma non si desidera che venga inviato. Se si utilizza action = "javascript: void (0);", il codice funzionerà probabilmente ma si finirà con this problem in cui si riceve un errore sull'esecuzione di Javascript in linea.

Se si omette completamente l'azione, il modulo verrà ricaricato, il che è anche indesiderato in alcuni casi quando si scrive un'estensione di Chrome. O se avessi una pagina web con una sorta di calcolatrice incorporata, in cui l'utente fornirebbe qualche input e fare clic su "Calcola" o qualcosa del genere.

4

Quando si preme entrare in forma il comportamento naturale della forma viene ad essere submited, per fermare questo comportamento, che non è naturale, è necessario evitare che si submiting (comportamento di default), con jQuery:

$("#yourFormId").on("submit",function(event){event.preventDefault()}) 
Problemi correlati