risposta-alla-domanda-sullo-sviluppo-web-bd.com

Come impedire ai pulsanti di inviare moduli

Nella pagina seguente, con Firefox il pulsante Rimuovi invia il modulo, ma il pulsante Aggiungi non lo fa. Come posso evitare che il pulsante Rimuovi invii il modulo?

<html>
<head>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
function addItem() {
  var v = $('form :hidden:last').attr('name');
  var n = /(.*)input/.exec(v);
  var newPrefix;
  if ( n[1].length == 0 ) {
    newPrefix = '1';
  } else {
    newPrefix = parseInt(n[1])+1;
  }
  var oldElem = $('form tr:last');
  var newElem = oldElem.clone(true);
  var lastHidden = $('form :hidden:last');
  lastHidden.val(newPrefix);
  var pat = '=\"'+n[1]+'input';
  newElem.html(newElem.html().replace(new RegExp(pat, 'g'), '=\"'+newPrefix+'input'));
  newElem.appendTo('table');
  $('form :hidden:last').val('');
}
function removeItem() {
  var rows = $('form tr');
  if ( rows.length > 2 ) {
    rows[rows.length-1].html('');
    $('form :hidden:last').val('');
  } else {
    alert('Cannot remove any more rows');
  }
}
</script>
</head>
<body>
<form autocomplete="off" method="post" action="">
<p>Title:<input type="text" /></p>
<button onclick="addItem(); return false;">Add Item</button>
<button onclick="removeItem(); return false;">Remove Last Item</button>
<table>
<th>Name</th>

<tr>
  <td><input type="text" id="input1" name="input1" /></td>
  <td><input type="hidden" id="input2" name="input2" /></td>
</tr>
</table>
<input id="submit" type="submit" name="submit" value="Submit">
</form>
</body>
</html>
784
Khanpo

Stai utilizzando un elemento pulsante HTML5. Ricorda il motivo è che questo pulsante ha un comportamento predefinito di invio, come indicato nelle specifiche W3 come visto qui: Pulsante W3C HTML5

Quindi è necessario specificare il suo tipo in modo esplicito:

<button type="button">Button</button>

per sovrascrivere il tipo di invio predefinito. Voglio solo sottolineare il motivo per cui ciò accade =)

=)

1528
Metafaniel

Imposta il tipo sui tuoi pulsanti:

<button type="button" onclick="addItem(); return false;">Add Item</button>
<button type="button" onclick="removeItem(); return false;">Remove Last Item</button>

... che impedirà loro di attivare un'azione di invio quando si verifica un'eccezione nel gestore di eventi. Quindi, correggi la funzione removeItem() in modo che non attivi un'eccezione:

function removeItem() {
  var rows = $('form tr');
  if ( rows.length > 2 ) {
    // change: work on filtered jQuery object
    rows.filter(":last").html('');
    $('form :hidden:last').val('');
  } else {
    alert('Cannot remove any more rows');
  }
}

Nota la modifica: il tuo codice originale ha estratto un elemento HTML dal set jQuery e poi ha provato a richiamare un metodo jQuery su di esso - questo ha generato un'eccezione, determinando il comportamento predefinito per il pulsante.

FWIW, c'è un altro modo in cui puoi andare con questo ... Collegare i gestori di eventi usando jQuery, e usare il metodo preventDefault () su jQuery event object per annullare il comportamento predefinito in anticipo:

$(function() // execute once the DOM has loaded
{

  // wire up Add Item button click event
  $("#AddItem").click(function(event)
  {
    event.preventDefault(); // cancel default behavior

    //... rest of add logic
  });

  // wire up Remove Last Item button click event
  $("RemoveLastItem").click(function(event)
  {
    event.preventDefault(); // cancel default behavior

    //... rest of remove last logic
  });

});

...

<button type="button" id="AddItem" name="AddItem">Add Item</button>
<button type="button" id="RemoveLastItem" name="RemoveLastItem">Remove Last Item</button>

Questa tecnica mantiene tutta la tua logica in un unico posto, rendendo più facile il debug ... consente anche di implementare un fallback modificando type sui pulsanti di nuovo su submit e gestendo l'evento sul lato server - questo è noto come discreto JavaScript .

573
Shog9

Qualche tempo fa avevo bisogno di qualcosa di molto simile ... e l'ho capito.

Quindi quello che metto qui è come faccio a fare in modo che un modulo possa essere inviato da JavaScript senza convalida ed esecuzione della convalida solo quando l'utente preme un pulsante (in genere un pulsante di invio).

Per l'esempio userò un modulo minimo, solo con due campi e un pulsante di invio.

