Boutons + php + javascript

Fermé
graffer Messages postés 35 Date d'inscription samedi 17 août 2013 Statut Membre Dernière intervention 13 décembre 2013 - Modifié par graffer le 17/08/2013 à 22:24
graffer Messages postés 35 Date d'inscription samedi 17 août 2013 Statut Membre Dernière intervention 13 décembre 2013 - 19 août 2013 à 02:15
Bonjour,





Ben voila mon probleme je n'arive vraiment pas a ecrire la valeur juste en dessous du bouton envoyer ou lieu de cela ca ouvre une autre page qui en plus travaille tres differement selon le navigateur

et l'autre probleme ce serait de capter cette valeur -javascript- et la passer au serveur par get ou post en php

voici ce que j'ai deja reussis a faire a vrai dires avec beaucoup de peine malgre l'incoerence du code vous verrez

Ha oui j'oublier je voudrais conserver cette valeur dans le input text apres avoir appuyer sur le bouton envoyer , un vrai casse tete du moins pour moi

<center><script type="text/javascript">

function m1(){var valor=document.getElementById('cuenta').value;
var valor=parseInt(valor);if(valor >=1)document.getElementById('cuenta').value=valor-1;}

function m3(){var valor=document.getElementById('cuenta').value;
var valor=parseInt(valor);if(valor >=3)document.getElementById('cuenta').value=valor-3;}

function displayResult(){var valor=document.getElementById("cuenta").value;
var valor=parseInt(valor);document.getElementById('cuenta').value=valor+0.
document.write(valor);}

function inc1(){var valor=document.getElementById('cuenta').value;
var valor=parseInt(valor);document.getElementById('cuenta').value=valor+1;}

function inc3(){var valor=document.getElementById('cuenta').value;
var valor=parseInt(valor);document.getElementById('cuenta').value=valor+3;}
</script>

<button onclick="m1()">-1</button>
<button onclick="m3()">-3</button> <br>
<input type="button"value="+1"onclick="inc1()"/>
<input type="button"value="+3"onclick="inc3()"/> <br>
<input type="text"value="0"id="cuenta"document.write("cuenta")/><br>
<button type="button" onClick="displayResult(). this.form.submit()" </button>
<input type="button" value="Envoyer" onclick="this.disabled=false; this.value='valor' this.form.submit()" />

<html><head><title> </title></head><body bgcolor=#0000ff></body></html></center>


vous me tireriez une epine avec votre aimable colaboration

10 réponses

BlackYoup Messages postés 181 Date d'inscription mardi 4 décembre 2012 Statut Membre Dernière intervention 10 juin 2014 21
18 août 2013 à 00:17
Salut :)

Je pense que tu y es presque. Le problème ici c'est qu'a chaque début de tes fonctions, tu déclares la variable "valor" ce qui en fait une variable locale qui ne sera pas accessible hors de la fonction.

Pour faire ce que tu veux, tu te dois de la déclarer avant tout ca et ensuite, enlever les "var" devant (dans les fonctions)

De plus, ton "this.value='valor' " doit être écrit : "this.value=valor" car c'est une variable et non un texte que tu affiches :)
0
graffer Messages postés 35 Date d'inscription samedi 17 août 2013 Statut Membre Dernière intervention 13 décembre 2013 1
18 août 2013 à 01:23
Je te remercies BlackYoup de ton aide
Effectivement ca travaile aussi sans tous ces var dans les funtions
et merci aussi pour le "this.value=valor" ou lieu de this.value='valor'

le programme travaille jusqu'a present de la meme maniere que avant malgre cela
Si tu as pris la peine de lancer le programme en local tu auras constate que la valeur ne descend pas en dessous de 0 et que les 4 boutions 2 incrementes l'un par 1 et l'autre par 3 et les 2 autres boutons par -1 et -3

et que malgre ses 4 numeros je me retrouves avec 7 input text et boutons d'ou l'incoerence et si j'enleves l'un d'eux le programme ne fonctionnes plus c'est deja un miracle sois arriver la car mes connaissances sont assez limitees

et quand aux questions que je posais c'est parce que je suis vraiment dans l'ignorance comment proceder pour le faire sinon j'aurai pas poser ces questions
car je ne sais vraiment pas comment proceder
essaie de faire le programme a ta facon tu veras que le probleme est plus gramd qu'on le pense malgre ca parait assez simple a pemiere vue

