[RESOLU]Help php/html et javascript ?

[Arghotien]

Bonjour,

Je viens vers vous car je n'arrive pas à faire ce que je veux, avant toute chose je ne suis pas developpeur mais je connais html et php.

Actuellement j'ai 2 fichiers :

fichier.html --> un formulaire

fichier.php --> il contient une série de calcules et de variables récupérées via le formulaire et la méthode GET

Tout marche correctement lorsque je rentre mes données dans la formulaire et que je lui demande de calculer sauf que j'aimerais que le résultat soit de manière dynamique ou en temps réel et sur la meme page.

En gros mon html (les champs) :

taille disque :nombre disque :type raid :

Je veux que lorsque je rentre mes données, au dessous, dans une case input il y a le résultat du calcule (et donc le calcule automatique de manière transparante) qui se fait tout seul et sur la meme page que le formulaire.

Je crois comprendre que c'est javascript qui peut faire ce que je veux..

J'espere avoir été clair ..

Bref, HELPPPP !

PS : j'ose pas vous faire voir mon code tellement il est crade

[Halukard]

Ce que tu cherche à faire s'appelle de l'ajax (ou du web 2.0 pour les marketeux xD)

en gros on utilise en javascript la fonction httpxmlrequest, qui permet d'envoyer une requete sur le serveur (ta page php) et de récupérer le résultat.

Si tu n'as que peu de chose à faire tu peux directement utiliser la fonction httpxmlrequest en prenant un exemple basique sur internet (il y a beaucoup d'exemple et de tuto). Si tu cherche à utiliser plusieurs fois cela et a faire des choses plus complexe tu peux t'orienter vers des framework. Pour ce dernier point je laisse les autres répondre car je n'en n'ai pas utilisé depuis un certains temps du coup ceux que je connaissaient ne doivent plus être au gout du jour :)

[ecatomb]

Tu peux t'inspirer de ça:

Dans la page html:

	  <td colspan="6" style="text-align: left;" id="skill">xxx	  </td>

Dans le code javascript:

  document.getElementById('skill').innerHTML="yyyy";

[nemesis93_75]

En quoi le code que tu mets ecatomb peut inspirer ? Tu n'explique même pas ce que c'est.

Bref, ce qu'à mis ecatomb, ça permet juste de remplacer le contenu de la td par "yyyy". Bref, c'est la base du javascript

Arghotien : Si j'ai bien compris, tu veux que dynamiquement, sur ta page html, s'affiche les infos que tu demandes, sans rechargement de page ect. Comme dit Halukard, il te faut utiliser le javascript te permettant de faire un requête asynchrone de ta page PHP. En sortie de ta page PHP, tu as plusieurs choix. Soit tu crées toute ta page en PHP et tu n'as plus qu'à afficher le tout dans ton body html. Soit tu passes par du JSON.

Bref, penche toi sur le httpxmlrequest et si tu veux des fonctions un peu plus simple à utiliser, je te conseille le framework JQuery, que j'utilise très régulièrement dans mon travail

[TeKa]

Loin de moi l'idée de contredire ceux qui parlent d'AJAX, mais ça ne serait pas plus simple de tout faire en JS sans PHP ? Après tout l'objectif des 2 fichiers est de retourner un simple "résultat mathématique"...

[nemesis93_75]

@Teka: Tout à fait, on peut tout faire en JS, l'avantage du PHP est que le calcul est fait par le serveur et non la machine client. Donc dans l'absolu, sur certains calculs, la machine client peut freeze à cause d'une trop grosse charge du javascript (cas extrême je le conçois )

Après, le fait d'utiliser du httpxmlrequest peut être un bon entrainement de base au requête asynchrone en AJAX

[Halukard]

Après, le fait d'utiliser du httpxmlrequest peut être un bon entrainement de base au requête asynchrone en AJAX

Attention tout de même car le code est vite chargé quand on utilise ca en direct et pour la maintenance c'est vite lourd si quelqu'un d'autre doit passer derrière ^^''

[Arghotien]

Coucou, merci pour vos réponses, je vous tiens au jus dès que j'ai essayé cela.. (c'est pas gagné xD)

[ecatomb]

En quoi le code que tu mets ecatomb peut inspirer ? Tu n'explique même pas ce que c'est.

Bref, ce qu'à mis ecatomb, ça permet juste de remplacer le contenu de la td par "yyyy". Bref, c'est la base du javascript

