Onchange + submit

**shinzao** · 09/10/2013, 16h30

Bonjour,

J'ai un soucis en javascript. En faites, je n'arrive plus à recuperer les valeurs utiliser dans le onchange apres un submit.

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<?php
echo "<head>
<script type=\"text/javascript\">
function updateTotal(){
//On récupère le total
var total=0;
total += parseInt(document.getElementById('selRange1').innerHTML);
total += parseInt(document.getElementById('selRange2').innerHTML);
total += parseInt(document.getElementById('selRange3').innerHTML);
total += parseInt(document.getElementById('selRange4').innerHTML);
total += parseInt(document.getElementById('selRange5').innerHTML);
total += parseInt(document.getElementById('selRange6').innerHTML);
 
//Puis on ajoute dans la case
document.getElementById('case_total').innerHTML=total;
}
</script>
</head>";
            if ($_POST['verif'] != 1)
            {
                echo "<form action=\"mapage.php\" method=\"post\">";
                echo "<table cellspacing=\"0\" cellpadding=\"3px\" rules=\"rows\"  style=\"border:solid 1px #777777; border-collapse:collapse; font-family:verdana; font-size:11px; margin-left:auto; margin-right:auto;\">";
                echo "<caption>Composition :</caption>";
                echo "<tr style=\"background-color:lightgrey;\">";
                echo "<th style=\"width:140px;\">Famille 1</th>";
                echo "<th> <input type=\"range\" style=\"margin-left: 15%; name=\"fam1\" onchange=\"document.getElementById('selRange1').innerHTML = this.value; updateTotal();\" value=\"0\" step=\"5\" max=\"100\" min=\"0\"></input></th>";
                echo "<th style=\"width:50px;\"><span style=\"border: 2px solid black; margin-left: 9%;\"><span id=\"selRange1\">0</span> %</th>";
            echo "</tr>";
            echo "<tr style=\"background-color:lightgrey;\">";
            echo "<th style=\"width:140px;\">Famille 2</th>";
            echo "<th> <input type=\"range\" style=\"margin-left: 15%; name=\"fam2\" onchange=\"document.getElementById('selRange2').innerHTML = this.value; updateTotal();\" value=\"0\" step=\"5\" max=\"100\" min=\"0\"></input></th>";
            echo "<th style=\"width:50px;\"><span style=\"border: 2px solid black; margin-left: 9%;\"><span id=\"selRange2\">0</span> %</th>";
            echo "</tr>";
            echo "<tr style=\"background-color:lightgrey;\">";
            echo "<th style=\"width:140px;\">Famille 3</th>";
            echo "<th> <input type=\"range\" style=\"margin-left: 15%; name=\"fam3\" onchange=\"document.getElementById('selRange3').innerHTML = this.value; updateTotal();\" value=\"0\" step=\"5\" max=\"100\" min=\"0\"></input></th>";
            echo "<th style=\"width:50px;\"><span style=\"border: 2px solid black; margin-left: 9%;\"><span id=\"selRange3\">0</span> %</th>";
            echo "</tr>";
            echo "<tr style=\"background-color:lightgrey;\">";
            echo "<th style=\"width:140px;\">Famille 4</th>";
            echo "<th> <input type=\"range\" style=\"margin-left: 15%; name=\"fam4\" onchange=\"document.getElementById('selRange4').innerHTML = this.value; updateTotal();\" value=\"0\" step=\"5\" max=\"100\" min=\"0\"></input></th>";
            echo "<th style=\"width:50px;\"><span style=\"border: 2px solid black; margin: margin-left: 9%;\"><span id=\"selRange4\">0</span> %</th>";
            echo "</tr>";
            echo "<tr style=\"background-color:lightgrey;\">";
            echo "<th style=\"width:140px;\">Famille 5</th>";
            echo "<th> <input type=\"range\" style=\"margin-left: 15%; name=\"fam5\" onchange=\"document.getElementById('selRange5').innerHTML = this.value; updateTotal();\" value=\"0\" step=\"5\" max=\"100\" min=\"0\"></input></th>";
            echo "<th style=\"width:50px;\"><span style=\"border: 2px solid black; margin-left: 9%;\"><span id=\"selRange5\">0</span> %</th>";
            echo "</tr>";
            echo "<tr style=\"background-color:lightgrey;\">";
            echo "<th style=\"width:140px;\">Famille 6</th>";
            echo "<th> <input type=\"range\" style=\"margin-left: 15%; name=\"fam6\" onchange=\"document.getElementById('selRange6').innerHTML = this.value; updateTotal();\" value=\"0\" step=\"5\" max=\"100\" min=\"0\"></input></th>";
            echo "<th style=\"width:50px;\"><span style=\"border: 2px solid black; margin-left: 9%;\"><span id=\"selRange6\">0</span> %</th>";
            echo "</tr>";
            echo "</table>";
            echo "<p style=\"width:100px;\">Votre compo est remplie à: <span style=\"border: 2px solid black; margin: 0px 0px 0px 0px;\"><span id=\"case_total\">0</span> %</p>";
            echo "<input type=\"hidden\" name=\"verif\" value=\"1\">";
            echo "<input type=\"submit\" name=\"submit\" value=\"Valider votre choix\" />";
            echo "</form>";
            }
            else if ($_POST['verif'] == 1)
            echo 'valeur des compos : 1= '.$_POST['fam1'].' 2= '.$_POST['fam2'].' 3= '.$_POST['fam3'].' 4= '.$_POST['fam4'].' 5= '.$_POST['fam5'].' 6= '.$_POST['fam6'].'';
 