et quand a declarer la valeur qui change a chaque fois aucune idee
mais ce que j'ai fait pour cela c'est justement un input text plus 1 bouton plus une function et c'est a partir d'eux je pense je pourrais recuoerer la valeur a chaque fois meme sans faire 1 var peut etre , bien que en appuyant sur le bouton envoyer il la recopie deja

Il me sembe que ca a l'air beaucoup plus compliquer qu'on le crois

Enfin desole pour tout se sermont mais il fallait j'exprime mes difficultees qui continuent pareilles
0
BlackYoup Messages postés 181 Date d'inscription mardi 4 décembre 2012 Statut Membre Dernière intervention 10 juin 2014 21
18 août 2013 à 01:42
T'inquiète, y'a pas de problèmes :)

Mais juste, j'ai beaucoup de mal à comprendre quel est le but du script et ce que tu cherches à faire. Cette partie aussi m'est floue :

"et que malgre ses 4 numeros je me retrouves avec 7 input text et boutons d'ou l'incoerence et si j'enleves l'un d'eux le programme ne fonctionnes plus"

Voila, si tu pouvais expliquer simplement ce que tu cherches à faire, on pourrait mieux t'aider je pense :)
0
graffer Messages postés 35 Date d'inscription samedi 17 août 2013 Statut Membre Dernière intervention 13 décembre 2013 1
Modifié par graffer le 18/08/2013 à 02:50
En fait ca n'est que un minimum de boutons 4 juste pour faire la suite car en realitee je devrais en employer 1 dizaine avec les chiffres + et les chiffres -
La difficultee commences deja avec plus de 1 chiffre avec les - car avec les chiffres + il ne sembles pas y avoir de difficultee
Mais si ca fonctionne deja avec ces 4 la suite avec 10 ne poseras plus aucun probleme

Ce que je veut en faire c'est simplement un jeu avec des numeros genre bidwiz ou fanybay enfin si j'y arrives mais ou lieu d'employer leur facon de marquer les numeros ca serait dans mon cas avec des boutons qui me semblent beaucoup plus accessible de passer par exemple du numero 3000 au 1500 avec les boutons en decrementant par 100 par exemple mais je ne vois pas en quoi ca pourrait avancer en commentant cela
Enfin tu vois il me reste encore un tres long parcours puisque c'est la premiere chose je fais les boutons car il faut bien commencer par quelque chose

Et ce que je veux c'est explquer au premier post
1 comment conserver la valeur dans input text apres avoir cliquer sur le bouton envoyer, enfin quel est le code a faire
2 comment inscrire cette valeur sur l'ecran juste en dessous du bouton envoyer apres avoir cliquer dessus ?
3 comment passer cette valeur par get ou post au serveur php apres conversion de la valeur javascript en valeur php

Tout ce dont j'ai besoin c'est un peu de code car c'est assez compliquer deja avec ces boutons
0
BlackYoup Messages postés 181 Date d'inscription mardi 4 décembre 2012 Statut Membre Dernière intervention 10 juin 2014 21
18 août 2013 à 02:43
Tu aurais un lien d'exemple ? Je pense avoir compris mais comme (pour ma part), je ne vois pas vraiment la difficulté, peut être qu'un exemple m'aiderait et je serai plus apte pour t'aiguiller :)
0
BlackYoup Messages postés 181 Date d'inscription mardi 4 décembre 2012 Statut Membre Dernière intervention 10 juin 2014 21
18 août 2013 à 11:10
Pour tes 3 points au dessus, tu veux que la page se rafraichisse ou non ? Suivant si la page se recharge ou non (envoi de données au serveur sans chargement), la méthode sera différente
0
graffer Messages postés 35 Date d'inscription samedi 17 août 2013 Statut Membre Dernière intervention 13 décembre 2013 1
Modifié par graffer le 18/08/2013 à 02:58
Toi tu ne vois pas la difficultee moi siiiiiiii

Je n'ai pas d'exemple ni de code sinon ca serait facile d'autes choses j'ai plus facile mais la vraiment pas car je ne sais pas quel code ni comment le placer avec ces boutons
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
graffer Messages postés 35 Date d'inscription samedi 17 août 2013 Statut Membre Dernière intervention 13 décembre 2013 1
Modifié par graffer le 18/08/2013 à 11:49
Bonjour BlackYoup

