new!
|
[ Forums >> Webmasters >> Général >> Activer/Désactiver bouton submit avec ajax ]
| > Activer/Désactiver bouton submit avec ajax |
[ Posté par nabmoah ] [ Détails ] [ Contact ] [ Citer ]
[ Posté le 19-07-2008 à 18:33 | 9 messages ]
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 vaidé 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 d code JS pour permettre a remplacer le texte du bouton "Envoyer" par "Recherche en cours ..." après avoir cliké dessus.
Voici le code a 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="">
<table border="0" cellspacing="0">
<tr>
<td colspan=2>
Formulaire Ajax
</td>
</tr>
<tr>
<td>Id:</td>
<td>
<input name="Id" id="Id" type="text"></td>
</tr>
<tr>
<td>Nom:</td>
<td><input name="Nom" id="Nom" type="text"></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="envoyer" /></td>
</tr>
</table>
</form>
<div id="msg"></div>
|
|
PAGE : 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='<font color=GREEN>'+OAjax.responseText+'</font>';
}else{ /* PAS OK */
document.getElementById('msg').innerHTML='<font color=RED>'+OAjax.responseText+'</font>';
}
}
}
}
OAjax.setRequestHeader('Content-type','application/x-www-form-urlencoded');
OAjax.send('Id='+Id+'&Nom='+Nom);
}
|
|
PAGE : 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<br><br>";
while ($s=mysql_fetch_array($search)) {
$titre_song = $s["titre_song"];
echo "$titre_song<br>";
}
// cette boucle est ajouté pour vérifier le fonctionnement du bouton "Envoyer" du formulaire
for ($i=0;$i<=10000;$i++)
{
echo "$i<br>";
}
}
else
{
echo "<p class='erreur'>";
for($i=0;$i<count($erreurs);$i++)
{
echo "- ".$erreurs[$i].".<br />";
}
echo "</p>";
}
?>
|
|
Merci encore pour votre aide ...
Cordialement
|
|
|
[ Posté par macmillenium ] [ Détails ] [ Contact ] [ Citer ]
[ Posté le 20-07-2008 à 12:23 | 333 messages ]
Bonjour,
Il faut donner une id a ton bouton, par exemple testbtn :
| <input type="submit" value="envoyer" id="testbtn" /> |
|
Ce bouton doit prendre comme valeur "Recherche en cours..." en attendant la réponse du serveur et "Envoyer" une fois les données reçus.
Si la réponse est reçu testbtn à comme valeur envoyer
Sinon testbtn a comme valeur Recherche en cours...
Voici ton code
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='<font color=GREEN>'+OAjax.responseText+'</font>';
document.getElementById('testbtn').value = "Envoyer"; //Si OK le bouton prend la valeur envoyer
}else{ /* PAS OK */
document.getElementById('msg').innerHTML='<font color=RED>'+OAjax.responseText+'</font>';
document.getElementById('testbtn').value = "Envoyer"; //Si pas OK bouton prend la valeur envoyer
}
}
}
else {
// On attendant le bouton prend la valeur Recherche en cours
document.getElementById('testbtn').value = "Recherche en cours ...";
}
}
OAjax.setRequestHeader('Content-type','application/x-www-form-urlencoded');
OAjax.send('Id='+Id+'&Nom='+Nom);
} |
|
Sa devrait marcher sans pb
________________
Intégrateur/Développeur
--
Mon site CV, http://www.iheb-benromdhane.com
La version 2.0 de mon site anti pirate, http://macmillenium.free.fr
| [ Posté par nabmoah ] [ Détails ] [ Contact ] [ Citer ]
[ Posté le 22-07-2008 à 15:03 | 9 messages ]
Merci pour le code JS ça marche nikéle ...
je souhaiterai juste savoir s'il été possible de désactiver le bouton une fois qu'il est sur "Recherche en cours ..." pour éviter de ré-écliker dessus !?
j'ai essayer avec ça:
document.getElementById('testbtn').value = "Recherche en cours ...";
document.getElementById('testbtn').style = "display='none'";
|
|
mais ça ne marche pas !!
quelle est mon erreur ?
Merci de votre réponse ...
Cordialement
| [ Posté par EricM ] [ Détails ] [ Contact ] [ Citer ]
[ Posté le 22-07-2008 à 17:00 | 4194 messages ]
Bonjour,| <input type="submit" value="envoyer" onclick="this.value='Recherche en cours ...';this.disabled=true;"/> |
|
Te restera à faire l'opération inverse à réception de la réponse Ajax ...
A+
________________
L'échec est le fondement de la réussite.
- Lao Tseu -
| [ Posté par macmillenium ] [ Détails ] [ Contact ] [ Citer ]
[ Posté le 22-07-2008 à 17:19 | 333 messages ]
nabmoah a dit
je souhaiterai juste savoir s'il été possible de désactiver le bouton une fois qu'il est sur "Recherche en cours ..." pour éviter de ré-écliker dessus !?
j'ai essayer avec ça:
|
|
C'est plutôt :
| document.getElementById('testbtn').style.display='none'"; |
|
Mais cela ne répond pas a ton besoin
Il faut simplement désactiver et réactiver le bouton, je reprends le code :
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='<font color=GREEN>'+OAjax.responseText+'</font>';
document.getElementById('testbtn').value = "Envoyer"; //Si OK le bouton prend la valeur envoyer
document.getElementById('testbtn').disabled = false; //Si OK le bouton activer
}else{ /* PAS OK */
document.getElementById('msg').innerHTML='<font color=RED>'+OAjax.responseText+'</font>';
document.getElementById('testbtn').value = "Envoyer"; //Si pas OK bouton prend la valeur envoyer
document.getElementById('testbtn').disabled = false; //Si pas OK le bouton activer
}
}
}
else {
// On attendant le bouton prend la valeur Recherche en cours
document.getElementById('testbtn').value = "Recherche en cours ...";
// On attendant le bouton est desactivé
document.getElementById('testbtn').disabled = true;
}
}
OAjax.setRequestHeader('Content-type','application/x-www-form-urlencoded');
OAjax.send('Id='+Id+'&Nom='+Nom);
}
|
|
Voilà
[Message édité par macmillenium le 22-07-2008 à 17:20]
________________
Intégrateur/Développeur
--
Mon site CV, http://www.iheb-benromdhane.com
La version 2.0 de mon site anti pirate, http://macmillenium.free.fr
| [ Posté par EricM ] [ Détails ] [ Contact ] [ Citer ]
[ Posté le 22-07-2008 à 17:31 | 4194 messages ]
macmillenium a dit
Il faut simplement désactiver et réactiver le bouton, |
|
Oui, et ça a l'air bien compliqué, vu comme ça 
Il suffit de 2 X 2 instructions (cf. ci-dessus), non ?
A+
________________
L'échec est le fondement de la réussite.
- Lao Tseu -
| [ Posté par macmillenium ] [ Détails ] [ Contact ] [ Citer ]
[ Posté le 22-07-2008 à 17:31 | 333 messages ]
EricM a dit
Bonjour,| <input type="submit" value="envoyer" onclick="this.value='Recherche en cours ...';this.disabled=true;"/> |
|
Te restera à faire l'opération inverse à réception de la réponse Ajax ...
A+ |
|
Il vaut mieux mettre sa dans l'instruction conditionnelle comme il peut y avoir un erreur d'exécution
________________
Intégrateur/Développeur
--
Mon site CV, http://www.iheb-benromdhane.com
La version 2.0 de mon site anti pirate, http://macmillenium.free.fr
| [ Posté par EricM ] [ Détails ] [ Contact ] [ Citer ]
[ Posté le 22-07-2008 à 17:39 | 4194 messages ]
macmillenium a dit
Il vaut mieux mettre sa dans l'instruction conditionnelle comme il peut y avoir un erreur d'exécution |
|
Heu ... dans le onclick ? Je vois pas bien 
Par contre, avec ta solution, tu est obligé d'attendre une première réponse d'Ajax (la màj du readystate), ce qui laisse éventuellement la possibilité de cliquer une 2° fois
Et puis en cas d'erreur, le résultat est le même dans les 2 cas, il me semble ...
A+
________________
L'échec est le fondement de la réussite.
- Lao Tseu -
| [ Posté par nabmoah ] [ Détails ] [ Contact ] [ Citer ]
[ Posté le 22-07-2008 à 17:46 | 9 messages ]
Merci beaucoup pour vos réponses
en fin de compte j'avais juste mal tapé mon code pour activer/désactiver mon bouton , heureusement ke j'ai eu droit à une réctification ^^
Merci encore pour votre aide ...
Cordialement
| [ Posté par macmillenium ] [ Détails ] [ Contact ] [ Citer ]
[ Posté le 22-07-2008 à 18:08 | 333 messages ]
EricM a dit
macmillenium a dit
Il vaut mieux mettre sa dans l'instruction conditionnelle comme il peut y avoir un erreur d'exécution |
|
Heu ... dans le onclick ? Je vois pas bien
Et puis en cas d'erreur, le résultat est le même dans les 2 cas, il me semble ...
A+ |
|
J'ai pensé a laissé la valeur "Envoyer" en cas d'erreur mais dans tous les cas il faut attendre la réponse d'ajax ...
Encore une reprise du code :
| <input type="submit" id="testbtn" value="envoyer" onclick="this.value='Recherche en cours ...';this.disabled=true;" /> |
|
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='<font color=GREEN>'+OAjax.responseText+'</font>';
document.getElementById('testbtn').value = "Envoyer"; //Si OK le bouton prend la valeur envoyer
document.getElementById('testbtn').disabled = false; //Si OK le bouton activer
}else{ /* PAS OK */
document.getElementById('msg').innerHTML='<font color=RED>'+OAjax.responseText+'</font>';
document.getElementById('testbtn').value = "Un erreur s'est produite veuillez réessayer"; //Si pas OK le bouton prend une autre valeur
document.getElementById('testbtn').disabled = false; //Si pas OK le bouton activer
}
}
}
}
OAjax.setRequestHeader('Content-type','application/x-www-form-urlencoded');
OAjax.send('Id='+Id+'&Nom='+Nom); |
|
[Message édité par macmillenium le 22-07-2008 à 18:09]
________________
Intégrateur/Développeur
--
Mon site CV, http://www.iheb-benromdhane.com
La version 2.0 de mon site anti pirate, http://macmillenium.free.fr
|
|
Services email :
Vous devez vous identifier pour profiter des services par email du forum.
|
|
]
