formulaire par AdServ - page 1

bonjour à tous

j'ai un énorme doute. je crée un formulaire mélangeant du php et javascript ... mais mon doute est sur le bouton envoyer .... oui je sais c'est stupide certain me dirait mais bon c'est la structure final qui me semble un peu bancale ...

<!DOCTYPE html>
<html lang="fr"
      xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html"
      xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html"
      xmlns="http://www.w3.org/1999/html">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=10">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" type="text/css" href="../../../bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="../../../css/style_inscription.css">
    <title>Inscription</title>
</head>
<body>

<header>
    <nav class="navbar navbar-light bg-faded Daily_image">
        <a class="navbar-brand Daily_image" href="accueil.php">
            <div class="Daily_image">
                <img class="img-responsive" src="../../../image/Logo1_mini.jpg" alt="DailyPub">
            </div>
        </a>
    </nav>


    <nav class="navbar navbar-toggleable-md navbar-light bg-faded Daily_barre">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon">
        </span>
        </button>
        <a class="navbar-brand">
            <img src="../../../image/DP_mini.png" alt="photo_accueil" class="daily">
        </a>
        <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
            <a class="navbar-brand" href="#"></a>
            <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
                <li class="nav-item">
                    <a class="nav-link" href="accueil.php">Accueil</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="casting.php">Casting</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="client.php">Déja Client ?</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="connexion.php">Connexion</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="inscription.php">Inscription</a>
                </li>
            </ul>
        </div>
    </nav>
</header>

<article>
    <div class="container">
        <div class="row align-items-start">
            <div id="signupbox" style=" margin-top:50px" class="mainbox col-12 col-md-8 col-md-offset-2 col-sm-8 col-sm-offset-2 Inscription_DailyPub">
                <div class="panel panel-info">
                    <div class="panel-heading">
                        <div class="panel-title">FORMULAIRE D'INSCRIPTION</div>
                    </div>
                    <div class="panel-body" >
                        <form id="signupform" class="form-horizontal" role="form">
                            <div id="alert_enregist" style="display:none" class="alert alert-danger">
                                <p>
                                    Erreur:
                                </p>
                                <span>
                                </span>
                            </div>
                        <!-- RENSEIGNEMENT -->
                            <div class="form-group">
                                <label for="prenom" class="col-md-3 control-label">
                                    Prenom
                                </label>
                                <div class="col-md-9">
                                    <input type="text" class="form-control" id="prenom" name="prenom" required>
                                </div>
                                <span id='prenom_manquant'>
                                </span>
                            </div>
                            <div class="form-group">
                                <label for="nom" class="col-md-3 control-label">
                                    Nom
                                </label>
                                <div class="col-md-9">
                                    <input type="text" class="form-control" id="nom" name="nom" required>
                                </div>
                                <span id='nom_manquant'>
                                </span>
                            </div>
                            <div class="form-group">
                                <label for="adresse" class="col-md-3 control-label">
                                    Adresse
                                </label>
                                <div class="col-md-9">
                                    <input type="text" class="form-control" id="adresse" name="adresse" required>
                                </div>
                                <span id='adresse_manquant'>
                                </span>
                            </div>
                            <div class="form-group">
                                <label for="ville" class="col-md-3 control-label">
                                    Ville
                                </label>
                                <div class="col-md-9">
                                    <input type="text" class="form-control" id="ville" name="ville" required>
                                </div>
                                <span id='ville_manquant'>
                                </span>
                            </div>
                            <div class="form-group">
                                <label for="code_postal" class="col-md-4 control-label">
                                    Code Postal
                                </label>
                                <div class="col-md-9">
                                    <input type="text" class="form-control" maxlength="7" id="code_postal" name="cp" required>
                                </div>
                                <span id='code_manquant'>
                                </span>
                            </div>
                            <div class="form-group">
                                <label for="pays" class="col-md-3 control-label">
                                    Pays
                                </label>
                                <div class="col-md-9">
                                    <input type="text" class="form-control" id="pays" name="pays" required>
                                </div>
                                <span id='pays_manquant'>
                                </span>
                            </div>
                            <div class="form-group">
                                <label for="phone" class="col-md-3 control-label">
                                    Téléphone
                                </label>
                                <div class="col-md-9">
                                    <input type="text" class="form-control" id="phone" name="phone" required>
                                </div>
                                <span id='telephone_manquant'>
                                </span>
                            </div>

                            <div class="panel-heading">
                                <div class="panel-title" style="font-weight:600; margin-top:20px">IDENTIFICATION</div>
                            </div>
                            <div class="form-group">
                                <label for="email" class="col-md-3 control-label">
                                    Email
                                </label>
                                <div class="col-md-9">
                                    <input type="text" class="form-control" id="email" name="email" required>
                                </div>
                                <span id='email_manquant'>
                                </span>
                            </div>

                        <div class="form-group">
                            <label for="register_password" class="col-md-4 control-label">
                                Mot de passe
                            </label>
                            <div class="col-md-9">
                                <input type="password" id="register_password" class="form-control" name="password" required>
                            </div>
                            <span id='register_manquant'>
                            </span>
                        </div>

                        <div class="form-group">
                            <label for="confir_password" class="col-md-8 control-label">Confirmer le mot de passe</label>
                            <div class="col-md-9">
                                <input type="password" id="confir_password" class="form-control" name="psw" placeholder="Entrer le même mot de passe" required>
                            </div>
                            <span id='confir_manquant'>
                            </span>
                        </div>
                            <div class="form-group" >
                                <!-- Boutton -->
                                <div class="col-md-offset-3 col-md-9" style=" margin-top:20px;">
                                    <input type="submit" id="btn_valider" href="../../php/inscription_post.php" class="col-12 col-md-12 button_valider"  value="s'enregistrer">
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</article>