Ben s'il y a moyen elle se rafraichi pas se serait mieux je pense mais d'autres elements de la page qui sont encore a definir plus tard doivent se rajouter sur la page sans aucune action du joueur donc le serveur dois pouvoir encore envoyer des informations sur cette page independemment du bouton envoyer en tout cas en appuyant sur le biuton envoyer ca doit renvoyer au serveur la valeur du input text

et comme je disais donc d'autrs ellements doivent se rajouter plus tard que l'on appuie sur le bouton ou pas comme par exemple l'heure de la fin d'enchere ou encore la liste des joueurs en tete etc... mais sans pour cela rafraichir la page

Mais en ce qui nous concerne pour le momment c'est juste le probleme des boutons comment capter cette valeur et la renvoyer au serveur qu;elle est l'information du numero jouer tout en gardant chez le joueur dans l input text la derniere valeur jouee je sais se n'est pas aussi simple de fare comprendre les choses aux autres pour soi cela est evident mais pas pour les autres
j'espere tu y vois deja un peu plus clair ce qe je veut

mais la tache reste tres ardue vu tout ce qu;il y a encore a rajouter au programme plus tard comme le registre le login payement payapl bases de donees et tant d'autres choses encore
0
graffer Messages postés 35 Date d'inscription samedi 17 août 2013 Statut Membre Dernière intervention 13 décembre 2013 1
18 août 2013 à 12:17
voici ce qui serait au final +- corcernant la quantitee de boutons




<center><script type="text/javascript">

function m1(){ valor=document.getElementById('cuenta').value;
valor=parseInt(valor);if(valor >=1)document.getElementById('cuenta').value=valor-1;}

function m3(){ valor=document.getElementById('cuenta').value;
valor=parseInt(valor);if(valor >=3)document.getElementById('cuenta').value=valor-3;}

function m5(){ valor=document.getElementById('cuenta').value;
valor=parseInt(valor);if(valor >=5)document.getElementById('cuenta').value=valor-5;}

function m10(){ valor=document.getElementById('cuenta').value;
valor=parseInt(valor);if(valor >=10)document.getElementById('cuenta').value=valor-10;}

function m30(){ valor=document.getElementById('cuenta').value;
valor=parseInt(valor);if(valor >=30)document.getElementById('cuenta').value=valor-30;}

function m100(){ valor=document.getElementById('cuenta').value;
valor=parseInt(valor);if(valor >=100)document.getElementById('cuenta').value=valor-100;}

function displayResult(){ valor=document.getElementById("cuenta").value;
valor=parseInt(valor);document.getElementById('cuenta').value=valor+0.
document.write(valor);}


function inc1(){ valor=document.getElementById('cuenta').value;
valor=parseInt(valor);document.getElementById('cuenta').value=valor+1;}



function inc3(){ valor=document.getElementById('cuenta').value;
valor=parseInt(valor);document.getElementById('cuenta').value=valor+3;}

function inc5(){ valor=document.getElementById('cuenta').value;
valor=parseInt(valor);document.getElementById('cuenta').value=valor+5;}

function inc10(){ valor=document.getElementById('cuenta').value;
valor=parseInt(valor);document.getElementById('cuenta').value=valor+10;}

function inc30(){ valor=document.getElementById('cuenta').value;
valor=parseInt(valor);document.getElementById('cuenta').value=valor+30;}

function inc100(){ valor=document.getElementById('cuenta').value;
valor=parseInt(valor);document.getElementById('cuenta').value=valor+100;}

</script>

<button onclick="m1()">-1</button>
<button onclick="m3()">-3</button>
<button onclick="m5()">-5</button>
<button onclick="m10()">-10</button>
<button onclick="m30()">-30</button>
<button onclick="m100()">-100</button><br>

<input type="button"value="+1"onclick="inc1()"/>
<input type="button"value="+3"onclick="inc3()"/>
<input type="button"value="+5"onclick="inc5()"/>
<input type="button"value="+10"onclick="inc10()"/>
<input type="button"value="+30"onclick="inc30()"/>
<input type="button"value="+100"onclick="inc100()"/><br>

<input type="text"value="0"id="cuenta"document.write("cuenta")/><br>

