Verrouiller un champ déjà rempli

**Linriss** · 14/01/2019, 16h29

Bonjour,

J'avais pas trop d'idée de titre pour mon problème donc désolé si ce n'est pas clair.

Voici mon problème, un de mes cousins (sadique :p), ma donné une de ses ancennes missions en stage dans un hopital. Créer une application web pour gérer les départs et les arrivés des patients. J'ai réussi à faire la page des départs mais je bloque sur celle des arrivées. Je dois créer un champ service qui est une liste de service (ce qui étais simple ^^) MAIS il peut aller dans plusieurs services différents donc il faut ajouter un bouton "Ajouter un service supplémentaire" qui verrouille la valeur insérer dans le champ précédant (l'utilisateur ne peut plus y touché). Mais je ne sait absolument pas comment faire pour ajouter l'option "verrouillage du champ précédant" même si j'ai quelque piste (qui n'ont rien donné).

J'ai 2 pages pour l'arrivé du patient :

La première qui est v_arrive.php

Code php :

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
<html>
	<head>
		<title>arrivée d'un patient</title>
		<?php
		include ("vues/v_calendrier.php") ;
		?>
	</head>
<form method="POST" action="index.php?uc=ajoutAgent&action=arrivee">
   <legend>Arrivé d'un agent</legend>
 
		<p>
			<label for="Nom">Nom du patient</label>
			<input id="nom" type="text" name="nom" value="" size="30" maxlength="45">
		</p>
		<p>
			<label for="Prenom">Prenom du patient</label>
			<input id="prenom" type="text" name="prenom" value="" size="30" maxlength="45">
		</p>
		<label>Service pour le patient:</label><br>
 
 
				<?php
				include ("vues/v_ajoutLigne.php") ;
				?>
 
 
		</p>
		<p>
			<form>
				Date d'arrivée<input name="datearr"> 
				<input type=button value="selectionner" onclick="displayDatePicker('datearr', false, 'dmy', '.');">
			</form>
		</p>
		<p>
         <input type="submit" value="Valider" name="valider">
         <input type="reset" value="Annuler" name="annuler"> 
      </p>

(v_calendrier fait référence à une fonction php pour saisir le champ date avec un calendrier)

et v_ajoutLigne.php qui est ma fonction JS pour ajouter ma ligne supplémentaire

Code PHP :

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
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
<title>formulaire multichamp</title>
<script type="text/javascript">
function create_champ(i) {
var i2 = i + 1;
 
document.getElementById('leschamps_'+i).innerHTML = '<select name="service" id="service" onchange="go()"><option value="-1">Aucun</option><option value="0">1</option><option value="1">2</option></select>';
document.getElementById('leschamps_'+i).innerHTML += (i <= 10) ? '<br /><span id="leschamps_'+i2+'"><a href="javascript:create_champ('+i2+')">Ajouter un champs</a></span>' : '';
}
</script>
</head>
 
<body>
<?php
if(empty($_POST['valide']))
{
?>
<form enctype="multipart/form-data" action="" method="post">
<select name='service' id='service' onchange='go()'><option value='-1'>Aucun</option>			
				</select>	<br>
<span id="leschamps_1"><a href="javascript:create_champ(1)">Ajouter un champs</a></span>
 
</form>
<?php
}
?>
</body>
</html>

J'ai aussi un contrôleur mais il ne me sert que pour les erreurs donc je pense qu'il n'y a pas besoin de le mettre.
P.S:
1) Mon cousin ne peut pas m'aider car il travaille beaucoup en ce moment et c'set lui qui ma donné ce forum en cas de besoin (et j'en ai besoin :D)
2) Et ce que je peut utiliser <input type="text" value="foo" readonly="readonly" /> dans mon JS ou bien cela ne marchera pas ? (j'ai déjà essayé mais cela na pas verrouillè l'ancien champ)
3) La première liste dans mon champ service n'affiche que "Aucun" et je ne c'est pas pourquoi.

Merci d'avoir lu mon problème et si il y a des coquilles ou des imprécisions dites le moi :).

**Showie** · 17/01/2019, 14h46

Salut,

1) passe lui le bonjour quand même.
2) Tu peut effectivement rajouter l attribut readonly="readonly" pour verrouiller le champ. par contre, tu parles d'un input mais dans ton code je vois des select ? en gros ta fonction actuellement est vraiment incomplète pour faire ce que tu souhaites.
3) C'est normale
ligne 23 : <select name='service' id='service' onchange='go()'><option value='-1'>Aucun</option>
ton select ne contient qu'une option ("Aucun")