<footer class="page-footer center-on-small-only stylish-color-dark">
    <!--Copyright-->
    <div class="footer-copyright">
        <div class="container-fluid Daily_footer">
            © 2018 Dailypub . Tous droits réservés
        </div>
    </div>
</footer>


<script src="../../../jsdelivr/html5shiv.min.js"></script>
<script src="../../../jsdelivr/respond.min.js"></script>
<script src="../../../popper/popper.min.js"></script>
<script src="../../../jquery/jquery-3.2.1.min.js"></script>
<script src="../../../tether/tether.min.js"></script>
<script src="../../../bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript">
    var validation = document.getElementById('btn_valider');
    console.log(validation);
</script>
<script type="text/javascript" src="../../javascript/inscription/prenom.js"></script>
<script type="text/javascript" src="../../javascript/inscription/nom.js"></script>
<script type="text/javascript" src="../../javascript/inscription/adresse.js"></script>
<script type="text/javascript" src="../../javascript/inscription/ville.js"></script>
<script type="text/javascript" src="../../javascript/inscription/code.js"></script>
<script type="text/javascript" src="../../javascript/inscription/pays.js"></script>
<script type="text/javascript" src="../../javascript/inscription/tel.js"></script>
<script type="text/javascript" src="../../javascript/inscription/email.js"></script>
<script type="text/javascript" src="../../javascript/inscription/mdp.js"></script>
<script type="text/javascript">
    validation.addEventListener('click',f_valid);

</script>
<script type="text/javascript" src="../../javascript/inscription/prenom_v.js"></script>
<script type="text/javascript" src="../../javascript/inscription/nom_v.js"></script>
<script type="text/javascript" src="../../javascript/inscription/adresse_v.js"></script>
<script type="text/javascript" src="../../javascript/inscription/ville_v.js"></script>
<script type="text/javascript" src="../../javascript/inscription/code_v.js"></script>
<script type="text/javascript" src="../../javascript/inscription/pays_v.js"></script>
<script type="text/javascript" src="../../javascript/inscription/tel_v.js"></script>
<script type="text/javascript" src="../../javascript/inscription/email_v.js"></script>
<script type="text/javascript" src="../../javascript/inscription/mdp_v.js"></script>


</body>
</html>

Je sais il y a du javascript mais comme ma question est sur le bouton "s'enregistrer" ...

 <div class="col-md-offset-3 col-md-9" style=" margin-top:20px;">
                                    <input type="submit" id="btn_valider" href="../../php/inscription_post.php" class="col-12 col-md-12 button_valider"  value="s'enregistrer">
                                </div>

Je ne sais pas du tout si ce que j'ai fais est correcte ... faut il que je laisse le href ? ou bien faut-il que je mette un method et action ? mais dans ce cas se ne serra pas correct ?

Quelqu'un peut-il me dire ? c'est la première fois que je mélange autant de langage et cela me perd ...

