redirection formulaire DIV

Version imprimable

18/03/2012, 18h00
speedylol

redirection formulaire DIV
Bonjour je recherche le moyens quand je valide mon formulaire rester en les DIV cela serait il possible svp?

une idée car je fait cela pour envoyer sur une autre page et je recherche le moyens de rester entre des div ??
Code:

1 2 3 4 5 echo'<script type="text/javascript"> $(document).ready(function() { $(location).attr("href","compte.php?idm='.$_SESSION['idm'].'"); }); </script>';
18/03/2012, 21h47
ABCIWEB

Citation:

Envoyé par speedylol

une idée car je fait cela pour envoyer sur une autre page et je recherche le moyens de rester entre des div ??

C'est pas clair et paraît à première vue contradictoire. Cela dit si tu veux cibler le positionnement dans ta page tu peux utiliser les ancres html... mais bon je suis pas certain d'avoir bien compris ton pb.
19/03/2012, 17h52
speedylol

bonjour en fait quand tu click sur submit que le ficher reste entre les div ???
19/03/2012, 18h09
ABCIWEB

Soit tu utilises ajax pour ne pas recharger la page suite au submit, soit tu recharges la page et tu peux indiquer une ancre dans ton lien de redirection pour faire un positionnement vers cette ancre qui peut être l'id de ton premier div.
19/03/2012, 20h21
speedylol

bonjour je vois ce que tu veux dire le soucis je vois pas très bien comment le mettre en œuvre ?

je viens de trouver cela

Code:

1
2
3
4
5
6
7
8
/* Une fois la page chargée */
$(document).ready(function(){
        //Application du chargement ajax simple sur tous les liens se trouvant dans le conteneur "menu1"
        $("#menu1 a").click(function(){
                ajax_page('#swithcontenu','<p style="text-align: center">Chargement ...</p>',this.href);
                return false;
        });
});

Avec ajax tu peux envoyer le formulaire vers une page donnée sans que la page soit rechargée donc tu reste visuellement au même endroit dans ta page. Tu peux éventuellement te servir ensuite du retour de ta requête ajax pour l'intégrer dans ta page mais ce n'est pas obligatoire.

Pour ajax avec jquery c'est ici. Il y a aussi des formes courtes (raccourcis pré configuré) de cette même fonction ici

Il faudra bien entendu envoyer le contenu des champs de ton formulaire via le paramètre "data" de ces fonctions. Et pour récupérer les inputs on utilise souvent "serialize".
Donc si tu n'as pas besoin d'exploiter le retour de la requête et en employant la méthode post (raccourci de la fonction ajax) le code de ta requête pourrait ressembler à l'exemple

Citation:

$.post("test.php", $("#testform").serialize());

donné dans le lien ci-dessus.

Il faudra aussi bien entendu lier ton bouton submit à l'exécution de cette requête comme dans le dernier exemple (toujours dans mon second lien).

En faisant une petite synthèse de ces deux exemples pour l'adapter à un envoi de formulaire (sans utiliser le retour de la requête), cela donne :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Document sans titre</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(function(){ $("#searchForm").submit(function(event) { /* stop form from submitting normally */ event.preventDefault(); /* get some values from elements on the page: */ var $form = $( this ), donnees = $form.serialize(), url = $form.attr( 'action' ); /* Send the data using post */ $.post( url, donnees); }); }) </script> </head> <body> <form action="#" id="searchForm" method="post"> <input type="text" name="texte" value ="du texte" /> <input type="checkbox" name="check" value ="ok" /> <input type="submit" value="Envoyer" /> </form> </body>
Dans cet exemple j'ai mis '#' dans l'attribut "action" du formulaire pour indiquer la même page pour faciliter le test, à toi de mettre la bonne adresse.

le soucis que j'ai c'est de réalisé un popup jquery avec la validation des champs cela est ok , j'ai un autre petit soucis c'est de mettre le bouton submit à coté du cancel , je n'arrive pas

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
* { font-family: Verdana; font-size: 96%; }
label { width: 10em; float: left; }
label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }
p { clear: both; }
.submit { margin-left: 12em; }
em { font-weight: bold; padding-right: 1em; vertical-align: top; }
 
</style>
	<meta charset="utf-8">
	<title>jQuery UI Dialog - Animation</title>
<script type="text/javascript" src="validation.js"></script>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.6.2.js"></script>
	<script src="../../external/jquery.bgiframe-2.1.2.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.mouse.js"></script>
	<script src="../../ui/jquery.ui.draggable.js"></script>
	<script src="../../ui/jquery.ui.position.js"></script>
	<script src="../../ui/jquery.ui.resizable.js"></script>
	<script src="../../ui/jquery.ui.dialog.js"></script>
	<script src="../../ui/jquery.effects.core.js"></script>
	<script src="../../ui/jquery.effects.blind.js"></script>
	<script src="../../ui/jquery.effects.explode.js"></script>
 
    <script type="text/javascript" src="jquery.validate.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<script>
	// increase the default animation speed to exaggerate the effect
	$.fx.speeds._default = 1000;
	$(function() {
		$( "#dialog" ).dialog({
			autoOpen: false,
		    miniWidth: 400,
	        height: 'auto',
			show: "blind",
			hide: "explode",
						buttons: {
				Cancel: function() {
					$( this ).dialog( "close" );
				}
			}
		});
 
		$( "#opener" ).click(function() {
			$( "#dialog" ).dialog( "open" );
			return false;
		});
	});
 
	  $(document).ready(function(){
      $("#commentForm").validate();
      });
	</script>
 
 
</head>
<body>
 
<div class="demo">
 
<div id="dialog" title="Contact">
 <form class="cmxform" id="commentForm" method="get" action="">
   <p>
     <label for="cname">Name</label>
     <em>*</em><input id="cname" name="name" size="26" class="required" minlength="2" />
   </p>
   <p>
     <label for="cnumber">Telephone</label>
     <em>*</em><input id="cnumber" name="number" size="26"  class="required number" />
   </p>   
   <p>
     <label for="cemail">E-Mail</label>
     <em>*</em><input id="cemail" name="email" size="26" class="required email" />
   </p>
   <p>
     <label for="ccomment">Your comment</label>
     <em>*</em><textarea id="ccomment" name="comment" cols="22" class="required"></textarea>
   </p>
   <p>
     <input class="submit" id="submit" type="submit" value="Submit"/>
   </p>
 </form>
</div>
 
<button id="opener">Open Dialog</button>
 
</div><!-- End demo -->
 
 
 
 
</body>
</html>