2 formulaires dans un fichier HTML possible ?

Par Parad0xJ, il y a 7 ans

Les bases HTML/CSS

Bonjour,

Voila je rencontre un petit problème avec mon code.

Ce que je fais

Je fais une petite application en javascript avec bootstrap 3.3.7, dans mon application j'ai deux balises form. Tant que j'en avais qu'une tout roulais normalement, la seconde me fais scratcher mon application, je n'ai aucune erreur console. quand je soumet le premier formulaire qui est censé valider et afficher un avis et une note utilisateur, rien ne s'affiche et mon fichier se relance comme si j'actualisais la page . Dés que j'enlève la seconde balise form tout rentre dans l'ordre.
Je precise que mes balises form sont uniquement destiné côté client, donc pas d'attibuts methode et action, j'ai lu que le problème pourrait venir d'un mauvais balisage html5, j'ai passé mon code au validateur 3w, il n'y a pas d'erreur majeur, pouvez vous me dire d'ou peux venir le problème ?
voici tout le body de mon code

<body id='pageTop'> <div class="container-fluid"> <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" id='titreNavBar' href="#page-top">Avis & Restaurants !</a> <button id='ajoutResto' type="button" data-toggle='collapse' data-target='#monCollapse' aria-expanded='false' aria-controls='monCollapse' class="btn btn-default navbar-btn">Ajouter un Restaurant</button> </div> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="hidden"> <a href="#page-top"></a> </li> </ul> </div> </div> </nav> <!--FIn navigation--> <!-- formulaire 2--> <!--Formulaire Ajout de Restaurant--> <div id="monCollapse" class='collapse'> <div class="well"> <form id='formulaireAjoutResto' name='formulaireAjoutResto' class="form-horizontal"> <div class="form-group"> <label class="col-md-4">Nom du Restaurant</label> <div class="col-md-6"> <input id="textinput" name="textinput" placeholder="nom du restaurant ici" class="form-control input-md" required="" type="text"> </div> </div> <div class="form-group"> <label class="col-md-4">Cherchez l'adresse</label> <div class="col-md-6"> <input id="searchinput" name="searchinput" placeholder="Entrez une adresse ici" class="controls form-control input-md" required=""> </div> </div> <div class="form-group "> <label class="col-md-4">Ajouter le restaurant</label> <div class="col-md-4"> <button type='submit' id="singlebutton" name="singlebutton" class="btn btn-primary">Ajouter</button> </div> </div> </form> </div> </div>--> <!--FIN formulaire ajout Resto--> <section id="principaleSecction" class="row"> <div class="col-lg-8" id='asideGauche'> <div id='map'></div> </div> <!--Aside droite--> <div class='col-lg-4' id="asideDroite "> <div id="droite_sous_section_1"></div> <div id="droite_sous_section_2"></div> <div id="droite_sous_section_3"></div> </div> </section> <!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true" class="xClose">&times;</span> </button> <h4 class="modal-title text-center" id="myModalLabel">Modal title</h4> </div> <div class="modal-body" id="corpModal"> </div> <div id="imageModal"></div> <div class="modal-footer" id="footerModal"> <button type='button' id='ajoutComm' class='btn btn-primary'>Ajouter un commentaire</button> <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button> </div> <div class=" well hidden " id='divHidden'> <!-- formulaire 1--> <form id='formulaireAjoutComm' name='formulaireAjoutComm'> <div class="form-group"> <label class="control-label">Note :</label> <br> <label class="radio-inline"> <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="1 étoiles"> 1 </label> <label class="radio-inline"> <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="2 étoiles"> 2 </label> <label class="radio-inline"> <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="3 étoiles"> 3 </label> <label class="radio-inline"> <input type="radio" name="inlineRadioOptions" id="inlineRadio4" value="4 étoiles"> 4 </label> <label class="radio-inline"> <input type="radio" name="inlineRadioOptions" id="inlineRadio5" value="5 étoiles"> 5 </label> </div> <div class="form-group"> <label for="message-text" class="control-label ">Commentaire :</label> <textarea class="form-control" id="message-text"></textarea> </div> <input type="submit" name='validationForm' class="btn btn-primary" Value='Valider'> </form> <div class="modal-footer" id="footer_div_hidden"> <button id='close_div_hidden' type='button' class='btn btn-danger'>Close</button> </div> </div> <!--End div hidden commentaire--> </div> </div> </div> <!--End Modal window--> </div> <!--End container--> <footer class='footer'> </footer> <script src="../js/ajaxGet.js "></script> <script src="../js/jquery-3.3.1.js "></script> <script src="../bootstrap-3.3.7/dist/js/bootstrap.js "></script> <script src="../js/main.js "></script> <script src="https://maps.googleapis.com/maps/api/js?key=myApiKey&callback=initMap&libraries=places " async defer></script> </body>

