Validation de formulaire avec fenêtre modale

Version imprimable

03/12/2014, 19h25
cobra85

Validation de formulaire avec fenêtre modale

Bonjour,

J'ai un formulaire web et en bas de celui-ci, j'ai un bouton Ajouter. Ce bouton est un lien qui m'ouvre une fenetre popup via du code javascript avec un formulaire pour ajouter des valeurs qui sont reprisent dans une liste du formulaire principale. Ce principe fonctionne

Mais pour faire plus pro et plus propre, je souhaite le faire avec une fenetre modale. J'ai donc instancié mon code afin de pouvoir mettre ce formulaire dans la modale (contrairement à la popup, il se trouve sur la meme page de code et n'apparait qu'au déclenchement de l'action), seulement quand je valide, il me valide toute la page web et non pas juste ce petit formulaire. Si bien que je passe à l'étape d'après et il me dit que mon formulaire est vide.

Est-il possible de faire en sorte de ne valider que le formulaire de la fenetre modale et ensuite de revenir sur le principale (sans recharger ou changer de page) ou dois-je rester avec une popup pour différencier les deux formulaires ?

Merci
03/12/2014, 22h10
NoSmoking

Bonjour,
pas bien compris l'ordre/enchainement de tes opérations, il nous en faudrait surement plus pour t'aider efficacement et notamment savoir si tu soumets via la FORM ou via Ajax.

Bonjour,

Citation:

pas bien compris l'ordre/enchainement de tes opérations

En gros j'ai un formulaire (en fenetre modale) qui se superpose à un autre formulaire. L'information entrée dans le second (modale) doivent se retrouver dans une liste déroulante du premier (index.php) mais sans recharger la page.

Voici le code:

Code:

1
2
3
4
5
6
7
<form class="form-signin-bis" role="form" action="plus.php" method="post" autocomplete="off">
    <h2 class="form-signin-heading">ttre</h2>
    <OPTION>valeur1</option>
    <OPTION>valeur2</option>
    <OPTION>valeur3</option>
    <a href="valider.php" rel="0" class="newWindow"><img src="images/icon_addlink.gif" alt="image" return false/></a>
</form>

Code de la fenetre modale qui se trouve vous le code ci dessus:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="row text-center">
    <h3>The Small Modal</h3>
    <a href="#" class="btn btn-lg btn-danger" data-toggle="modal" data-target="#smallModal">Click to open Modal</a>
</div>
<div class="modal fade" id="smallModal" tabindex="-1" role="dialog" aria-labelledby="smallModal" aria-hidden="true">
      <div class="modal-dialog modal-sm">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myModalLabel">Small Modal</h4>
          </div>
          <div class="modal-body">
<form class="form-signin" action="" method="post" onsubmit="valid();">
<INPUT type="Nom du champ" value="Valeur par défaut" name="Nom de l'élément">
	<button class="btn btn-lg btn-primary btn-block" type="submit" id="id_operation" onclick="window.close();">Ajouter</button>
    <input type="hidden" name="next" value="valider" />
</form>

J'utilise c'est deux lignes pour lancer la fenetre modale, mais je peux aussi le faire en css pure

Code:

1
2
<script src="js/jquery_1_11_1.js'"></script>
 <script src="js/bootstrap.min.js"></script>

Ne faite pas trop attention au code qui là n'est pas parfait car je développe sous Django, j'ai donc remis le plus simplement possible mes deux formulaire

Merci

04/12/2014, 22h11
SylvainPV

Le mécanisme classique de soumission de formulaire implique un changement de page (vers la page renseignée par l'attribut action de la balise form). Mais on peut soumettre une requête HTTP POST avec les données du formulaire sans avoir à recharger la page, en utilisant AJAX. Connais-tu AJAX ? Il y a de très nombreux tutoriels ici à ce sujet : http://ajax.developpez.com/cours/
05/12/2014, 08h27
Bovino

Citation:

Ne faite pas trop attention au code qui là n'est pas parfait

C'est le moins qu'on puisse dire...
Que font ces balises <option> au milieu de ton code ?
Que vient faire ce return false dans la balise <a> ?

Citation:

car je développe sous Django

Je vois pas trop le rapport...

Si tu veux faire du Web, la connaissance de HTML / CSS / JavaScript est un prérequis incontournable, le langage serveur ne peut venir qu'après et son rôle est uniquement de produire du HTML et éventuellement CSS et JavaScript valide. Donc faire du Python (ou n'importe quel autre langage serveur) sans connaitre le HTML, ça ne sert strictement à rien !

Citation:

Que font ces balises <option> au milieu de ton code ?

C'est balises options me permette de faire fonctionner la liste déroulante. Un peu de cette manière là:
Code:

1 2 3 4 5 6 7 <form method="POST" action=""> <select size="1" id="cbcolor" name="cbcolor"> <option value="blanc">blanc</option> <option value="rouge">rouge</option> <option value="vert">vert</option> </select> </form>
Ensuite, je conçoit avoir quelques lacune notamment avec le Javascript. Ensuite, pour Django, c'est une obligation, même si j'aurais préféré développer en HTML/PHP.

07/12/2014, 00h57
SylvainPV

Les balises <option> doivent être mises dans une balise <select>, or ce n'est pas le cas dans ton premier code.
07/12/2014, 22h54
cobra85

Ah oui, en effet, mais l'avantage de Django, c'est qu'il y pense pour nous ;)