Ricorda cosa è richiesto: da JavaScript deve poter essere inviato senza alcun controllo. Tuttavia, se l'utente preme un pulsante di questo tipo, la convalida deve essere eseguita e il modulo inviato solo se supera la convalida.

Normalmente tutto partirà da qualcosa vicino a questo (ho rimosso tutte le cose extra non importanti):

<form method="post" id="theFormID" name="theFormID" action="">
   <input type="text" id="Field1" name="Field1" />
   <input type="text" id="Field2" name="Field2" />
   <input type="submit" value="Send" onclick="JavaScript:return Validator();" />
</form>

Guarda come il tag form non ha onsubmit="..." (ricorda che era una condizione di non averlo).

Il problema è che il modulo viene sempre inviato, non importa se onclick restituisce true o false.

Se cambio type="submit" per type="button", sembra funzionare ma non lo fa. Non invia mai il modulo, ma ciò può essere fatto facilmente.

Quindi alla fine ho usato questo:

<form method="post" id="theFormID" name="theFormID" action="">
   <input type="text" id="Field1" name="Field1" />
   <input type="text" id="Field2" name="Field2" />
   <input type="button" value="Send" onclick="JavaScript:return Validator();" />
</form>

E su function Validator, dove return True; è, aggiungo anche una frase di invio JavaScript, qualcosa di simile a questo:

function Validator(){
   //  ...bla bla bla... the checks
   if(                              ){
      document.getElementById('theFormID').submit();
      return(true);
   }else{
      return(false);
   }
}

Il id="" è solo per JavaScript getElementById, il name="" è solo per essere visualizzato su POST data.

In questo modo funziona come ho bisogno.

Lo metto solo per le persone che non hanno bisogno della funzione onsubmit nel modulo, ma fanno alcune convalida quando un pulsante viene premuto dall'utente.

Perché non ho bisogno di onsubmit sul tag form? Facile, su altre parti di JavaScript ho bisogno di eseguire un invio ma non voglio che ci sia alcuna convalida.

Il motivo: se l'utente è colui che esegue l'invio che desidero e necessita della convalida da eseguire, ma se è JavaScript a volte devo eseguire l'invio mentre tali convalide lo eviterebbero.

Può sembrare strano, ma non quando pensi ad esempio: su un Login ... con alcune restrizioni ... come non permettere di essere usato PHP sessioni e nessuno dei due cookie è permesso!

Quindi qualsiasi collegamento deve essere convertito in tale modulo, quindi i dati di accesso non vanno persi. Quando non è ancora stato effettuato il login, deve anche funzionare. Quindi nessuna convalida deve essere eseguita sui collegamenti. Ma voglio presentare un messaggio all'utente se l'utente non ha inserito entrambi i campi, utente e pass. Quindi se ne manca uno, il modulo non deve essere inviato! c'è il problema.

Vedi il problema: il modulo non deve essere inviato quando un campo è vuoto solo se l'utente ha premuto un pulsante, se è un codice JavaScript deve poter essere inviato.

Se eseguo il lavoro su onsubmit sul tag form, vorrei sapere se è l'utente o altro JavaScript. Poiché nessun parametro può essere passato, non è possibile direttamente, quindi alcune persone aggiungono una variabile per dire se la validazione deve essere fatta o meno. La prima cosa sulla funzione di validazione è controllare che il valore della variabile, ecc. Sia troppo complicato e il codice non dica ciò che è realmente desiderato.

Quindi la soluzione non è avere onsubmit sul tag form. Insead metterlo dove è davvero necessario, sul pulsante.

Per l'altro lato, perché inserire codice onsubmit dal momento che concettualmente non voglio la convalida onsubmit. Voglio davvero la convalida del pulsante.

Non solo il codice è più chiaro, è dove deve essere. Ricorda solo questo: - Non voglio che JavaScript convalidi il modulo (che deve essere sempre fatto da PHP sul lato server) - Voglio mostrare all'utente un messaggio che dice che tutti i campi non devono essere vuoti , che ha bisogno di JavaScript (lato client)

Quindi perché alcune persone (pensate o dimmi) devono essere fatte su una convalida onsumbit? No, concettualmente non sto facendo un onsumbit che convalida dal lato client. Sto solo facendo qualcosa su un pulsante premuto, quindi perché non lasciare che sia implementato?

Bene, quel codice e questo stile fanno il trucco perfettamente. Su qualsiasi JavaScript che ho bisogno di inviare il modulo ho appena messo:

document.getElementById('theFormID').action='./GoToThisPage.php'; // Where to go
document.getElementById('theFormID').submit(); // Send POST data and go there

E salta la convalida quando non ne ho bisogno. Invia semplicemente il modulo e carica una pagina diversa, ecc.

