Interrupt the refresh process of a html page with a script

Question

There is my code i check a simple formulmary and i test with a function if my label "prenom" is empty or not. But when i test it's ok but the page is refreshing and so everything you wrote is destruct. How can i stop the process until the script is write ? thank you

<!--
/** * Formulaire classique */
-->

<html lang="fr">

<head>
  <title>Formulaire</title>
  <meta charset="utf-8">
  <link href="style_form.css" rel="stylesheet" media="all" type="text/css">
</head>

<body>
  <h1>Votre avis</h1>
  <form id="form" method="post" enctype="text/plain">
    <p>
      <label for="prenom">Prénom</label><input id="prenom" type="text" name="prenom" value=" ">
      <label for="nom">Nom</label><input id="nom" type="text" name="nom" value=" "><br>

      <input id="sexeHomme" type="radio" name="sexe" value="homme"><label for="sexeHomme">Homme</label>
      <input id="sexeFemme" type="radio" name="sexe" value="femme"><label for="sexeFemme">Femme</label><br>

      <textarea name="impression" rows="5" cols="50">Donnez vos impressions sur le site...</textarea><br>

      <button onclick="myFunction()">Envoyer</button>

      <script>
        function myFunction() {
          var prenom;

          if (prenom.trim() == "") {
            console.log("Le labbel est vide");
          }
        }
      </script>

    </p>
  </form>

</body>

</html>

/** here is the probleme

Possible duplicate of [JavaScript code to stop form submission](https://stackoverflow.com/questions/8664486/javascript-code-to-stop-form-submission) — Esko, Oct 10 '18 at 09:05
add event.preventDefault(); to your javascript, this prevents the form from submitting (prevents the default behaviour of an element interaction) if you want to run javascript validation on the form you can use document.getElementById("form").submit(); to submit the form when the criteria is met — digital-pollution, Oct 10 '18 at 09:09

Gratien Asimbahwe · Accepted Answer · 2018-10-10T09:32:08.560

From your script you can do this:

<!--
/** * Formulaire classique */
-->

<html lang="fr">

<head>
  <title>Formulaire</title>
  <meta charset="utf-8">
  <link href="style_form.css" rel="stylesheet" media="all" type="text/css">
</head>

<body>
  <h1>Votre avis</h1>
  <form id="form" method="post" enctype="text/plain">
    <p>
      <label for="prenom">Prénom</label><input id="prenom" type="text" name="prenom" value=" ">
      <label for="nom">Nom</label><input id="nom" type="text" name="nom" value=" "><br>

      <input id="sexeHomme" type="radio" name="sexe" value="homme"><label for="sexeHomme">Homme</label>
      <input id="sexeFemme" type="radio" name="sexe" value="femme"><label for="sexeFemme">Femme</label><br>

      <textarea name="impression" rows="5" cols="50">Donnez vos impressions sur le site...</textarea><br>

      <button type="submit">Envoyer</button>

      <script>
      var form=document.getElementById('form');
      form.addEventListener('submit',function(event)
      {
      event.preventDefault();
          var prenom;
           prenom=document.getElementById('prenom').value;
          if (prenom.trim() == "") {
            console.log("Le labbel est vide");
        }
      });
       
      </script>

    </p>
  </form>

</body>

</html>

i try but it doesn't work the alert message doesn't appear now — MrTriforcien, Oct 10 '18 at 09:22
I have edited the answer and it should now be complete. Try it and give feedback. Good luck — Gratien Asimbahwe, Oct 10 '18 at 09:32

JIJOMON K.A · Answer 2 · 2018-10-10T09:18:40.163

0

you need to call the function in form like

<form id="form" method="post" enctype="text/plain" onsubmit="return myFunction() ">


<script>
        function myFunction() {
          var prenom=document.getElementById('prenom').value;

          if (prenom== "") {
            console.log("Le labbel est vide");
return false
          }
        }
      </script>

edited Oct 10 '18 at 09:18

answered Oct 10 '18 at 09:07

JIJOMON K.A

1,290
3
12
29

so the execution will be interupt ? Like if i use a "break" ? – MrTriforcien Oct 10 '18 at 09:11
Yes, Only If the function return false – JIJOMON K.A Oct 10 '18 at 09:13
Sry but it's still doesn't work The page refresh and what it was inside "nom" avec my comment are erased – MrTriforcien Oct 10 '18 at 09:17

Interrupt the refresh process of a html page with a script

2 Answers2