redirection formulaire DIV

**speedylol** · 18/03/2012, 18h00

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**ABCIWEB** · 18/03/2012, 21h47

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.

**speedylol** · 19/03/2012, 17h52

bonjour en fait quand tu click sur submit que le ficher reste entre les div ???

**ABCIWEB** · 19/03/2012, 18h09

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.

**speedylol** · 19/03/2012, 20h21

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

**speedylol** · 19/03/2012, 20h25

je viens de trouver cela

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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;
        });
});

**ABCIWEB** · 19/03/2012, 22h58

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

$.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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**speedylol** · 26/03/2012, 21h35

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

redirection formulaire DIV

jQuery

Discussions similaires

Partager

Partager