Merci pour votre aide, je ne sais pas quoi faire pour se bouton car dans le navigateur il est plus ou moins signaler comme une erreur !

Merci et a bientot !

Adeline

c'est juste que j'ai beaucoup de js différent et si je le met pas dans deux dossier different cela bug ... c'est pour cela que je sépare tout ... je sais que cela fait beaucoup et c'est pas super mais bon ....

par contre j'ai un autre soucis du même genre

<section id="contact">
    <div class="container">
        <div class="row">
            <div class="col-12 col-md-7 Daily_contact">
                <h3><strong>Contacter nous !</strong></h3>
                <form action="../../php/contact.php" method="post">
                    <div class="form-group">
                        <input type="text" id="Nom" class="form-control" name="Nom" value="" placeholder="Nom">
                    </div>
                    <span id='nom_manquant'>
                    </span>
                    <div class="form-group">
                        <input type="email" id="Mail" class="form-control" name="Mail" value="" placeholder="E-mail">
                    </div>
                    <span id='email_manquant'>
                    </span>
                    <div class="form-group">
                        <input type="tel" id="Telephone" class="form-control" name="Telephone" value="" placeholder="Telephone">
                    </div>
                    <span id='tel_manquant'>
                    </span>
                    <div class="form-group">
                        <textarea class="form-control" id="message" name="" rows="3" placeholder="Message"></textarea>
                    </div>
                    <span id='message_manquant'>
                    </span>
                    <button class="btn btn-default" type="submit" name="button">
                        <input type="submit" id="btn_valider" class="button_valider" value="valider">
                    </button>
                </form>
            </div>
        </div>
    </div>
</section>

malgrès tout mes efforts mon javascript n'est pas détecter ...

en plus d'un message d'erreur javascript.

mais je réfléchit a ton idées merci =)

__________________

c'est bon ila fini par etre détecter

il me reste un dernier soucis de js mais merci beaucoup =)

-
Edité par AdServ 12 mars 2018 à 17:37:14

AdServ

12 mars 2018 à 11:42:52

Merci à tous. Vous pouvez me retrouver ici :

🌐 Visitez mon profil sur Comeup

🚀 Découvrez BeFreelancr

📱 Retrouvez-moi sur LinkedIn

Hsuissia

12 mars 2018 à 14:11:33

Bonjour Adeline.

Dans la structure normal d'HTML, non, un element de type input ne peut pas avoir un href. Il faut donc mettre une action et une méthode dans la balise form.

Qu'elle est le but recherché dans tout ça ? Il est tout a fait possible de récupérer l'evenements du submit sur un formulaire, effectué des choses avant de réellement le soumettre en javascript.

Mais que ce soit en javascript ou autre, non pas de href dans un input.

Voir une araignée c'est rien ... Le pire c'est quand tu ne la vois plus !

12 mars 2018 à 14:43:34

bonjour

ce que je cherche a faire est une sorte de vérification a tout mes formulaire (j'en ai plusieurs) grace au javascript. Sachant que mon formulaire est sur plusieurs page et que je code en php habituellement mais que tant que certaine partit du formulaire ne sont pas remplie je veux qu'on ne puisse pas y accéder.

pour simplifier :

- on clique sur le bouton qui est en html/css/bootstrap

- le javascript vérifie que tout est correctement remplie, pas de partie oublier, ect

si c'est ok on passe a la page suivante

- la page suivante permet d'envoyer, les récupérer (selon les diverse formulaire) les infos et elle est en php

merci pour l'info du imput

donc je met un form, method, post meme si j'envoie sur une autre page ? le soucis c'est que cela bloque pas la page meme si elle est pas remplie ...

--------------

bon je viens de réessayer et cela fonctionne cela bloque bien la page =) donc merci

-
Edité par AdServ 12 mars 2018 à 14:47:57

12 mars 2018 à 15:17:33

Eh bien il suffit de récupérer l'evenements du submit sur ton formulaire, et normalement tu peux empecher l'envoi du form si mal remplis

D'ailleurs, je me permet, je vois que tu as un javascript pour chaque champs ? N'est-ce pas un tantinet bourrin ? Tu pourrais avoir un javascript vérificationForm.js avec toutes les vérifs dedans non?^^ Simple suggestion

Enfin, cool si sa marche pense a passer ton sujet en résolu

12 mars 2018 à 17:10:16

formulaire

formulaire

Supprimer

Modérer

Signaler le message aux modérateurs