Je pense qu'il y a encore quelque mécanisme de base qui te manque pour pouvoir avancer.
Tu devrais regarder un tuto sur les formulaires web, cela t’aiderais grandement à progresser.

**Linriss** · 17/01/2019, 15h11

Bonjour Showie,

Merci de ta réponse je vais suivre ton conseil mais entre temps j'ai revu mon cousin et j'étais totallement à côté de la plaque X).

Ce que je dois faire c'est remplir le formulaire et séléctionner un service. mais le bouton ajouter ligne n'est pas celui que je pensais enfaite cela doit valider le service dans lequelle le patient va et pouvoir en remttre un autre :

Choisir le service : *liste déroulante des services* valider ce service

Service déjà séléctionné :
-cardiologie

Cela doit donné ça du côté utilisateur. Donc cétais vraiment loin de ce que j'avais compris. Mais je dois avouer que je bloque depuis hier vu que je n'ai aucune idée de comment faire, (AJAX ?, fonction JS?, ...). :/

Vu que c'est quelque chose de complétement différent je refait une discussion pour remettre bien les choses ou j'envoie mon code ? ^^

P.S : Je lui passerai le bonjour du forum.

**SpaceFrog** · 17/01/2019, 15h40

Code :

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

onfocus="if(this).value!=''{this.blur();}"

**Linriss** · 17/01/2019, 16h37

Bonjour SpaceFrog,

J'ai une question : Quelle est ce code venu d'ailleur. J'ai chercher et il me semble que c'est du JQuery par contre je n'ai pas compris l'utilité, comment l'utiliser ect... Je pourrai avoir plus de précision s'il te plaît ^^.

