Sujet Précédent Sujet Suivant

Activer/Désactiver un bouton Submit avec Ajax

nabmoah Messages postés 17 Date d'inscription dimanche 12 juin 2005 Statut Membre Dernière intervention 1 mai 2011 - 19 juil. 2008 à 18:17
banbanfr Messages postés 132 Date d'inscription dimanche 8 janvier 2006 Statut Membre Dernière intervention 15 février 2011 - 19 juil. 2008 à 18:35
Bonjour ...

j'ai récupéré un code AJAX pour l'installer dans l'une de mes pages Web pour un éventuel moteur de recherche.

Bien sure, comme c'est de l'ajax le formulaire est validé sans chargement de page de résultat , hors le bouton "Valider" pour lancer la recherche reste toujours actif pendant la phase de recherche et donc pour éviter k'il soit recliké et pour avertir le visiteur ke la phase recherche est en cours je souhaiterai le désactiver mais voilà , comme c'est de l'ajax j'ai pas réussis ...

Merci de m'indiker comment et où ajouter du code JS pour permettre a remplacer le texte du bouton "Envoyer" par "Recherche en cours ..." après avoir cliké dessus.

Voici le code au complet ( simple ) des deux pages :

PAGE : index.html

<script type="text/javascript" src="code.js"></script>
<form method="post" onsubmit="maFonctionAjax(this.Id.value,this.Nom.value);return false" action="">

----

Formulaire Ajax
,

----

Id:,

,

----
 
Nom:,
,

----

,

</form>

CODE.JS :

function maFonctionAjax(Id, Nom)
{
var OAjax;
if (window.XMLHttpRequest) OAjax = new XMLHttpRequest();
else if (window.ActiveXObject) OAjax = new ActiveXObject('Microsoft.XMLHTTP');
OAjax.open('POST',"maPageDeRequPHP.php",true);
OAjax.onreadystatechange = function()
{
if (OAjax.readyState == 4 && OAjax.status==200)
{
if (document.getElementById)
{
if (OAjax.responseText =='true') { /* OK */
document.getElementById('msg').innerHTML=''+OAjax.responseText+'';
}else{ /* PAS OK */
document.getElementById('msg').innerHTML=''+OAjax.responseText+'';
}
} 
}
}
OAjax.setRequestHeader('Content-type','application/x-www-form-urlencoded');
OAjax.send('Id='+Id+'&Nom='+Nom);
}

maPageRequPHP.php

<?
session_start();  

$erreurs=array();//tableau qui stocke les erreurs.  

if(!$_POST['Id']){  
$erreurs[]='Id: Veuillez encoder un Id';  
}  

if(!$_POST['Nom']){  
$erreurs[]='Nom: Veuillez encoder un Nom';  
}  

if(count($erreurs)==0)  
{  

//ici tu enregistres les valeurs dans la bdd

echo"true";

//cette valeur sera traité par ajax est vaut dire que tt passe pour le bien  

// connexion la base de donnée 

   $nom=$_POST["Nom"]; 
   echo$nom; 

$search=mysql_query("SELECT * FROM chansons WHERE artiste LIKE '%$nom%'"); 
$nb=mysql_num_rows($search); 
echo"$nb

"; 
  
while($s=mysql_fetch_array($search)){ 
   $titre_song=$s["titre_song"]; 
   echo"$titre_song
"; 

   }   
// cette boucle est ajouté pour vérifier le fonctionnement du bouton "Envoyer" du formulaire 

for($i=0;$i<=10000;$i++)  
   {  
     echo"$i
"; 
   }  
}  
else  
{  
echo"";  
for($i=0;$i<count($erreurs);$i++)  
{  
echo"- ".$erreurs[$i].".
";  
}  
echo"

";  
}  
?>

Merci encore pour votre aide ...

Cordialement ...

2 réponses

Réponse 1 / 2
banbanfr Messages postés 132 Date d'inscription dimanche 8 janvier 2006 Statut Membre Dernière intervention 15 février 2011
19 juil. 2008 à 18:34
Peut etre

if (OAjax.readyState == 1)
{
    document.getElementById('monbouton').value='Envois';
}
if (OAjax.readyState == 3)
{
    document.getElementById('monbouton').value='En cours';
}
if (OAjax.readyState == 4 && OAjax.status==200)
{
  if (document.getElementById)
  {
    if (OAjax.responseText =='true') { /* OK */
    document.getElementById('msg').innerHTML=''+OAjax.responseText+'';
    }else{ /* PAS OK */
    document.getElementById('msg').innerHTML=''+OAjax.responseText+'';
    }
  }
  document.getElementById('monbouton').value='envoyer';
}

Par contre place un id a ton bouton :

les différents state :

0: non initialisé.
1: connexion établie.
2: requête reçue.
3: réponse en cours.
4: terminé.

Cordialement Banban
-------------------------------------------------------------------------->
Developpement sous MAC
Firefox - Safarie - Internet Explorer - Opéra
Mon site pro : www.wubart.net
Mon site perso : www.mafiacity.fr
0
Réponse 2 / 2
banbanfr Messages postés 132 Date d'inscription dimanche 8 janvier 2006 Statut Membre Dernière intervention 15 février 2011
19 juil. 2008 à 18:35
Par contre a quoi te sert :

  if (document.getElementById){}

?

Cordialement Banban
0

Discussions similaires

comment ajouter ajax control toolkit
cs_faridas -
Grafritz -

16 réponses
Activer un bouton de commande
Faya49 -
Faya49 -

2 réponses
Ajax et ASP.NET/C# passage de paramètre
cs_eddynamique -
yann_lo_san -

7 réponses
faire grisé un bouton
poomen -
billou_13 -

19 réponses
un bouton rechercher
kanabinch -
kanabinch -

5 réponses
Rejoignez-nous