Ma se l'utente fa clic sul pulsante di invio (ovvero type="button" not type="submit") la convalida viene eseguita prima di consentire la presentazione del modulo e se non è valido non inviato.

Bene, spero che questo aiuti gli altri a non provare codice lungo e complicato. Basta non usare onsubmit se non necessario, e usare onclick. Ma ricordati di cambiare type="submit" in type="button" e ti preghiamo di non dimenticare di eseguire submit() da JavaScript.

28
z666zz666z

Sono d'accordo con Shog9, anche se potrei usare invece:

<input type = "button" onClick="addItem(); return false;" value="Add Item" />

Secondo w3schools , il tag <button> ha un comportamento diverso su diversi browser.

24
poundifdef

Supponiamo che il tuo modulo HTML abbia id="form_id"

<form id="form_id">
<!--your HTML code-->
</form>

Aggiungi questo frammento jQuery al tuo codice per vedere il risultato,

$("#form_id").submit(function(){
  return false;
});
17
Prateek Joshi

$("form").submit(function () { return false; }); che impedirà l'invio del pulsante o puoi semplicemente cambiare il tipo di pulsante in "pulsante" <input type="button"/> anziché <input type="submit"/> Che funzionerà solo se questo pulsante non è l'unico pulsante in questo modulo.

14
Shiala

Puoi semplicemente ottenere il riferimento dei tuoi pulsanti usando jQuery e impedirne la propagazione come di seguito:

 $(document).ready(function () {
    $('#BUTTON_ID').click(function(e) {

            e.preventDefault();
            e.stopPropagation();
            e.stopImmediatePropagation();

            return false;
    });});
11
Ata Iravani

Questo è un errore html5 come è stato detto, puoi sempre avere il pulsante come submit (se vuoi coprire sia gli utenti javascript che quelli non javascript) usandolo come:

     <button type="submit" onclick="return false"> Register </button>

In questo modo annullerai l'invio ma continuerai a fare qualsiasi cosa tu stia facendo nella funzione jquery o javascript e farai il submit per gli utenti che non hanno javascript.

9
sagits

Sono sicuro che su FF il

removeItem 

la funzione incontra un errore JavaScript, questo non è accaduto su IE

Quando compare l'errore javascript, il codice "return false" non verrà eseguito, rendendo la pagina postback

7
Alin Vasile

Ecco un approccio semplice:

$('.mybutton').click(function(){

    /* Perform some button action ... */
    alert("I don't like it when you press my button!");

    /* Then, the most important part ... */
    return false;

});
3
axiom82

Il ritorno false impedisce il comportamento predefinito. ma il ritorno falso interrompe il gorgoglio di eventi di clic aggiuntivi. Questo significa che se ci sono altri collegamenti di clic dopo che questa funzione viene chiamata, questi non considerano.

 <button id="btnSubmit" type="button">PostData</button>
 <Script> $("#btnSubmit").click(function(){
   // do stuff
   return false;
}); </Script>

O semplicemente puoi mettere così

 <button type="submit" onclick="return false"> PostData</button>
2

Imposta il tuo pulsante in modo normale e usa event.preventDefault come ..

   <button onclick="myFunc(e)"> Remove </button>  
   ...
   ...

   In function...

   function myFunc(e){
       e.preventDefault();
   }
2
Vishal
return false;

È possibile restituire false alla fine della funzione o dopo la chiamata della funzione.

Finché è l'ultima cosa che succede, il modulo non verrà inviato.

2

Il seguente codice di esempio mostra come impedire il clic del pulsante dall'invio del modulo.

Puoi provare il mio codice di esempio:

 <form autocomplete="off" method="post" action="">
   <p>Title:
     <input type="text" />
   </p>
   <input type="button" onclick="addItem()" value="Add Item">
   <input type="button" onclick="removeItem()" value="Remove Last Item">
   <table>
     <th>Name</th>

     <tr>
       <td>
         <input type="text" id="input1" name="input1" />
       </td>
       <td>
         <input type="hidden" id="input2" name="input2" />
       </td>
     </tr>
   </table>
   <input id="submit" type="submit" name="submit" value="Submit">
 </form>
<script language="javascript">
function addItem() {
return false;
}

function removeItem() {
return false;
}
</script>
1
The KNVB

La funzione removeItem contiene effettivamente un errore, che fa sì che il pulsante form faccia il suo comportamento predefinito (inviando il modulo). In questo caso, la console degli errori di javascript di solito fornisce un puntatore.

Controlla la funzione removeItem nella parte javascript:

La linea:

rows[rows.length-1].html('');

non funziona Prova questo:

rows.eq(rows.length-1).html('');
0
ylebre

Non sono in grado di testare questo adesso, ma penso che potresti usare il metodo jQuery preventDefault .

0
Tyler Rash