Arghotien : Si j'ai bien compris, tu veux que dynamiquement, sur ta page html, s'affiche les infos que tu demandes, sans rechargement de page ect. Comme dit Halukard, il te faut utiliser le javascript te permettant de faire un requête asynchrone de ta page PHP. En sortie de ta page PHP, tu as plusieurs choix. Soit tu crées toute ta page en PHP et tu n'as plus qu'à afficher le tout dans ton body html. Soit tu passes par du JSON.

Bref, penche toi sur le httpxmlrequest et si tu veux des fonctions un peu plus simple à utiliser, je te conseille le framework JQuery, que j'utilise très régulièrement dans mon travail

Ben au lieu de faire les calculs via php il les fait via javascript et les affiche où il veux avec ce que j'ai indiqué.

Après c'est vrai que tout apparaitra dans le code javascript donc il ne faut rien avoir de sensible et la page php ne servirait à rien.

Quand au calcul javascript il peux être lancé dès qu'on modifie la case (en temps réel) pas besoin de bouton "ok"

[Arghotien]

Bonjour,

Petit Up, je m'y remets en ce moment mais je comprends rien ,j'ai beau regarder des tutos sur différents sites.. rien n'y fait !

Je rappel que je ne connais que php et html (et encore juste la base)

Une âme sensible à mes difficultés pour m'aider ?

Je peux si nécessaire envoyer mon code php et html de base, mais je suis pas sur que vous allez vous y retrouver dedans :s

Merci

[BreizFenrir]

Je veux bien te faire un petit topo et un exemple lors de ma pause déjeuner, tout à l'heure. Il n'y aura pas d'AJAX. Tu connais au moins les bases du DOM, j'imagine ?

[Arghotien]

Je les connais pas mais j'irais les chercher si tu prends le temps de m'aider.

EDIT : ne grille pas ta pause spécialement pour cela

[BreizFenrir]

Ok donc très très rapidement, le Document Object Model est une représentation manipulable par du code du contenu de ta page web. C'est représenté par un arbre avec les méthodes permettant de naviguer dedans à partir d'un élément. Cela définit aussi des méthodes pour modifier le contenu de ta page, et c'est ça qui va nous servir là.

Donc ce dont tu as besoin là, c'est de représenter la ou les opérations que tu souhaites voir effectuées dans du code Javascript (je te laisse définir tes fonctions, pour l'exemple qui va suivre je vais utiliser une fonction nommée plus, qui additionne deux nombres), puis définir comment ce code va interagir avec ta page :

1 - quand il est appelé

2 - le contenu du DOM qu'il va utiliser (lire ou écrire)

Pour le point 1, j'imagine que tu as déjà connaissance des attributs HTML onfocus, onchange, onblur... On va utiliser le second sur les champs contenant des informations à lire, en y indiquant quelle fonction Javascript appeler. Pour la suite, on va appeler celle-ci calculer.

Elle contiendra le code permettant de récupérer le contenu de deux champs, utilisera la fonction plus et placera le résultat dans un troisième champ. Tu verras que pour ces opérations, on va utiliser le même code Javascript qu'ecatomb a indiqué plus tôt.

Je fais vite, pas le temps de tester ou corriger mon code, j'ai réunion dans quelques minutes.

Donc, dans la page on identifie les champs que l'on veut utiliser :

<input type="text" id="operande1"/><input type="text" id="operande2"/><input type="text" id="resultat"/>

On peut désormais y faire référence plus ou moins directement dans le code Javascript. Je mets juste la fonction calculer, sans validation des valeurs fournies par l'utilisateur (à faire) :

function calculer() { var op1 = document.getElementById('operande1').value; var op2 = document.getElementById('operande2').value; var resultat = plus(op1, op2); document.getElementById('resultat').value = resultat;}

En partant de là, tu devrais pouvoir arriver à quelque chose.

[Arghotien]

coucou,

Merci d'avoir pris du temps, je suis en train d'essayer de faire quelque chose avec tes explications et ton code, pour le moment c'est loin de porter ses fruits

Je continue à chercher !

[Arghotien]

Bon je crois que ça avance un peu !

Maintenant je cherche à recupérer la valeur d'un bouton radio en javascript

J'ai cru comprendre qu'il fallait que j'utilise la boucle if avec du genre

