Comment empêcher l'envoi d'un formulaire?

J'ai un formulaire contenant un bouton d'envoi quelque part.

Cependant, je voudrais en quelque sorte «attraper» l'événement de soumission et l'empêcher de se produire.

Existe-t-il un moyen de le faire?

Je ne peux pas modifier le bouton d'envoi, car il fait partie d'un contrôle personnalisé.

Contrairement aux autres réponses, le retour falsen'est qu'une partie de la réponse. Considérez le scénario dans lequel une erreur JS se produit avant l'instruction de retour ...

html

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

scénario

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

le retour falseici ne sera pas exécuté et le formulaire sera envoyé de toute façon. Vous devez également appeler preventDefaultpour empêcher l'action de formulaire par défaut pour les soumissions de formulaire Ajax.

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

Dans ce cas, même avec le bogue, le formulaire ne sera pas envoyé!

Alternativement, un try...catchbloc pourrait être utilisé.

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

Vous pouvez utiliser un événement en ligne onsubmitcomme celui-ci

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

Ou

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

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

Démo

Maintenant, ce n'est peut-être pas une bonne idée lors de la réalisation de grands projets. Vous devrez peut-être utiliser des écouteurs d'événements.

Veuillez en savoir plus sur les événements en ligne vs les écouteurs d'événements (addEventListener et attachEvent d'IE) ici . Car je ne peux pas l'expliquer plus que Chris Baker .

Les deux sont corrects, mais aucun d'entre eux n'est "meilleur" en soi, et il peut y avoir une raison pour laquelle le développeur a choisi d'utiliser les deux approches.

Attachez un écouteur d'événements au formulaire à l'aide de .addEventListener(), puis appelez la .preventDefault()méthode sur 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>

Je pense que c'est une meilleure solution que de définir un submitgestionnaire d'événements en ligne avec l' onsubmitattribut car il sépare la logique et la structure de la page Web. Il est beaucoup plus facile de gérer un projet où la logique est séparée du HTML. Voir: JavaScript discret .

L'utilisation de la .onsubmitpropriété de l' formobjet DOM n'est pas une bonne idée car elle vous empêche d'attacher plusieurs rappels de soumission à un élément. Voir addEventListener vs onclick .

Essaye celui-là...

Code HTML

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

Code jQuery

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

ou

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

Les travaux suivants à partir de maintenant (testés dans Chrome et Firefox):

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

où validateMyForm () est une fonction qui retourne falsesi la validation échoue. Le point clé est d'utiliser le nom event. Nous ne pouvons pas utiliser par exemplee.preventDefault()

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

Pour suivre les conventions de programmation JavaScript discrètes et en fonction de la vitesse de chargement du DOM , il peut être judicieux d'utiliser les éléments suivants:

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

Câblez ensuite les événements en utilisant onload ou DOM ready si vous utilisez une bibliothèque.

$(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>

De plus, j'utiliserais toujours l' actionattribut car certaines personnes peuvent avoir un plugin comme NoScript en cours d'exécution qui casserait alors la validation. Si vous utilisez l'attribut action, au moins votre utilisateur sera redirigé par le serveur en fonction de la validation du backend. Si vous utilisez quelque chose comme window.location, d'autre part, les choses vont mal.

Pour empêcher l'envoi du formulaire, il vous suffit de le faire.

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

En utilisant le code ci-dessus, cela empêchera la soumission de votre formulaire.

Voici ma réponse:

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

    return false;
}
</script>

Ajouter event.preventDefault();sur onsubmitet il fonctionne.

Vous pouvez ajouter eventListner au formulaire preventDefault()et convertir les données du formulaire en JSON comme ci-dessous:

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>