[AJAX] envoi du formulaire lors du click

**fazpedro** · 27/09/2011, 14h37

Bonjour,
j'ai un formulaire en Ajax qui fonctionne bien mais je voudrais l'améliorer :
si l'utilisateur "clique" sur la phrase trouvée, je souhaite que l'action "submit" se fasse directement sans être obligé de cliquer sur le bouton "Envoyer", bref avoir le même genre que la recherche dans Google par exemple...
Merci.

agenda.php :

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
<?php session_start();
$nompage = "agenda.php";
require("configuration.php");
$sql = connect_sql();
$sql2 = detection_mobile();
$sql3 = bandeau_detection();
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />	
<title><?php echo $nom_site ?></title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="jquery-1.2.1.pack.js"></script>
<script type="text/javascript">
	function lookup(inputString) {	if(inputString.length == 0) { // si le champs txte est vide
			$('#suggestions').hide(); // on cache les suggestions
		} else { // sinon
			$.post("ajax_ev.php", {queryString: ""+inputString+""}, function(data){ 
			// on envoie la valeur du champ texte dans la variable post queryString au fichier ajax_ev.php
				if(data.length >0) {
					$('#suggestions').show(); // si il y a un retour, on affiche la liste
					$('#autoSuggestionsList').html(data); // et on remplit la liste des données
					} }); 		}	}
	function fill(thisValue) { // remplir le champ texte si une suggestion est cliquée
		$('#inputString').val(thisValue);
		setTimeout("$('#suggestions').hide();", 200); }
	$(document).ready( function () {
		$("input#inputString").keyup( function() { // si on presse une touche du clavier en étant dans le champ texte qui a pour id inputString
			lookup($(this).val()) 		});
		$("input#inputString").blur( function() { // si le champ texte perd le focus
			fill() 		});	});
</script>
</head>
<body>
<?php include($bandeau); ?> <!-- insère le bandeau principal en haut en fonction de la connexion -->
<div id="mainContent">
<br />	<?php include('moteur_de_recherche.php'); ?> <!-- insère le moteur de recherche par artiste  -->
</div>
<?php mysql_close($sql); //On se deconnecte ?>
<?php include('bas_de_page.php'); ?> <!-- insère le bas de page  -->
</body>
</html>

moteur_de_recherche.php :

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
<form method="post" action="recherche_interne.php">
<fieldset>
<br />
<legend> &nbsp; Recherche par artiste &nbsp; </legend>
<br /><br />
<label>Nom : </label>
<br />
<input type="text" tabindex ="1" name="recherche" class="ev" value="" id="inputString" onfocus="this.className='ev_focus';" onblur="this.className='ev';
valide(this, 'err_mdp');" class="ev" /><!--  champ texte à analyser pour les suggestions -->
<br />
 <div class="suggestionsBox" id="suggestions" style="display: none;"> <!-- bloc contenant les eventuelles suggestions -->
<div class="suggestionList" id="autoSuggestionsList"><!-- liste contenant les suggestions -->
</div>
</div>
<br /><br />
<input type="submit" tabindex ="2" value="Rechercher" />
</fieldset>
</form>

ajax_ev.php :

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
<?php
require("configuration.php");
$sql = connect_sql();
mysql_query("SET NAMES utf8");
// si une variable queryString a été posté
if(isset($_POST['queryString'])) 
{
// si la longueur du contenu de la variable est superieur à 0
	$queryString = ($_POST['queryString']);				// recupere la valeur saisie avant
	if(strlen($queryString) >0)
		{
			$chaine_post_recupere	= stripslashes($_POST['queryString']);				// recupere la valeur saisie
			$chaine_pour_requete_ajax 	= mysql_real_escape_string($chaine_post_recupere);	// valeur avec protection contre injections sql
			$chaine_pour_requete 	= stripslashes($chaine_pour_requete_ajax);				// valeur a afficher sans les slashes & cie...
 
			// requete sql à personnaliser pour correspondre à votre base de données
			$result = mysql_query("SELECT * FROM evenement WHERE nom LIKE '%$chaine_pour_requete%' LIMIT 15");
			if($result) 
			{	// on parcourt les resultats
				while($nom = mysql_fetch_array($result)) 
					{
						// on affiche les resultats dans un element de liste en ajoutant la fonction fill sur l'evenenement onClick
						echo '<li onClick="fill(\''.$nom["nom"].'\');">'.stripslashes($nom["nom"]).'</li>';
					}
			} 
			else 	
				{
					echo '';
				}
		}
		else
			{
				echo '';
			}
}
else
	{
		echo 'Il ne devrait pas avoir un accès direct à ce script !!!';
	}