for(i=0,i<="2",i++){   //2 étant le nombre de mes boutons radio if(document.test.base[i].checked){   //test étant le nom de mon formulaire et base le nom de mes boutons  VarRecup=document.test.base[i].value;   // }}

Par contre une chose que je comprends pas, est ce que VarRecup est le nom de ma variable qui donne le resultat final ?

J'ai trouvé ce bout de code sur le net et je l'ai transformé..

[Arghotien]

J'up parceque je me rends compte que j'arrive à rien

Dur dur d'essayer de faire du code dans une langue inconnue sans être codeur :'(

[BreizFenrir]

Pour le bouton radio, c'est presque ça ! Déjà, syntaxiquement, il faut que tu utilises des point-virgule dans la définition de ta boucle for.

Aussi, plutôt que de devoir connaître le nombre de boutons radio nommés "base", tu peux utiliser la propriété length du tableau qui les contient (document.test.base).

Globalement, si tu veux faire quelque chose en Javascript, mais que tu ne sais pas trop quelles API sont à ta disposition, je te conseille de mettre le site Mozilla Developer Network dans tes favoris. Ça complètera bien les réponses que tu peux trouver sur les forums.

J'ai finalement réussi à te faire une petite page de démonstration que j'ai pu tester sous Firefox et IE. Elle démontre comment utiliser tout ça ensemble, et devrait bien compléter ce que tout le monde a déjà indiqué ainsi que ce que tu as pu trouver au cours de tes recherches. Voici le code :

<!DOCTYPE html><html><head>	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>	<title>Exemple Javascript</title>	<script type="text/javascript">		function plus(op1, op2) {			return op1 + op2;		}		function calculer() {			var op1 = parseInt(document.getElementById('operande1').value);			var op2 = parseInt(document.getElementById('operande2').value);			var resultat = plus(op1, op2);			document.getElementById('resultat_text').value = resultat;		}		function montrerRadio() {			var radios = document.getElementsByName('radio');			for (var i = 0 ; i <= radios.length ; i++) {				if (radios[i].checked) {					document.getElementById('resultat_radio').value = radios[i].value;				}			}		}	</script></head><body>	<h1>Exemple Javascript</h1>	<h2>Lecture et écriture dans un champ texte</h2>	<p>Mettez un nombre dans chacun des deux champs, ils seront additionnés.</p>	<!-- Pas d'utilisation de la propriété "name" can on ne renvoie pas d'information au serveur -->	<p><label for="operande1">Operande 1</label> <input type="text" id="operande1" onchange="calculer()"/></p>	<p><label for="operande2">Operande 2</label> <input type="text" id="operande2" onchange="calculer()"/></p>	<p><label for="resultat_text">Resultat</label> <input type="text" id="resultat_text" readonly="readonly"/></p>	<h2>Lecture de l'état d'un bouton radio</h2>	<!-- La propriété "name" doit être spécifier pour indiquer que les boutons font partie du même groupe -->	<p><input type="radio" id="radio_Premier" name="radio" value="Premier" onclick="montrerRadio()"> <label for="radio_Premier">Premier</label></p>	<p><input type="radio" id="radio_Second" name="radio" value="Second" onclick="montrerRadio()"> <label for="radio_Second">Second</label></p>	<p><label for="resultat_radio">Bouton radio sélectionné</label> <input type="text" id="resultat_radio" readonly="readonly"/></body></html>

À noter pour le bouton radio qu'il y a tout à fait moyen de récupérer la valeur affichée pour l'utilisateur plutôt que l'information rattachée à la propriété value (c'est juste un poil plus compliqué). Aussi, j'affiche directement cette valeur dans la page, mais tu peux la récupérer dans une variable (la fameuse VarRecup de ton exemple) pour ensuite travailler avec.

Aussi, avant que tu te poses la question, document.getElementsByName('radio') et document.test.radio sont équivalent (si tant est que tu utilises la balise form identifiée par "test" ; ce que je n'ai pas fait, n'ayant pas d'information à renvoyer au serveur).

[Arghotien]

BreizFenrir tu m'as fait avancer, même si c'est pas terminé je vois une évolution et des choses qui commencent à fonctionner. Je t'avouerais que tu m'as aussi bien dégouté à pondre un code comme celui là en 2 minutes alors qu'en plusieurs jours j'y arrive pas ^_^

Une autre question maintenant, j'ai besoin de faire une formule javascript avec 3 variables, comment je procède, et est ce que c'est possible ?

Par exemple en PHP cela donnait une ligne de code suivante :

 $valeur=floor(((floor($variablea*1/2)*524288*512)*$variableb-524288*512*floor($variableb/2)*16)/$base/$base/$base);

Merci encore

EDIT : ah j'oubliais... NE VOUS MOQUEZ PAS DE MON CODE ! xD

[BreizFenrir]

2 minutes... plutôt 30, voire un peu plus vu que j'avais commencé à débroussailler un peu hier. C'est que même si j'ai un gros bagage niveau technologies web (j'ai commencé à apprendre vers 2000), ça fait quelques années que je n'ai rien fait de sérieux en Javascript. Ces dernières années, je n'ai quasiment fait que du Java !

Enfin bref, absolument aucun problème pour utiliser plusieurs variables dans une expression. Retire les symboles $ de l'exemple que tu viens de donner, remplace floor par Math.floor et tu as du Javascript valide, qui à partir des variables variablea, variableb et base calcule une valeur rangée par la suite dans valeur.

Et concernant ton style, tant que le code final que tu produis est lisible et compréhensible (avec ce qu'il faut au besoin de commentaires), je ne dirais rien.

[Arghotien]

Oui c'est certain, 2 minutes étant une expression.. mais même 30 minutes ça reste quand même mieux que moi.. huhu

J'ai transformé comme tu l'as dit

Je suis confronté à un autre problème, en PHP j'utilisais un switch :

  $type=$_GET["type"];switch ($type) {case "VALEURA" : $type="$valeura_calc";break;case "VALEURB" : $type="$valeurb_calc";break;case "VALEURC" : $type="$valeurc_calc";break;case "VALEURD" : $type="$valeurd_calc";break;case "VALEURE" : $type="$valeure_calc";break;  }

Et ensuite selon la VALEUR sélectionner, on appliquer un calcul différent, par exemple la VALEURA qui entraine $valeura_calc était la ligne suivante :

$valeura_calc=floor(((floor($variablea*1/2)*524288*512)*$variableb-524288*512*floor($variableb/2)*16)/$base/$base/$base);

Voila, j'ai modifier le nom des variables pour que ce soit clair, enfin je l'espère.

PHP c'est beaucoup plus simple !

[BreizFenrir]

Je ne suis pas sûr de comprendre dans ton dernier message si tu as un problème ou non, et quel est ce problème. Le switch existe aussi en Javascript : syntaxe et exemple.

[Arghotien]

coucou,

Bon je lache mon vieux code comme il est !

En dessous il y a ma partie HTML et au dessus le javascript que j'essaye de faire

Le but est que je puisses recupérer les valeures de mon formulaire, appelées : base, nb_disk, extend_disk et type_raid.

Et que en fonction du type_raid choisi, il y a un calcul différent qui s'exécute.

En PHP j'y était très bien arrivé, mais en javascript je comprends rien, j'ai fait 30 sites, j'ai regardé les synthaxes, exemples etc.. mais toujours pas ! Pourtant je pense que je dois pas être très loin...

Voici mon code :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head></head><body><form action="" method="GET" name="test">  <script type="text/javascript">	function calculer() { var base = parseInt(document.getElementById('base').value); var nombredisk = parseInt(document.getElementById('nb_disk').value); var extenddisk = parseInt(document.getElementById('extend_disk').value); var typeraid = parseInt(document.getElementById('type_raid').value); switch(typeraid) {case 'RAID111' : type_raid = "raid111_calc";break;case 'RAID1111' : type_raid = "raid1111_calc";break;case 'RAID52P' : type_raid = "raid52P_calc";break;case 'RAID54P' : type_raid = "raid54P_calc";break;case 'RAID58P' : type_raid = "raid58P_calc";break;case 'RAID64PQ' : type_raid = "raid64PQ_calc";break;case 'RAID68PQ' : type_raid = "raid68PQ_calc";break;default:alert ('Selectionne un RAID !');break;  } var raid111_calc=Math.floor(((Math.floor(extend_disk*1/2)*524288*512)*nb_disk-524288*512*Math.floor(nb_disk/2)*16)/base/base/base); var raid1111_calc=Math.floor(((Math.floor(extend_disk*1/3)*524288*512)*nb_disk-524288*512*Math.floor(nb_disk/3)*8)/>/base/base/base); var raid52P_calc=Math.floor(((Math.floor(extend_disk*2/3)*524288*512)*nb_disk-524288*512*Math.floor(nb_disk/3)*8)/>/base/base/base); var raid54P_calc=Math.floor(((Math.floor(extend_disk*4/5)*524288*512)*nb_disk-524288*512*Math.floor(nb_disk/5)*8)/>/base/base/base); var raid58P_calc=Math.floor(((Math.floor(extend_disk*8/9)*524288*512)*nb_disk-524288*512*Math.floor(nb_disk/9)*8)/>/base/base/base); var raid64PQ_calc=Math.floor(((Math.floor(extend_disk*4/6)*524288*512)*nb_disk-524288*512*Math.floor(nb_disk/6)*8)/>/base/base/base); var raid68PQ_calc=Math.floor(((Math.floor(extend_disk*8/10)*524288*512)*nb_disk-524288*512*Math.floor(nb_disk/10)*8)/>/base/base/base); var resultat = plus(typeraid); document.getElementById('resultat').value = resultat; } </script><fieldset> <legend>Choix de la base :</legend> <SELECT size="1" id="base" onchange="calculer()"> <OPTION value="1000">1000</option> <OPTION value="1024">1024</option> </SELECT></br></fieldset><fieldset> <legend>Nombre de disques :</legend> <input type="texte" id="nb_disk" onchange="calculer()"></br></fieldset><fieldset> <legend>Choisir la taille du disque :</legend> <SELECT size="1" id="extend_disk" onchange="calculer()"> <OPTION value="100">100</option> <OPTION value="300">300</option> <OPTION value="400">400</option> <OPTION value="450">450</option> <OPTION value="600">600</option> <OPTION value="900">900</option> <OPTION value="1000">1000</option> <OPTION value="2000">2000</option> <OPTION value="3000">3000</option> </SELECT></br></fieldset><fieldset> <legend>Choisir le type de RAID :</legend> <SELECT size="1" id="type_raid" onchange="calculer()"> <OPTION value="RAID111">RAID 1 (1+1)</option> <OPTION value="RAID1111">RAID 1 (1+1+1)</option> <OPTION value="RAID52P">RAID 5 (2+P)</option> <OPTION value="RAID54P">RAID 5 (4+P)</option> <OPTION value="RAID58P">RAID 5 (8+P)</option> <OPTION value="RAID64PQ">RAID 6 (4+PQ)</option> <OPTION value="RAID68PQ">RAID 6 (8+PQ)</option> </SELECT></br></fieldset><p><label for="resultat_text">Resultat</label> <input type="text" id="resultat" readonly="readonly"/></p> <input type="reset"  name="reset"  value="Tout recommencer"></input></form></body></html>

[BreizFenrir]

J'ai pas le temps de tout analyser, mais je vois deux trucs qui ne peuvent pas marcher en l'état, et ont donc sans doute été mal compris (ou il s'agit d'erreurs d'inattention).

var typeraid = parseInt(document.getElementById('type_raid').value); switch(typeraid) {    case 'RAID111' : type_raid = "raid111_calc";break;

Dans l'extrait de code ci-dessus, tu récupères le type de RAID que tu tentes de convertir en entier (fonction parseInt). Forcément, comme tu n'as pas de valeur interprétable sous forme d'entier, ça ne va pas fonctionner et la fonction va retourner la valeur NaN, qui ne correspondra à aucun des choix du switch. parseInt à retirer donc.

var resultat = plus(typeraid);

Là, tu appelles la fonction plus (non définie...). L'interpréteur Javascript de n'importe quel navigateur va forcément s'arrêter là et remonter une erreur.

Je te laisse retravailler ton code en suivant ces remarques. Je te ferais une analyse plus poussée et te donnerais davantage de conseils si tu as fait tes devoirs ce soir.

Sinon bizarre que Javascript semble te poser tant de problèmes. Si tu sais faire ces calculs en PHP, tu ne devrais pas avoir de problème, car l'algorithme à dérouler est exactement le même et le code dans les deux langages est à peu près similaire (hormis récupération et affichage des données).

[Arghotien]

coucou, entre temps j'ai changé mon code et j'ai viré le switch, j'ai vu mes erreurs aprés

Je donne mon dernier code avant de partir du taff.

Merci BreizFenrir de m'aider, j'appréci

C'est quand même pas pareil javascript et php, pour moi le php me semble plus logique..

On va dire que c'est surtout que j'avais déja travaillé le php, et que du coup quand j'arrive sur javascript j'ai dans la tête des synthaxes de PHP que j'essai de refaire..

[Arghotien]

Je me suis un peu étalé sur plusieurs page avec différents tests, du coup je poste quelque chose demain ^^'