<button type="button" onClick="displayResult(). this.form.submit()" </button>
<input type="button" value="Envoyer" onclick="this.disabled=false; "this.value=valor' this.form.submit()" />

<html><head><title> </title></head><body bgcolor=#0000ff></body></html></center>
0
BlackYoup Messages postés 181 Date d'inscription mardi 4 décembre 2012 Statut Membre Dernière intervention 10 juin 2014 21
Modifié par BlackYoup le 18/08/2013 à 12:37
Daccord, alors, si on prenait déja dans l'ordre des choses rapidement :D

Ce que je te propose c'est qu'on avance pas à pas histoire que tu comprennes le code, et que moi au passage, comprenne ou tu veux vraiment en venir :)

Déja, pourquoi autant de fonction ? Tu pourrais simplement en faire 2 (une qui ajoute, l'autre qui enleve) et passer des arguments aux boutons ?
function add(nbr){ valor=document.getElementById('cuenta').value; 
valor=parseInt(valor);document.getElementById('cuenta').value=valor+paseInt(nbr);}

function remove(nbr){ valor=document.getElementById('cuenta').value;
valor=parseInt(valor);document.getElementById('cuenta').value=valor-paseInt(nbr);}

Et ensuite, sur tes boutons : (2 exemples, un pour chaque fonction)
<input type="button"value="+1"onclick="add(1)"/>
<button onclick="remove(1)">-1</button> 

Mais pourquoi utiliser des button et pas des input type="button" pour les - ?

Ensuite, tu veux envoyer la valeur au serveur. Pour ca, tu va devoir passer par des formulaires:
https://openclassrooms.com/fr/courses

Ou alors, si tu ne veux pas que la page se rafraichisse, il te faudra passer par de l'AJAX, mais déja, si tu pouvais comprendre les formulaires avant de passer à l'AJAX, ca serait bien.

Tu veux afficher la valeur à l'écran ? Mais après avoir envoyé la valeur au serveur ?

Voila pour l'instant :)
0
graffer Messages postés 35 Date d'inscription samedi 17 août 2013 Statut Membre Dernière intervention 13 décembre 2013 1
Modifié par graffer le 18/08/2013 à 13:17
Oui effectivement pourquoi autant de fonctions ?
Avec toi les choses parraissent simples mais oublies pas je suis cassiment debutant et des choses incoprehensibes on en fait pleins par ignorance

Quand aux boutons toujours pareille ne sachant que faire input text ou boutons alors est opter pour faire les 2 etant donner que en plus j'avais pleins de conflits avec le + et - avec uniquement les input text

Oui je veut que la page se rafraichisses pas vais donc etudier les formulaires comme tu me recommande avant de passer a l'ajax

Et oui je veut afficher la valeur a l'ecran apres avoir appuyer sur envoyer plus par curiositee qu'autre chose ca pour voir comment on fait car sinon le resultat s'affiches autrement et l'on perd la page principal car les exemples j'ai vu la plupart c'est alert avec javascript

je te remercie de ta patience et de ton enseignement
0
BlackYoup Messages postés 181 Date d'inscription mardi 4 décembre 2012 Statut Membre Dernière intervention 10 juin 2014 21
18 août 2013 à 14:00
Ok :)

En attendant que tu regardes un peu les formulaires, pour écrire le résultat en dessous du bouton, tu peux rajouter par exemple une <div>
<div id="valeurBouton"></div>

Ensuite, en javascript, on va se servir de la fonction innerHTML afin d'écrire dans cette div :

<input type="button" value="Envoyer" onclick="this.disabled=false; this.value=valor; document.getElementById('valeurBouton').innerHTML = valor;" />

J'ai enlevé le this.form.submit pour que la page ne se refresh pas et pour voir la valeur s'écrire dans la <div>
0
graffer Messages postés 35 Date d'inscription samedi 17 août 2013 Statut Membre Dernière intervention 13 décembre 2013 1
18 août 2013 à 15:11
Ben voila ca parait ok pour les formulaires avec get ou post
avec php je sais le faire mais avec javascript non doit d'abord voir pour passer la valeur javascript en variable php mais ca ne devrait pas poser de probleme et alors avec un simple echo en php ca affiche sur l'ecran


est copier ton code si j'ai bien compris ca donnes ceci