(Parce que si c'est que cette ligne qui peut règler mon problème je sais pas comment je vais réagir : soit toute contente, soit dépité X) ).

**Showie** · 17/01/2019, 17h37

Tu peux ne pas trop t'embêter en faisant un select multiple https://jsfiddle.net/7enkLzhy/

c'est pas très beau, mais ça fait le boulot.

**Linriss** · 18/01/2019, 10h15

Bonjour Showie,

Merci de ta réponse. Je me suis rendu compte que j'étais pas assez claire. Donc je vais refaire un exemple mais c'est presque pareil

.

Choisir le service : *liste déroulante des services* valider ce service

Service déjà sélectionné :
-cardiologie

Mais je peut en valider plusieurs du style :

Choisir le service : *liste déroulante des services* valider ce service

Service déjà sélectionné :
-cardiologie
-pneumologie
-Neurologie

Par ailleurs j'ai essayé d'intégré ce que tu m'as donné mais ça ne marche pas

. Donc je donne le code.

v_arrivee (le formulaire)

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
<html>
	<head>
		<title>arrivée du patient</title>
		<?php
                include ("vues/v_calendrier.php") ;
 
                ?>
	</head>
<form method="POST" action="index.php?uc=ajoutPatient&action=arrivee">
   <legend>Arrivé d'un patient</legend>
 
		<p>
			<label for="Nom">Nom du patient(conforme CPAGE)</label>
			<input id="nom" type="text" name="nom" value="" size="30" maxlength="45">
		</p>
		<p>
			<label for="Prenom">Prenom du patient(conforme CPAGE)</label>
			<input id="prenom" type="text" name="prenom" value="" size="30" maxlength="45">
		</p>
 
	<?php 
                include("vues/v_service.php");
        ?>	
 
		<p>
 
				Date d'arrivée<input name="datearr"> 
				<input type=button value="selectionner" onclick="displayDatePicker('datearr', false, 'dmy', '.');">
 
		</p>					
</form>
		<p>
         <input type="submit" value="Valider" name="valider">
         <input type="reset" value="Annuler" name="annuler"> 
      </p>

Et là ou tout ce fait pour le formulaire

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
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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<html>
	<head>
		<title>service</title>
		<script type='text/javascript'>
 
                        function getXhr(){
                                var xhr = null; 
                                if(window.XMLHttpRequest) // Firefox et autres
                                   xhr = new XMLHttpRequest(); 
                                else if(window.ActiveXObject){ // Internet Explorer 
                                   try {
                                        xhr = new ActiveXObject("Msxml2.XMLHTTP");
                                    } catch (e) {
                                        xhr = new ActiveXObject("Microsoft.XMLHTTP");
                                    }
                                }
                                else { // XMLHttpRequest non supporté par le navigateur 
                                   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
                                   xhr = false; 
                                } 
                                return xhr;
                        }
 
                        /**
                        * Méthode qui sera appelée sur le click du bouton
                        */
                        function go(){
                                var xhr = getXhr();
                                // On défini ce qu'on va faire quand on aura la réponse
                                xhr.onreadystatechange = function(){
                                        // On ne fait quelque chose que si on a tout reçu et que le serveur est ok
                                        if(xhr.readyState == 4 && xhr.status == 200){
                                                leselect = xhr.responseText;
                                                // On se sert de innerHTML pour rajouter les options a la liste
                                                document.getElementById('uf').innerHTML = leselect;
                                        }
                                }
 
                                // Ici on va voir comment faire du post
                                xhr.open("POST","vues/v_uf.php",true);
                                // ne pas oublier ça pour le post
                                xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
                                // ne pas oublier de poster les arguments
                                // ici, l'id du service
                                sel = document.getElementById('service');
                                code_service = sel.options[sel.selectedIndex].value;
                                xhr.send("code_service="+code_service); 
                        }
                        
 
                        selection_service = function(){
                                console.log('coucou', $('#service').find('option:selected'));
                                $('#ma_selection').html('');
                                $('#service').find('option:selected').each(function(){
                                $('#ma_selection').append($(this).val() + '<br>');
                                });
                        }
                        
 
                        
                </script>
	</head>
	<body>
		<form>
 
				<label>Service(s)</label><br>
				<select name='service' id='service' multiple onchange='go()'>
					<option value='-1'>Aucun</option>
					<?php
                                                mysql_connect("localhost","root","");
                                                mysql_select_db("gestion_mvt");
                                                $res = mysql_query("SELECT code_service,nom_service FROM service ORDER BY nom_service");
                                                while($row = mysql_fetch_assoc($res)){
                                                        echo "<option value='".$row["code_service"]."'>".$row["nom_service"]."</option>";
                                                }
 
                                        ?>
					<input type="button" value="conserver le service" onclick="selection_service();">
				</select><br><br>
				<label>UF</label>
				<div id='uf' style='display:inline'>
				<select name='uf'>
					<option value='-1'>Choisir un service</option>
				</select>
				</div>
					<p>	
	</form>
				<p id="ma_selection"></p>
	</body>
</html>

P.S : j'avais oublié d'intégré les UF (qui sont des sous service) et on peut en sélectionner plusieurs ils sont bien évidemment relié à une base de données qui prend les uf correspondant aux services ils faut juste que je les affiche aussi mais rien ne presse.

**SpaceFrog** · 21/01/2019, 08h22

Quelle est ce code venu d'ailleur. J'ai chercher et il me semble que c'est du JQuery

Heu non pas du tout c'est du javascript pur sang...
Je teste juste lorsque l'input prend le focus si il contient quelque chose ou pas
si il n'est pas vide j'envoie le focus ailleurs ...

**Linriss** · 21/01/2019, 12h39

Par ailleurs j'avais oublié que je pouvais ouvrir la console pour voir le problème ^^,

Donc l'erreur que j'ai est : "ReferenceError: $ is not defined"

De ce que j'ai vu sur Internet il me faut integrer ceci dans mon JS

Code javascript :

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

1
2
	<script type="text/javascript" src="jquery.js"></script>
	<script type="text/javascript" src="main.js"></script>

Mais l'erreur persiste toujours du coup je ne sait pas du tout pourquoi est-ce que j'appelle mal les fonctions Javascript et Jquery ? (Jquery je l'appelle juste au cas où ) ou autre choses?

**SpaceFrog** · 21/01/2019, 13h05

"ReferenceError: $ is not defined"

Signifie que jquery n'est pas chargé lors de l'interprétation de la ligne ...

A mon avis tu as un souci de chronologie de chargement, il faut charger JQ avant ...

**Linriss** · 21/01/2019, 14h07

c'étais preesque ça

,

enfaite j'ai pris un vieux morceau de code (je crois) du coup j'ai mis ceci

Code javascript :

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

1
2
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript" src="js/nav.js" ></script>

dans le head de ma page et là ça marche je vais juste tenter de faire quelque ajustement selon mes besoins avant de mettre le sujet en résolu (au cas où).

Merci beaucoup

.

[EDIT] J'ai reussi c'éatis tout bête il falliat supprimer

Code javascript :

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

$('#mon_uf').html('');

ici

Code javascript :

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

1
2
3
4
			console.log('je marche aussi', $('#uf').find('option:selected'));
				$('#mon_uf').html('');
				$('#uf').find('option:selected').each(function(){
				$('#mon_uf').append('<p>' + $(this).val() + '</p>');

donc problème régler

Verrouiller un champ déjà rempli

JavaScript

Discussions similaires

Partager

Partager