?>

Invité · 27/09/2011, 17h14

Bonjour,
il suffit de mettre (là où tu veux) :

Code :

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

onclick="javascript: submit();"

**fazpedro** · 27/09/2011, 18h12

j'ai essayé de mettre à plusieurs endroits mais rien ne se passe

,
où dois-je le mettre exactement ?
Merci...

Invité · 28/09/2011, 08h18

Bonjour,
En fait tu veux que AJAX soit déclenché a chaque mouvement sur un input

Et tu site "comme google" , cela s'appelle de l'autocomplementation,
Par exemple si tu as des noms de pays dans un des input tu écrirais
ajax.php

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
 
<?php
session_start();
header('Content-type: text/html; charset=ISO-8859-1');
?>
<script type="text/javascript">
<!--
function Capter(lui)
{
document.LeForm.pays.value=lui;
}
function maFonctionAjax(pays)
{
  if(pays.length != 0)
  {
   var MonAjax;
   if (window.XMLHttpRequest){ MonAjax = new XMLHttpRequest();}
    else if (window.ActiveXObject) {MonAjax = new ActiveXObject('Microsoft.XMLHTTP');}
     else
     {
      alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
      MonAjax = false;
     }
   MonAjax.open('POST',"ajax_sql.php",true);
   MonAjax.onreadystatechange = function()
    {
     if (MonAjax.readyState == 4 && MonAjax.status==200)
      {
       if (document.getElementById) 
        {    
         if (MonAjax.responseText !='')
          {
           document.getElementById('LaReponse').innerHTML="<ul>"+MonAjax.responseText+"</ul>";
          }
           else { document.getElementById('LaReponse').innerHTML=''; }
        }     
      }
    }
   MonAjax.setRequestHeader('Content-type','application/x-www-form-urlencoded');
   MonAjax.send('pays='+pays);
  } 
}
//-->
</script>
 
<br /><br /><br />
<form method='post'  action='#' id='LeForm' name='LeForm'>
Le Pays:  <input name='pays' id='pays' type='text' autocomplete='off'  onkeyup='maFonctionAjax(this.value);return false;' value=''  ><br />
<input type='submit' value='envoyer'  /><br />
</form>
<br /><br /><div class='LaReponse' id='LaReponse'> </div><br /><br />
</body></html>

Et le php appelé lui va lire mysql et repondre
ajax_sql.php

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
 
<?php
header('Content-type: text/html; charset=ISO-8859-1');
$pays = (isset($_POST['pays'])) ? $_POST['pays'] : '';
if(strlen($pays) >0)
  {
  $LeBuf="";
  $Flag1=mysql_connect("localhost","root","");
 $Flag2=mysql_select_db("tabase"); 
  $result=mysql_query( "select nom from ajax_pays WHERE nom  LIKE '$pays%' LIMIT 10");
 while ($row=mysql_fetch_array($result)) 
  {
    $rowx=$row['nom'];
    $LeBuf .="<li  onClick=\"Capter('".$rowx."');\">".$rowx."</li>";
  }
  echo $LeBuf;
  }
?>

**fazpedro** · 28/09/2011, 11h49

@ christele_r :
j'ai essayé ton code mais cela fait la même chose...

mon autocomplétation fonctionne déjà mais je voudrais qu'en cliquant sur l'un des résultats dans les suggestions, j'obtienne directement la liste des résultats "comme Google" sans avoir à cliquer sur le bouton...

Invité · 28/09/2011, 12h10

J'espéres que tu as gardé
$LeBuf .="<li onClick=\"Capter('".$rowx."');\">".$rowx."</li>";

et bien sur dans le AJAX

Code :

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

1
2
3
4
5
 
function Capter(lui)
{
document.LeForm.pays.value=lui;
}

Ce qui fait exactement ce que tu souhaites !

[AJAX] envoi du formulaire lors du click

AJAX

Vue hybride

Discussions similaires

Partager

Partager