<script>

function add(nbr){ valor=document.getElementById('cuenta').value;
valor=parseInt(valor);document.getElementById('cuenta').value=valor+paseInt(nbr);}

function remove(nbr){ valor=document.getElementById('cuenta').value;
valor=parseInt(valor);document.getElementById('cuenta').value=valor-paseInt(nbr);}

</script>

<input type="button"value="+1"onclick="add(1)"/>
<button onclick="remove(1)">-1</button>

<div id="valeurBouton"></div>

<input type="button" value="Envoyer" onclick="this.disabled=false; this.value=valor; document.getElementById('valeurBouton').innerHTML = valor;" />


il me faut donc ajouter le input text pour inserer le +1 ou -1 ?
Et apres inserer le code pour quand je ckiques sur le bouton envoyer
0
BlackYoup Messages postés 181 Date d'inscription mardi 4 décembre 2012 Statut Membre Dernière intervention 10 juin 2014 21
18 août 2013 à 15:18
Justement, les formulaires te permettront de passer des valeurs html (écrites avec javascript) et de les récupérer en php. Pareil pour AJAX

"il me faut donc ajouter le input text pour inserer le +1 ou -1 ? "
La tu as un input text qui ajoute +1, le button lui retire -1

Il ne te reste plus qu'a mettre en place le formulaire ;)
0
graffer Messages postés 35 Date d'inscription samedi 17 août 2013 Statut Membre Dernière intervention 13 décembre 2013 1
Modifié par graffer le 19/08/2013 à 00:29
Je deviens fou

As tu essayer le code tu m'as passer ? car ca ne rajoute pas +1 ni soustrait -1
dans le input text

mon input text est ceci
<input type="text"value="0"id="cuenta"document.write("cuenta")/>
j'ai aussi esayer ceci
<input type="text"value="0"document.write("cuenta")/>
et ceci et rien ne marches
<input type="text"value="0"id="valeurBouton"document.write("cuenta")/>


et ceci avec le code tu m'as passer ci bas

<script>

function add(nbr){ valor=document.getElementById('cuenta').value;
valor=parseInt(valor);document.getElementById('cuenta').value=valor+paseInt(nbr);}

function remove(nbr){ valor=document.getElementById('cuenta').value;
valor=parseInt(valor);document.getElementById('cuenta').value=valor-paseInt(nbr);}

</script>

<input type="button"value="+1"onclick="add(1)"/>
<button onclick="remove(1)">-1</button>

<div id="valeurBouton"></div>

<input type="button" value="Envoyer" onclick="this.disabled=false; this.value=valor; document.getElementById('valeurBouton').innerHTML = valor;" />
J'ai pas encore fait le Form ou la Form vu que ca ne fonctionne pas
et le formulaire non plus

Enfin comme je te disait c'est beaucoup plus compliquer que ca n'y parait
0
BlackYoup Messages postés 181 Date d'inscription mardi 4 décembre 2012 Statut Membre Dernière intervention 10 juin 2014 21
19 août 2013 à 01:01
Oui, petite erreur de ma part, remplace le paseInt(nbr) par parseInt(nbr);

Ensuite, renomme la fonction remove() car apparemment, elle supprime directement l'élément, chose que je ne savais pas...

La console javascript des différents navigateurs t'aidera aussi ;)
0
graffer Messages postés 35 Date d'inscription samedi 17 août 2013 Statut Membre Dernière intervention 13 décembre 2013 1
Modifié par graffer le 19/08/2013 à 02:38
Oui toujours le meme probleme le bouton envoyer qui disparait et le bouton -1 ne soustrait pas mais additionne aussi
En plus que quand ca restitue le chiffre il marque toujours un numero en moins

J'ai enlever le dernier parseint(nbr) des 2 fonctions et ca semble deja aller mieux remplacer par simplement par +1 et -1 ou lieu de parseint(nbr)
et mantenant ca soustrait et additionne pour le bouton s'il disparait encore pas vu

oui le bouton disparait toujours

autre probleme si on rajoute d'autres boutons ils ne vont soustraire que par 1 ou additionner par 1 vu que c'est dans la function donc il faudrait faire une function pour chaque bouton on dirais a moins qu'on arrive a mettre cette valeur dans le bouton lui meme ou le input bouton
0