Forum : Soumission formulaire js

Bonjour, je rencontre un léger souci avec un formulaire sur une page modale,
en effet, lorsque je valide celui-ci, il ignore tout simplement le script que je lui demande de faire (basiquement, ne pas soumettre le formulaire directement et donc ne pas faire la redirection)

Voici le code de la page

<div id="New" class="panel panel-info col-md-offset-3 col-md-6">
    <div class="col-md-offset-1 jumbotron">
        <div class="container-fluid">
            <h1> Votre session a expirée </h1>
            <p> Veuillez cliquer sur ce lien afin de vous reconnecter à l'application</p>
            <center>
                <button data-toggle="modal" href="#infos" data-backdrop="false" class="btn btn-primary">Se reconnecter</button>
            </center>
                <div class="modal" id="infos">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <center>
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal">x</button>
                                    <h4 class="modal-title">Reconnexion</h4>
                                </div>
                                <div class="modal-body">
                                    <form id="reconnexion" method="post" action="../Controler/controler_connexion.php">
                                    <div class="alert">
                                        <div id="reponse"></div>
                                    </div>
                                    <div class="clearfix">
                                      <div class="form-group form-inline">
                                        <label for="Login" class="label-control col-md-offset-2 col-md-4"> NNI : </label>
                                        <input type="text" class="form-control  col-md-4" name="login" id="login" placeholder="NNI" required> 
                                      </div>
                                    </div></br>
                                    <div class="clearfix">
                                      <div class="form-group form-inline">
                                        <label for="mail" class="label-control col-md-offset-2 col-md-4"> Mot de passe: </label>
                                        <input type="password" class="form-control  col-md-4" name="password" placeholder="Mot de passe" required>
                                      </div>
                                    </div></br>
                                    <button type="submit" class="btn btn-primary">Envoyer</button>
                                  </form>
                                </div>
                                <div class="modal-footer">
                                    <button class="btn btn-info" data-dismiss="modal">Fermer</button>
                                </div>
                                </center>
                        </div>
                    </div>
                </div>
        </div>
    </div>
</div>
<script type="text/javascript">
$(document).ready(function () {
    $('#reconnexion').submit(function(e){
        e.preventDefault();

    });
});
</script>
><script src="JQuery/jquery.js"></script>
<script src="css/bootstrap/bootstrap.min.js"></script>
<script src="javascript/index.js"></script>

merci par avance

13 réponses

alariel29

Auteur

Réponse acceptée

du coup, j'ai mis

$(document).ready(function () {
     $('#reconnexion').submit(function(e){
        e.preventDefault();
        console.log("tyo");
    });
});

à la fin d'un fichier .js contenant mes scripts et cela a fonctionné je ne sais pas pourquoi ^^

betaWeb

Salut,

Rajoute un return false; a la fin du callback de la fonction submit();

alariel29

Auteur

aucun changement, quand je soumet le formulaire, je suis toujours redirigé vers la page demandé dans l'action

betaWeb

A ce moment là, retire l'attribut 'action' et précise le au niveau de ton JS (si tu veux tout de même le garder dans ton html, remplace 'action' par 'data-action') :

<form id="reconnexion" data-method="post" data-action="../Controler/controler_connexion.php">
                                    <div class="alert">
                                        <div id="reponse"></div>
                                    </div>
                                    <div class="clearfix">
                                      <div class="form-group form-inline">
                                        <label for="Login" class="label-control col-md-offset-2 col-md-4"> NNI : </label>
                                        <input type="text" class="form-control  col-md-4" name="login" id="login" placeholder="NNI" required> 
                                      </div>
                                    </div></br>
                                    <div class="clearfix">
                                      <div class="form-group form-inline">
                                        <label for="mail" class="label-control col-md-offset-2 col-md-4"> Mot de passe: </label>
                                        <input type="password" class="form-control  col-md-4" name="password" placeholder="Mot de passe" required>
                                      </div>
                                    </div></br>
                                    <button type="submit" class="btn btn-primary">Envoyer</button>
                                  </form>

                         <script type="text/javascript">
