Discussion :

[cdossert]

Bonjour,

Après de multiple test, je désespère d'arriver à mes fins......

J'aimerai pouvoir rendre "doux" un lien ancre (c'est à dire dont la cible est sur la même page) grâce à un jquery, MAIS venant d'un formulaire.

Voici le script (qui fonctionne et c'est normal, avec un lien en href)
et moi j'aimerai pouvoir obtenir ce même type de résultat à partant d'un formulaire.
MERCI !

Code html :

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

1
2
3
4
5
6
7
8
9
10
<a id="ancre"></a>
....
 
<form id="form" name="form" method="post" action="#ancre">
<label for="question">- Question ?</label>
<select name="question" onchange="this.form.submit();">
<option value="non">Non</option>
<option value="oui">Oui</option>
</select>
</form>

Et le script de base que je ne sais plus du tout par quel bout de prendre afin de l'adapter à un lien venant d'un formulaire :

Code :

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

1
2
3
4
5
6
7
8
$('a[href^="#"]').click(function(){
	var the_id = $(this).attr("href");
 
	$('html, body').animate({
		scrollTop:$(the_id).offset().top
	}, 'slow');
	return false;
});

[danielhagnoul]

Code :

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

<form id="form" name="form" method="post" action="#ancre">

Form, attribut "action" : L'URI du programme qui traitera les informations soumises par le formulaire.

Code :

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

<select name="question" onchange="this.form.submit();">

Provoquera la soumission du formulaire avec la méthode "post" à l'URI contenue dans l'attribut "action" et le rechargement de la page web !

Il faut effectuer le déplacement vers l'ancre, soumettre le formulaire par l'intermédiaire d'une transaction AJAX et bloquer le rechargement de la page par un "return false;"

Exemple :

Code css :

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

#ancre { margin-top: 600px; }

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
<form id="maForm">
  <label for="question">- Question ?</label>
  <select name="question">
    <option value="non">Non</option>
    <option value="oui">Oui</option>
  </select>
  <input type="submit" value="Envoyer">
</form>
 
<div id="ancre">
  <p>La suite...</p>
</div>

Code javascript :

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
<script>
  "use strict";
 
  $( function(){ // forme abrégée de $(document).ready( function( ){
 
    $( "#maForm" ).on( "submit", function(){
 
      $( 'html, body' ).animate({
        "scrollTop" : $( "#ancre" ).offset().top
      }, 'slow' );
 
      var
        str = $( this ).serialize(),
        jqXHR = $.post( "monFichier.php", str );
 
      setTimeout( function(){
        // Si l'objet différé existe dans l'état "attendre", 
        // alors exécute la méthode fail()
 
        if ( jqXHR && jqXHR.state() === "pending" ){
          jqXHR.abort();
        }
      }, 3000 ); // 3s
 
      jqXHR.done( function( data, textStatus, jqXHR ){
        // succès de la transaction, on doit traiter le contenu de data
        console.log( data, textStatus, jqXHR );
 
      });
 
      jqXHR.fail( function( jqXHR, textStatus, errorThrown ){
        // échec de la transaction, gérer la catastrophe
        console.log( jqXHR, textStatus, errorThrown );
 
      });
 
      jqXHR.always( function( jqXHR, textStatus ){
        // la transaction est terminée
        // nettoyage
        // exécution d'un code dépendant
        console.log( jqXHR, textStatus );
 
      });
 
      return false;
    });
 
  });
</script>

[cdossert]

Merci pour ton aide ;-)