Come impedire l'invio del modulo?

Ho un modulo che ha un pulsante di invio da qualche parte.

Tuttavia, vorrei in qualche modo "catturare" l'evento di invio e impedirne il verificarsi.

C'è un modo per farlo?

Non riesco a modificare il pulsante di invio, perché fa parte di un controllo personalizzato.

A differenza delle altre risposte, il ritorno falseè solo una parte della risposta. Considera lo scenario in cui si verifica un errore JS prima dell'istruzione return ...

html

<form onsubmit="return mySubmitFunction(event)">
  ...
</form>

copione

function mySubmitFunction()
{
  someBug()
  return false;
}

la restituzione falsequi non verrà eseguita e il modulo verrà inviato in entrambi i modi. È inoltre necessario chiamare preventDefaultper impedire l'azione del modulo predefinito per l'invio di moduli Ajax.

function mySubmitFunction(e) {
  e.preventDefault();
  someBug();
  return false;
}

In questo caso, anche con il bug il modulo non verrà inviato!

In alternativa, try...catchè possibile utilizzare un blocco.

function mySubmit(e) { 
  e.preventDefault(); 
  try {
   someBug();
  } catch (e) {
   throw new Error(e.message);
  }
  return false;
}

Puoi usare un evento inline onsubmitcome questo

<form onsubmit="alert('stop submit'); return false;" >

O

<script>
   function toSubmit(){
      alert('I will not submit');
      return false;
   }
</script>

<form onsubmit="return toSubmit();" >

dimostrazione

Ora, questa potrebbe non essere una buona idea quando si realizzano grandi progetti. Potrebbe essere necessario utilizzare i listener di eventi.

Si prega di leggere di più su Linea Eventi vs ascoltatori di eventi (addEventListener e attachEvent di IE) qui . Perché non posso spiegarlo più di Chris Baker .

Entrambi sono corretti, ma nessuno di essi è "il migliore" di per sé e potrebbe esserci un motivo per cui lo sviluppatore ha scelto di utilizzare entrambi gli approcci.

Collegare un listener di eventi al modulo utilizzando .addEventListener()e quindi chiamare il .preventDefault()metodo su event:

const element = document.querySelector('form');
element.addEventListener('submit', event => {
  event.preventDefault();
  // actual logic, e.g. validate the form
  console.log('Form submission cancelled.');
});

<form>
  <button type="submit">Submit</button>
</form>

Penso che sia una soluzione migliore rispetto alla definizione di un submitgestore eventi in linea con l' onsubmitattributo perché separa la logica e la struttura della pagina web. È molto più semplice mantenere un progetto in cui la logica è separata dall'HTML. Vedi: JavaScript discreto .

L'uso della .onsubmitproprietà formdell'oggetto DOM non è una buona idea perché ti impedisce di associare più callback di invio a un elemento. Vedi addEventListener vs onclick .

Prova questo...

Codice HTML

<form class="submit">
    <input type="text" name="text1"/>
    <input type="text" name="text2"/>
    <input type="submit" name="Submit" value="submit"/>
</form>

Codice jQuery

$(function(){
    $('.submit').on('submit', function(event){
        event.preventDefault();
        alert("Form Submission stopped.");
    });
});

o

$(function(){
    $('.submit').on('submit', function(event){
       event.preventDefault();
       event.stopPropagation();
       alert("Form Submission prevented / stopped.");
    });
});

Di seguito funziona (testato su Chrome e Firefox):

<form onsubmit="event.preventDefault(); return validateMyForm();">

dove validateMyForm () è una funzione che restituisce falsese la validazione fallisce. Il punto chiave è usare il nome event. Non possiamo usare per ese.preventDefault()

var form = document.getElementById("idOfForm");
form.onsubmit = function() {
  return false;
}

Per seguire le convenzioni di programmazione JavaScript discrete e in base alla velocità con cui verrà caricato il DOM , potrebbe essere una buona idea utilizzare quanto segue:

<form onsubmit="return false;"></form>

Quindi collegare gli eventi utilizzando l'onload o il DOM pronto se si utilizza una libreria.

$(function() {
    var $form = $('#my-form');
    $form.removeAttr('onsubmit');
    $form.submit(function(ev) {
        // quick validation example...
        $form.children('input[type="text"]').each(function(){
            if($(this).val().length == 0) {
                alert('You are missing a field');
                ev.preventDefault();
            }
        });
    });
});

label {
    display: block;
}

#my-form > input[type="text"] {
    background: cyan;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="my-form" action="http://google.com" method="GET" onsubmit="return false;">
    <label>Your first name</label>
    <input type="text" name="first-name"/>
    <label>Your last name</label>
    <input type="text" name="last-name" /> <br />
    <input type="submit" />
</form>

Inoltre, utilizzerei sempre l' actionattributo poiché alcune persone potrebbero avere alcuni plugin come NoScript in esecuzione che interromperebbero quindi la convalida. Se si utilizza l'attributo action, almeno l'utente verrà reindirizzato dal server in base alla convalida del back-end. Se stai usando qualcosa del genere window.location, d'altra parte, le cose andranno male.

Per impedire l'invio del modulo è sufficiente eseguire questa operazione.

<form onsubmit="event.preventDefault()">
    .....
</form>

Usando il codice sopra questo impedirà l'invio del modulo.

Ecco la mia risposta:

<form onsubmit="event.preventDefault();searchOrder(event);">
...
</form>
<script>
const searchOrder = e => {
    e.preventDefault();
    const name = e.target.name.value;
    renderSearching();

    return false;
}
</script>

Aggiungo event.preventDefault();su onsubmite funziona.

È possibile aggiungere eventListner al modulo preventDefault()e convertire i dati del modulo in JSON come di seguito:

const formToJSON = elements => [].reduce.call(elements, (data, element) => {
  data[element.name] = element.value;
  return data;

}, {});

const handleFormSubmit = event => {
    event.preventDefault();
    const data = formToJSON(form.elements);
    console.log(data);
  //  const odata = JSON.stringify(data, null, "  ");
  const jdata = JSON.stringify(data);
    console.log(jdata);

    (async () => {
      const rawResponse = await fetch('/', {
        method: 'POST',
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json'
        },
        body: jdata
      });
      const content = await rawResponse.json();

      console.log(content);
    })();
};

const form = document.forms['myForm']; 
form.addEventListener('submit', handleFormSubmit);

<form id="myForm" action="/" method="post" accept-charset="utf-8">
    <label>Checkbox:
        <input type="checkbox" name="checkbox" value="on">
    </label><br /><br />

    <label>Number:
        <input name="number" type="number" value="123" />
    </label><br /><br />

    <label>Password:
        <input name="password" type="password" />
    </label>
    <br /><br />

    <label for="radio">Type:
        <label for="a">A
            <input type="radio" name="radio" id="a" value="a" />
        </label>
        <label for="b">B
            <input type="radio" name="radio" id="b" value="b" checked />
        </label>
        <label for="c">C
            <input type="radio" name="radio" id="c" value="c" />
        </label>
    </label>
    <br /><br />

    <label>Textarea:
        <textarea name="text_area" rows="10" cols="50">Write something here.</textarea>
    </label>
    <br /><br />

    <label>Select:
        <select name="select">
            <option value="a">Value A</option>
            <option value="b" selected>Value B</option>
            <option value="c">Value C</option>
        </select>
    </label>
    <br /><br />

    <label>Submit:
        <input type="submit" value="Login">
    </label>
    <br /><br />


</form>