Tableau Forme select ; interaction JavaScript

**jbyvosges** · 19/08/2017, 17h04

Bonjour,
J'ai écrit plusieurs formulaires, en php, dont certains contiennent des tables auxquelles on peut ajouter des lignes (une à la fois), grâce à un bouton "+" et à un petit code JavaScript. Cela fonctionne bien.
Cette fois, j'ai une cellule de ma table qui est un menu déroulant (select et option) et là, je ne trouve pas de solution JavaScript. Comme le php est interprété d'un côté et le script de l'autre, je me doutais bien que ma solution ne fonctionnerait pas. Voici ce que j'ai fait :
côté php :

Code :

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

1
2
3
4
5
6
7
8
9
10
<td><select name="select_1">
<?php
				while( $var = $resultat->fetch() )
	   				echo "<option value=\"" . $var->Nom . "\">" . $var->Nom . "</option>";
?>
    	</select></td>
 
			<td><input etc ...></td>
			etc...
			<td><input type="button" value="+" onclick="location.href='javascript:monscript(2)'"></td>

dans le javascript :

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
 function monscript(i) {
	var i2 = i + 1;
	var i3 = i - 1;
    var table = document.getElementById("matable");
    var ligne = table.rows[i3];
    ligne.deleteCell(5)  /* le bouton + est la cellule 5 */
    var row = table.insertRow(i);
    var cell1 = row.insertCell(0);
    etc.
    var cell6 = row.insertCell(5);
    cell1.innerHTML = '<input name="nom_'+i+'" ....>';
    cell3.innerHTML = '<select name="select_'+i+'">&lt;?php while( $var = $resultat-&gt;fetch() ){echo "<option value=\" . $var-&gt;Nom . \">" . $var-&gt;Nom . "</option>"; } ?> </select>';
    ...
    cell6.innerHTML = '<input type="button" value="+" onclick="location.href=\'javascript:monscript('+i2+')\'">';
 
}

J'avoue que je suis débutant (c'est peu dire) en JavaScript et je me demande s'il y a une solution à mon problème (et si la question est posée au bon endroit) . Quelqu'un aurait une solution dans ses tiroirs ? Merci d'avance

**badaze** · 20/08/2017, 12h26

Est-ce que tu pensais à ce qui suit ? Si oui alors il te faut ajax (ici avec jquery).

Dans le script php, tu constitues ton select avec les données de ta ou tes tables et tu fais un print.

ATTENTION. Le script que j'ai posté n'est qu'un exemple. Si tu utilises une technique de ce genre, il faut que tu sécurises les paramètres passés à la page.

Code html :

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
 
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script>
function toto(anId) {
  $(function() {
  res = Math.random();
  $.get('test9340b.php?r='+res+'&id='+anId, function(data2) {
  $('#'+anId).html(data2);       
     });
  });
}
function monscript()
{
 var table = document.getElementById("matable");
 var nRow  = table.rows.length;
 var row   = table.insertRow(nRow);
 
 var cell1       = row.insertCell(0);
 var id          = 'c'+nRow+'_1';
 cell1.id        = id;
 toto(id);
}
</script>
</head>
<body>
<input type="button" value="+" onclick="monscript()"/>
<table id="matable">
</table>
</body>
</html>

test9340b.php

Code php :

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

1
2
3
4
5
6
7
8
9
 
<?php
$id   = 'select_'.$_GET['id'];
$html = "<select name='$id' id='$id'>"
      . "<option value='1'>1</option>"
      . "<option value='2'>2</option>"
   . "<option value='3'>3</option>"
   . "</select>";
print $html;

**jbyvosges** · 20/08/2017, 12h48

Bonjour et merci pour ta réponse.
Je vais l'essayer et aussi essayer de comprendre. Ça va prendre un peu de temps.

**jbyvosges** · 22/08/2017, 17h34

Bonjour.

J'ai pris un peu de temps pour faire des essais. Dans le second fichier, j'ai mis (en autres)

Code :

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

1
2
3
4
5
6
$id   = 'select_'.$_GET['id'];
	$html = "<select name='$id' id='$id'>";
	while( $var = $resultat->fetch() )
	   	$html .= "<option value=\"" . $var->Nom . "\">" . $var->Nom . "</option>";
	$html .= "</select>";
	print $html;

Et ça a l'air de bien fonctionner. Je ré-interroge ma base de données avec les mêmes critères chaque fois que je crée une nouvelle ligne, mais je ne pense ps que ce soit contraignant.
Il ne me reste plus qu'à implémenter le code dans les bonnes fonctions avec les bonnes valeurs et ça devrait coller. Dans ce cas, je mettrais le problèlme à 'Résolu". Merci encore.

**jbyvosges** · 24/08/2017, 15h31

Bonjour.

Voilà : c'est terminé; mon logiciel fonctionne correctement, mais :
1) J'ai regardé Jquery.js : c'est absolument abscons. Comment fait-on pour apprendre à s'en servir ?
2) Dans la partie

Code :

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

$.get('test2.php?id='+anId, function(data2) {

.... est-il possible de remplacer l'appel à un fichier séparé (test2.php) par l'appel à une fonction ?

**badaze** · 24/08/2017, 16h28

Si tu ne veux pas utiliser ajax et si tes selects sont toujours les mêmes tu peux créer les select en mettant le code html dans une variable ou une fonction qui te sert ensuite à remplir le innerHTML de ta cellule.

**jbyvosges** · 24/08/2017, 16h46

Ça fonctionne bien comme ça. Je vais garder cette solution. Mes formulaires sont faits pour modifier les données de mon site jbyorchid.fr, donc, à priori je serai le seul à m'en servir : pas besoin de passer trop te temps à peaufiner et à sécuriser. Jusqu'à présent, je remplissais directement la base de données avec phpMyAdmin. Étant à la retraite, j'ai voulu faire ce logiciel pour ne pas oublier le peu que je savais en php !
Merci encore

Tableau Forme select ; interaction JavaScript

EDI, CMS, Outils, Scripts et API PHP

Discussions similaires

Partager

Partager