Partage

formulaire

12 mars 2018 à 11:42:52

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



association pour réaliser ses projets : ici

Vous êtes demandeur·se d'emploi ?
Sans diplôme post-bac ?

Devenez Développeur·se web junior

Je postule
Formation
courte
Financée
à 100%
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 AdelineDesign64 12 mars 2018 à 14:47:57

association pour réaliser ses projets : ici
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

Voir une araignée c'est rien ... Le pire c'est quand tu ne la vois plus !
12 mars 2018 à 17:10:16

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 AdelineDesign64 12 mars 2018 à 17:37:14

association pour réaliser ses projets : ici

formulaire

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
  • Editeur
  • Markdown