$(document).ready(function () {
    $('#reconnexion').submit(function(e){
        e.preventDefault();
        var $form = $(this);
        var method = $form.data('method') || $form.attr('data-method'),
               action   = $form.data('action') || $form.attr('data-action');

        console.log(method, action);

        return false;
    });
});
</script>

alariel29

Auteur

le fait de mettre en data action fait qu'il n'y a pas de redirection mais un rechargement de la page,
le problème réel est que le e.preventDefault() du script n'est pas exécuté

alariel29

Auteur

le message dans la console m'indique "$ is not define" en parlant du $('#reconnexion')

betaWeb

Tu as chargé jQuery au moins ???

alariel29

Auteur

oui, jquery est bien chargé puisque j'arrive a afficher la fenêtre modale dans lequel est présent le formulaire.
la page contenant le code posté ci-dessus est appelé par cette page ci :

`<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
  <head>
    <title>Accueil Castor</title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
      <link href="../css/bootstrap/bootstrap.min.css" type="text/css" rel="stylesheet">
    <link href="../css/style.css" type="text/css" rel="stylesheet">
    <link href="../css/bootstrap/bootstrap-table.min.css" type="text/css" rel="stylesheet">
  </head>
<header id="header">
<?php  
    include('../Header/headerMenu.php');
  ?>
</header> </br></br>
  <body>
    <div class="tab-content">
      <div class="tab-pane active fade in" id="accueil"><?php include('../Controler/controler_accueil.php'); ?></div>
      <div class="tab-pane fade " id="boiteDemande"><?php include('../Controler/controler_boite_a_demandes.php'); ?></div>
      <!--<div class="tab-pane fade " id="administration"><?php include(''); ?></div>
      <div class="tab-pane fade " id="statistique"><?php include(''); ?></div>
      <div class="tab-pane fade " id="contacter"><?php include(''); ?></div>
      <div class="tab-pane fade " id="compte"><?php include(''); ?></div>

      <div class="tab-pane fade " id="mesDemandes"><?php include(''); ?></div>
      <div class="tab-pane fade " id="transfert"><?php include(''); ?></div>
      <div class="tab-pane fade " id="archive"><?php include(''); ?></div>
      <div class="tab-pane fade " id="selectionDemande"><?php include(''); ?></div>
      <div class="tab-pane fade " id="deconnexion"><?php include(''); ?></div>
      <div class="tab-pane fade " id="creationDemande"><?php include(''); ?></div>-->
    </div>
  </body>
<script src="../JQuery/jquery.js"></script>
<script src="../css/bootstrap/bootstrap.min.js"></script>
<script src="../css/bootstrap/bootstrap-table.min.js"></script>
<script src="../javascript/index.js"></script>
</html>

betaWeb

Le bout de script pour lequel je t'ai donné une solution, il te faut l'inclure à la toute fin de page, après la ligne <script src="../javascript/index.js"></script>

Huggy

Le jquery est chargé après le $(document).ready ...
Le fait que ta boite modale fonctionne ne prouve rien

betaWeb

@Boris Baskovec J'y avais aussi pensé, mais il n'y a normalement pas de raison puisque jQuery est inclu dans sa page.
Cela dit, ça vaut le coup d'essayer ;)

betaWeb

Ca a fonctionné parce que tu as mis ton script APRES avoir inclu jQuery ! Si tu le met avant d'inclure jQuery ça ne fonctionne évidemment pas. C'est comme essayer de rouler avec une voiture ayant le réservoir vide AVANT de mettre de l'essence : forcément elle ne démarrera pas ;)

alariel29

Auteur

non, il y a aucune raison pour que cela fonctionne maintenant ^^ j'ai juste réessayé le code tel qu'il était la première fois que je l'ai écris, sans rien d'autre ajouté ^^