web-dev-qa-db-fra.com

Comment empêcher la soumission du formulaire?

J'ai un formulaire qui contient un bouton de soumission quelque part.

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

Y a-t-il un moyen de faire ça?

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

javascripthtmlforms
193
Nathan Osman

Contrairement aux autres réponses, return false n'est que 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>

script 

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

renvoyer false ici ne sera pas exécuté et le formulaire sera soumis dans les deux cas. Vous devez également appeler preventDefault pour 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é!

Vous pouvez également utiliser un bloc try...catch.

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

Vous pouvez utiliser l'événement inline onsubmit comme ceci

<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 pour faire de gros projets. Vous devrez peut-être utiliser les écouteurs d'événement.

Please En savoir plus sur Inline Events vs Event Listeners (addEventListener et l'attachement d'IE) ici . Car je ne peux pas l'expliquer plus que Chris Baker l'a fait. 

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.

130
Reigel

Attachez un écouteur d'événement au formulaire à l'aide de .addEventListener() puis appelez la méthode .preventDefault() 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 gestionnaire d'événement submit en ligne avec l'attribut onsubmit 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 propriété .onsubmit de l'objet DOM form 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 .

82
Michał Perłakowski

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.");
    });
});
11
Sach
var form = document.getElementById("idOfForm");
form.onsubmit = function() {
  return false;
}
8
naikus

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>

J'ajoute event.preventDefault(); sur onsubmit et cela fonctionne.

0
yozawiratama

Vous pouvez ajouter eventListner au formulaire en tant que 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>
0
Hasan A Yousef

Pour respecter les conventions de programmation unobtrusive JavaScript et en fonction de la rapidité de chargement de DOM , il peut être judicieux d'utiliser les éléments suivants:

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

Puis connectez 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'attribut action car certaines personnes pourraient avoir un plugin tel que NoScript en cours d'exécution, ce qui briserait la validation. Si vous utilisez l'attribut d'action, votre utilisateur sera au moins redirigé par le serveur en fonction de la validation du backend. Si vous utilisez quelque chose comme window.location, par contre, les choses iront mal.

0
user3423894

Pour empêcher la soumission de la soumission, 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.

0
Zuhair Taha