Ce que je veux

Pouvez vous me dire si quelque chose ne va pas le formulaire 1 seul est celui qui marche parfaitement le deux est celui qui empeche le 1 de fonctionner, merci de votre aide

Ce que j'obtiens

Décrivez ici vos erreurs ou ce que vous obtenez à la place de ce que vous attendez :(

9 réponses

Laznet, il y a 7 ans

Bonsoir,

Pourrais-tu être plus précis quand tu dis "scratcher mon application" (j'ai bien compris que tu voulais dire Crasher.. mais qu'est ce qu'il se passes exactement..)

Est-ce que tu pourrais aussi nous montrer ton code JS, parce que si la page s'actualise c'est que tu dois empêcher l'évènement, avec un preventDefault.

Parad0xJ, il y a 7 ans
var form = document.querySelector('form'); form.addEventListener('submit', function (e) { e.preventDefault(); var choixUser = form.elements.inlineRadioOptions.value; var message = document.getElementById('message-text').value; document.getElementById('avisSupUser').insertAdjacentHTML('afterend', '<br>' + '<b>' + 'Note : ' + '</b>' + choixUser + '<br>' + '<b>' + 'Avis : ' + '</b>' + message + '<br><hr class="separation"> '); //Suppression des données à l'envoie du comm. form.reset(); });

En faite oui c'est même pas crasher d'ailleurs c'est juste que ce qui devrais s'afficher ne s'affiche pas et que la page se recharge toute seule. Effectivement j'empeche l'evenement avec un e.preventDefault mon code compte 500 lignes c'est compliqué.
Y a rien d'extraordinaire en js je recupere juste les valeurs dont j'ai besoin tout fonctionne très bien si j'enleve le second formulaire avec plus rien ne fonctionne

Laznet, il y a 7 ans

Quand tu parles du second formulaire tu parles du second dans le code (donc techniquement le 1er) ou le second le formulaire 2 xD

PS : tu as oublié de mettre un type pour ton input de recherche d'adresse

Parad0xJ, il y a 7 ans

je ne suis pas précis tu as raison je parle du premier car le second je viens de le rajouter mais le 1er celui qui a été codé en premier c'est le second dans le fichier HTML et le premier dans le fichier HTML c'est celui que je viens de rajouter donc premier dans le fichier mais en réalité second en terme de codage. Je cherche depuis tout l'aprés midi. Il semble d'aprés ce que je peux lire que le problème viendrais d'un HTML mal imbriqué apparement quand tu as plus d'un form ton code doit ëtre extrément bien placé et balisé en html 5. Mais c'est la première fois que je mets plus d'un formulaire donc je sais pas plus.

Edit : Ah oui effectivement c'est un type search je vais le rajouter, j'ai du l'effacer je vais voir si ça arrange la situation
Edit 2 : non toujours pareil je vais essayer de déplacer le code je suis sûr que c'est ça qui ne va pas

Laznet, il y a 7 ans

Dans ton JS tu essaye de sélectionner un formulaire, sauf que vu que tu sélectionne avec le selecteur "form" c'est comme si tu sélectionnais les deux.
Fais un console.log de form et tu verras

Parad0xJ, il y a 7 ans

Oui parce que j'ai lu sur stackOverflow que quand tu as deux form en js le submit ne se trompe pas il sait de quoi il s'agit même si il y en a deux. Le console log me retourne le formulaire le plus haut dans le html soit le second codé ou le premier dans le fichier si tu veux
resultat console.log:

<form id="formulaireAjoutResto" class="form-horizontal" name="formulaireAjoutResto">
Parad0xJ, il y a 7 ans

J'ai toujours pas trouvé le problème si quelqu'un à une idée je suis preneur merci
EDIT : J'ai trouvé la réponse le jour même il suffit de lire le Post en entier Merci.

Parad0xJ, il y a 7 ans

j'ai trouvé la solution d'abord je me suis trompé de forum il ne s'agit pas d'un problème HTML comme je le pensais mais un problème javascript. Quand vous avez plusieirs formulaires dans votre HTML, vous devez y acceder comme ça --->

document.forms[0] pour le suivant document.forms[1]

. et voilà là plus de problème/ si ça peu servir un jour !!

Pierrot01, il y a 7 ans

Salut,
Il suffit juste de lire la doc ;)

element = document.querySelector(selecteurs);

Valeur retournée
Un objet Element représentant le premier élément dans le document qui corresponde au jeu de sélecteurs CSS spécifié.

Si vous avez besoin d'une liste de tous les éléments correspondant aux sélecteurs spécifiés, vous devez utiliser querySelectorAll() à la place.

je n'ai aucun mérite :D
je n'ai fais qu'un copier/coller de la doc

@plus

Bon courage.