?>

Du coup ici, toutes mes variables s'actualisent en direct, par contre, je n'arrives pas à les recuperer derriere dans le POST.
Est ce qu'il est possible à un moment de dire que $mavariablephp = resultat de SelRange1 par exemple ?

Bonne journée

**Bovino** · 09/10/2013, 16h43

Dans un premier temps, ce serait sympa de lire Important : Les règles incontournables d'utilisation de ce forum et de poster le code HTML et JavaScript généré et non le code PHP.

Merci de garder à l'esprit que si vous voulez être aidé, il faut donner envie aux personnes qui lisent votre message de le faire et poster un code bien présenté est un bon début.

**shinzao** · 09/10/2013, 16h55

Bonjour,

Je suis sous joomla 1.5 et le code généré est bien celui là.

Mon soucis concerne le lien entre le code javascript et la répercussion sur les inputs, POST et submit, j'aurai du mal du coup à poster autre chose sachant que ce n'est pas le résultat visuel qui m’intéresse mais bien le code en question...

En essayant de faire plus clair:

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
 <?php
session_start();
echo "<head>
<script type=\"text/javascript\">
function updateTotal(){
//On récupère le total
var total=0;
total += parseInt(document.getElementById('selRange1').innerHTML);
total += parseInt(document.getElementById('selRange2').innerHTML);
 
//Puis on ajoute dans la case
document.getElementById('case_total').innerHTML=total;
}
</script>
</head>";
                        if ($_POST['verif'] != 1)
                        {
                                echo "<form action=\"mapage.php\" method=\"post\">";
                                echo "<table cellspacing=\"0\" cellpadding=\"3px\" rules=\"rows\"  style=\"border:solid 1px #777777; border-collapse:collapse; font-family:verdana; font-size:11px; margin-left:auto; margin-right:auto;\">";
                                echo "<caption>Composition :</caption>";
                                echo "<tr style=\"background-color:lightgrey;\">";
                                echo "<th style=\"width:140px;\">Famille 1</th>";
                                echo "<th> <input type=\"range\" style=\"margin-left: 15%; name=\"fam1\" onchange=\"document.getElementById('selRange1').innerHTML = this.value; updateTotal();\" value=\"0\" step=\"5\" max=\"100\" min=\"0\"></input></th>";
                                echo "<th style=\"width:50px;\"><span style=\"border: 2px solid black; margin-left: 9%;\"><span id=\"selRange1\">0</span> %</th>";
                        echo "</tr>";
                        echo "<tr style=\"background-color:lightgrey;\">";
                        echo "<th style=\"width:140px;\">Famille 2</th>";
                        echo "<th> <input type=\"range\" style=\"margin-left: 15%; name=\"fam2\" onchange=\"document.getElementById('selRange2').innerHTML = this.value; updateTotal();\" value=\"0\" step=\"5\" max=\"100\" min=\"0\"></input></th>";
                        echo "<th style=\"width:50px;\"><span style=\"border: 2px solid black; margin-left: 9%;\"><span id=\"selRange2\">0</span> %</th>";
                        echo "</tr>";
                        echo "</table>";
                        echo "<p style=\"width:100px;\">Votre compo est remplie à: <span style=\"border: 2px solid black; margin: 0px 0px 0px 0px;\"><span id=\"case_total\">0</span> %</p>";
                        echo "<input type=\"hidden\" name=\"verif\" value=\"1\">";
                        echo "<input type=\"submit\" name=\"submit\" value=\"Valider votre choix\" />";
                        echo "</form>";
                        }
                        else if ($_POST['verif'] == 1)
                        {
                                echo 'valeur des compos : 1= '.$_POST['fam1'].' 2= '.$_POST['fam2'].' ';
                                print_r($_POST);
                        }
?>

**SpaceFrog** · 09/10/2013, 16h57

visiblement tu n'as pas lu :

Dans un premier temps, ce serait sympa de lire Important : Les règles incontournables d'utilisation de ce forum et de poster le code HTML et JavaScript généré et non le code PHP.

