CODEWITHSUNDEEP
javascriptphponsubmit
KingFlamini
KingFlamini

Reputation: 23

The onsubmit function doesn't seems to work when I submit a form

Hi i try to call a function with the onsubmit property, but nothing happen. Here, it's just a test, to make the function work but, i would like to verify if the phone number is correct. Before I used simple alert, but everytime it's refreshing the page and I don't like it, so I search a little bit and found the " onsubmit " but doesn't work .. What did i do wrong ? I use JS and PHP. Thank you all !

<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Mon test</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <link href="/CSS/StyleAccueil.css" rel="stylesheet" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

  <script type="text/javascript">
    function valide_GSM() {
      alert("Ca fonctionne");
      document.getElementById("txtGSM").focus();
      return false;
    }
  </script>
</head>

<body>
  <form method="post" onsubmit="return valide_GSM();">
    <table class="tableauInscription">
      <tr>
        <td colspan="2">
          <h3 style="text-align:center;">Formulaire d'inscription</h3>
        </td>
      </tr>

      <tr>
        <td class="coteGauche">Prenom :</td>
        <td><input type="TextBox" name="txtPrenom" CssClass="form-control" placeholder="Prenom"></td>
      </tr>

      <tr>
        <td class="coteGauche">Nom :</td>
        <td><input type="TextBox" name="txtNom" CssClass="form-control" placeholder="Nom"></td>
      </tr>

      <tr>
        <td class="coteGauche">Adresse email :</td>
        <td><input type="email" name="txtAdresseMail" CssClass="form-control" placeholder="Adresse email"></td>
      </tr>

      <tr>
        <td class="coteGauche">GSM min 7 :</td>
        <td><input type="TextBox" name="txtGSM" CssClass="form-control" placeholder="GSM" minlength="7"></td>
      </tr>

      <tr>
        <td class="coteGauche">Identifiant :</td>
        <td><input type="TextBox" name="txtIdentifiant" CssClass="form-control" placeholder="Identifiant"></td>
      </tr>

      <tr>
        <td class="coteGauche">Mot de passe : </td>
        <td><input type="Password" name="txtMotDePasse" CssClass="form-control" placeholder="Mot de passe"></td>
      </tr>

      <tr>
        <td class="coteGauche"></td>
        <td style="padding-left:33px; padding-top:10px; padding-bottom:10px;">
          <button type="submit" id="btnCreerCompte" class="btn btn-dark">Créer le compte</button></td>
      </tr>
    </table>
  </form>
</body>

</html>

Upvotes: 0

Views: 985

Answers (1)

I wrestled a bear once.
I wrestled a bear once.

Reputation: 23379

Problem is document.getElementById("txtGSM").focus(); is throwing an error so your function never gets to return false which stops the form from submitting.

There is no element with that ID. You need to add that ID to that element.

<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Mon test</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <link href="/CSS/StyleAccueil.css" rel="stylesheet" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

  <script type="text/javascript">
    function valide_GSM() {
      alert("Ca fonctionne");
      document.getElementById("txtGSM").focus();
      return false;
    }
  </script>
</head>

<body>
  <form method="post" onsubmit="return valide_GSM();">
    <table class="tableauInscription">
      <tr>
        <td colspan="2">
          <h3 style="text-align:center;">Formulaire d'inscription</h3>
        </td>
      </tr>

      <tr>
        <td class="coteGauche">Prenom :</td>
        <td><input type="TextBox" name="txtPrenom" CssClass="form-control" placeholder="Prenom"></td>
      </tr>

      <tr>
        <td class="coteGauche">Nom :</td>
        <td><input type="TextBox" name="txtNom" CssClass="form-control" placeholder="Nom"></td>
      </tr>

      <tr>
        <td class="coteGauche">Adresse email :</td>
        <td><input type="email" name="txtAdresseMail" CssClass="form-control" placeholder="Adresse email"></td>
      </tr>

      <tr>
        <td class="coteGauche">GSM min 7 :</td>
        <td><input type="TextBox" name="txtGSM" id="txtGSM" CssClass="form-control" placeholder="GSM" minlength="7"></td>
      </tr>

      <tr>
        <td class="coteGauche">Identifiant :</td>
        <td><input type="TextBox" name="txtIdentifiant" CssClass="form-control" placeholder="Identifiant"></td>
      </tr>

      <tr>
        <td class="coteGauche">Mot de passe : </td>
        <td><input type="Password" name="txtMotDePasse" CssClass="form-control" placeholder="Mot de passe"></td>
      </tr>

      <tr>
        <td class="coteGauche"></td>
        <td style="padding-left:33px; padding-top:10px; padding-bottom:10px;">
          <button type="submit" id="btnCreerCompte" class="btn btn-dark">Créer le compte</button></td>
      </tr>
    </table>
  </form>
</body>

</html>

Upvotes: 1

Related Questions