Discussion :

[souviron34]

Bonjour

J'ai un petit problème au niveau Javascript/Php. J'ai également posté dans le forum PHP et je vais inclure le lien iici

En simple résumé :

est-ce que avoir une form qui contient une action de type POST et un bouton SUBMIT peut être remplacée par une div contenant un bouton qui va envoyer une requête htttp de type POST ?

Est-ce que du point de vue du destinataire (c'est une tierce partie sur un autre site) c'est identique ??



Merci de vos points de vue / explications

[Toufik83]

Bonjour,

Oui, vous pouvez faire ceci avec la fonction fetch par exemple, qui permet de construire et envoyer une requête xmlhttprequest avec les données transmises.

Le plus important c'est d'attacher un écouteur de clic au bouton correspondant..

[souviron34]

Merci

En fait c'est pour accrocher des paiements Paypal..

J'ai une page avec plusieurs objets (2, dont 1 en quantité variable)..

Le code pour ajouter au panier est :

Code html :

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

1
2
3
4
5
6
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank">
  <input type="hidden" name="cmd" value="_s-xclick" />
  <input type="hidden" name="hosted_button_id" value="XXXXX" />
  <input type="hidden" name="currency_code" value="CAD" />
  <input type="image" src="https://www.paypalobjects.com/fr_CA/i/btn/btn_cart_LG.gif" border="0" name="submit" title="PayPal, le réflexe sécurité pour payer en ligne" alt="Ajouter au panier" />
</form>

Je suppose que si je transform ceci en :

Code html :

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

1
2
3
4
5
6
<div>
  <input type="hidden" name="cmd" value="_s-xclick" />
  <input type="hidden" name="hosted_button_id" value="XXXXX" />
  <input type="hidden" name="currency_code" value="CAD" />
  <input type="image" id=ok name=ok alt="Ajouter au panier" onclick=envoi() />
</div>

et

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
function envoi(){
     var s;
     s = "cmd=\"_s-xclick\" hosted_button_id=\"XXXXX\" currency_code=\"CAD\" submit=true";
     post ("https://www.paypal.com/cgi-bin/webscr",s, yy, zz, true);
}
 
function post(url,a,cb,d,erf,sy){var r=gXhr();    
    r.addEventListener("load",function(){
           if(this.status>=200 && this.status<400){
                  if(cb!= null){
                        cb(d,this.responseText);}
                  else 
                      alert("REP "+this.responseText)}
          else{
               if(erf!=null)erf(this.status+" "+this.statusText);
              else alert("Erreur réseau "+this.status+" "+this.statusText)}
    });
    r.addEventListener("error",function(){
                 if(erf!=null)erf("Erreur réseau "+this.status+" "+this.statusText);
                 else alert("Erreur réseau "+this.status+" "+this.statusText)
 
    });
    r.open("POST",url,sy);
    r.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    r.send(a);
}

ou bien en créant un FormData message...

Ça marcherait, non ?

Merci

[Toufik83]

Bonjour,

Je vois des trucs qui clochent :

• Absence des guillemets ou apostrophes autour des valeurs des attributs id et name <input ... id=ok name=ok ... onclick=envoi() />
• La déclaration de la fonction function post(url,a,cb,d,erf,sy) avec 6 paramètres, mais l'appelle avec 5 seulement post ("https://www.paypal.com/cgi-bin/webscr",s, yy, zz, true);
• Utilisez des noms de paramètres/variables explicites au lieu de a,cb,d,erf,sy,s,yy,zz

Apart ça, je pense que ça marcherait oui, mais vous utilisez l'ancienne méthode, maintenant il existe fetch comme je vous l'ai dit.

[souviron34]

Bonjour Toufik

Je vois des trucs qui clochent :

• Absence des guilleumets ou apostrophes autour des valeurs des attributs id et name <input ... id=ok name=ok ... onclick=envoi() />
• La déclaration de la fonction function post(url,a,cb,d,erf,sy) avec 6 paramètres, mais l'appelle avec 5 seulement post ("https://www.paypal.com/cgi-bin/webscr",s, yy, zz, true);

oui j'ai été vite fait, car c'est pas le coeur de ma question.. J'ai plus de 95000 lignes de code javascript fonctionnelles...

• Utilisez des noms de paramètres/variables explicites au lieu de a,cb,d,erf,sy,s,yy,zz

Minifcation ??? pour quelque chose d'opérationnel c'est essentiel.

Apart ça, je pense que ça marcherait oui, mais vous utilisez l'ancienne méthode, maintenant il existe fetch comme je vous l'ai dit.

Oui je te remercie j'ai vite regardé, et j'approfondirais demain..

Merci

[Olivier C]

L'absence de guillemets autour des valeurs des attributs HTML est une possibilité mais n'est pas recommandé.

Pour le JS, vous pouvez éviter d'échapper les guillemets avec des antislashs, par exemple en jouant avec les guillemets simples et double, mais ils y a en réalité bien mieux encore : les littéraux de gabarits.

https://developer.mozilla.org/fr/doc...plate_literals