ajax sur onclick

Version imprimable

ajax sur onclick

Bonjour, je débute dans le monde de jquery, et j'aimerais trouver comment modifier une fonction trouvé sur le web qui envoie des requetes a une page search.php dès que je tape quelque chose dans un formulaire (champ texte).

Voici la partie jquery:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
    <script type='text/javascript'> 
      $(document).ready(function(){ 
      $("#search_results").slideUp(); 
          $("#search_button").click(function(e){ 
              e.preventDefault(); 
              ajax_search(); 
          }); 
          $("#search_term").keyup(function(e){ 
              e.preventDefault(); 
              ajax_search(); 
          }); 
      });
 
      function ajax_search(){ 
        $("#search_results").show(); 
        var search_val=$("#search_term").val(); 
        $.post("templates/search.php", {search_term : search_val}, function(data){
         if (data.length>0){ 
           $("#search_results").html(data); 
         } 
        }) 
      } 
    </script>

et mon formulaire html:

Code:

1
2
3
4
5
6
7
8
9
10
11
<h1>My Search</h1> 
 
    <form id="searchform" method="post"> 
      <div> 
          <label for="search_term">Search name/phone</label> 
          <input type="text" name="search_term" id="search_term" /> 
          <input type="submit" value="search" id="search_button" /> 
       </div> 
    </form>
 
    <div id="search_results"></div>

J'aimerais qu'aucune action ne soit faite avant que je ne clique le bouton search. Mais avec ce code cela ne fonctionne pas et continu a envoyer des requetes vers ma page search.php dès que je tape une lettre ou un chiffre.

Quelqu'un aurait une solution?

Je crois que j'ai trouvé mon problème:

J'ai enlever cette partie de code:

Code:

1
2
3
4
          $("#search_term").keyup(function(e){ 
              e.preventDefault(); 
              ajax_search(); 
          });

:roll:

Bonjour.

Exemple (on affiche la frappe, mais on n'exécute que lors du submit) :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function ajax_search(){ 
	$.post("templates/search.php", {search_term : $("#search_term").val()}, function(data){
		if (data.length > 0){ 
			$("#search_results").html(data); 
		} 
	});
}
 
$(function(){
	$("#search_results").slideUp();
 
	$("#search_term").keyup(function(e){ 
		e.preventDefault();
		$("#search_results").show().text($("#search_term").val());
	});
 
	$("#searchform").submit(ajax_search);
});

Bonjour, je n'ai pas vraiment besoin de voir ce que je tappe dans le search box apparaitre dans le div au fur et à mesure que j'entre un chiffre donc je crois que le code suivant serait ok:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
      $(document).ready(function(){  
          $("#search_submit").click(function(e){ 
              e.preventDefault(); 
              ajax_search(); 
          });  
      });
 
      function ajax_search(){ 
        $("#search_results").show(); 
        var search_val=$("#search_term").val(); 
        $.post("templates/search.php", {search_term : search_val}, function(data){
         if (data.length>0){ 
           $("#search_results").html(data); 
         }
        }) 
      }

Par contre je me demandais comment afficher une image type loader pendant que ma recherche s'effectue (avant d'afficher le résultat)?