**shinzao** · 09/10/2013, 17h00

Si j'ai bien lu,

Je ne comprends juste pas l'intêret dans mon cas de retirer tous les echos de mon code sachant que justement c'est le lien qui m'interesse non ?

EDIT: voilà le code:

Code :

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

1
2
3
4
5
6
7
8
9
function updateTotal(){
//On récupère le total
var total=0;
total += parseInt(document.getElementById('selRange1').innerHTML);
total += parseInt(document.getElementById('selRange2').innerHTML);
 
//Puis on ajoute dans la case
document.getElementById('case_total').innerHTML=total;
}

Code html :

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

1
2
3
4
5
6
7
<font size='1'><table class='xdebug-error' dir='ltr' border='1' cellspacing='0' cellpadding='1'>
<tr><th align='left' bgcolor='#f57900' colspan="5"><span style='background-color: #cc0000; color: #fce94f; font-size: x-large;'>( ! )</span> Notice: Undefined index: verif in E:\epitech\logiciel\WampServer\wamp\www\session\mapage.php on line <i>16</i></th></tr>
<tr><th align='left' bgcolor='#e9b96e' colspan='5'>Call Stack</th></tr>
<tr><th align='center' bgcolor='#eeeeec'>#</th><th align='left' bgcolor='#eeeeec'>Time</th><th align='left' bgcolor='#eeeeec'>Memory</th><th align='left' bgcolor='#eeeeec'>Function</th><th align='left' bgcolor='#eeeeec'>Location</th></tr>
<tr><td bgcolor='#eeeeec' align='center'>1</td><td bgcolor='#eeeeec' align='center'>0.0006</td><td bgcolor='#eeeeec' align='right'>373104</td><td bgcolor='#eeeeec'>{main}(  )</td><td title='E:\epitech\logiciel\WampServer\wamp\www\session\mapage.php' bgcolor='#eeeeec'>..\mapage.php<b>:</b>0</td></tr>
</table></font>
<form action="mapage.php" method="post"><table cellspacing="0" cellpadding="3px" rules="rows"  style="border:solid 1px #777777; border-collapse:collapse; font-family:verdana; font-size:11px; margin-left:auto; margin-right:auto;"><caption>Composition :</caption><tr style="background-color:lightgrey;"><th style="width:140px;">Famille 1</th><th> <input type="range" style="margin-left: 15%; name="fam1" onchange="document.getElementById('selRange1').innerHTML = this.value; updateTotal();" value="0" step="5" max="100" min="0"></input></th><th style="width:50px;"><span style="border: 2px solid black; margin-left: 9%;"><span id="selRange1">0</span> %</th></tr><tr style="background-color:lightgrey;"><th style="width:140px;">Famille 2</th><th> <input type="range" style="margin-left: 15%; name="fam2" onchange="document.getElementById('selRange2').innerHTML = this.value; updateTotal();" value="0" step="5" max="100" min="0"></input></th><th style="width:50px;"><span style="border: 2px solid black; margin-left: 9%;"><span id="selRange2">0</span> %</th></tr></table><p style="width:100px;">Votre compo est remplie à: <span style="border: 2px solid black; margin: 0px 0px 0px 0px;"><span id="case_total">0</span> %</p><input type="hidden" name="verif" value="1"><input type="submit" name="submit" value="Valider votre choix" /></form>

**Kaamo** · 09/10/2013, 17h06

Donc c'est un problème PHP.
Le code généré = afficher le code source grâce à un navigateur internet

Si tu veux passer les valeurs de selRangeX au serveur (php), il faut utiliser le formulaire. Donc, à l'aide d'un input et non d'un span comme tu le fais

**shinzao** · 09/10/2013, 17h18

Ok, j'avais mal compris le "code généré", autant pour moi ...

En faites, c'est pas exactement ce que je souhaite faire. Je souhaite juste recuprer les valeurs des ranges de fam1 et fam2 (ce qui reviens au même vous direz) sauf que ceux là sont déjà dans des inputs

**Kaamo** · 09/10/2013, 17h35

Voilà pourquoi il faut afficher le code généré

Que nous montre t il ?
Vu la coloration syntaxique, il manque une quote " pour fermer l'attribut style au niveau de "fam1" (et ça a l'air d'être pareil pour les autres)

De plus, tu as un warning apparemment :

Notice: Undefined index: verif in E:\epitech\logiciel\WampServer\wamp\www\session\mapage.php on line <i>16</i>

Règle n°1 : toujours regarder l'état du code grâce aux outils développeurs qui l'analysent (F12 Chrome / IE 10. Ctrl + Shift + K ou Firebug pour Firefox)

Onchange + submit

JavaScript

Vue hybride

Discussions similaires

Partager

Partager