Utilisation du listener onchange dans une page xhtml

**scrutin** · 09/03/2018, 12h32

Bonjour la communauté, Je voudrais reporter la valeur d'un champs saisie dans un autre champs dans la page. Je veux utiliser onchange. ça ne marche pas. voici le code:

Code xml :

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
<?xml version="1.0" encoding="utf-8" ?>
 
<jsp:root version="1.2" xmlns:jsp="http://java.sun.com/JSP/Page"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ice="http://www.icesoft.com/icefaces/component">
	<jsp:directive.page contentType="text/html;charset=utf-8" />
	<script type="text/javascript">
function change() {
	document.getElementById('numOprFin').value = document.getElementById('numOprDeb').value;  
	return true;
}
</script>
	<f:view>
		<ice:form id="form1">
		<ice:panelCollapsible expanded="true">  		
					<ice:panelGroup >
								<ice:outputText value="#{numberOp}" styleClass="inputTextR" />
								<ice:inputText value="#{ExerciceBean.numOprDeb}" id="numOprDeb" partialSubmit="true" onchange="change();" />
								<ice:inputText value="#{ExerciceBean.numOprFin}" id="numOprFin" partialSubmit="true" />		
            		</ice:panelGroup>
				</ice:panelCollapsible>
		</ice:form>
	</f:view>
</jsp:root>

**scrutin** · 20/03/2018, 17h37

Merci Bisûnûrs d'avoir déplacer ce furum dans la partie javascript.
merci

**psychadelic** · 20/03/2018, 18h03

ça me semble bizare ici, on est dans du Java, pas du Javascript => https://www.developpez.net/forums/f2...ment-web-java/

Exemple : je ne vois même pas ce que peut faire

Code java :

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

<ice:inputText value="#{ExerciceBean.numOprDeb}" id="numOprDeb" partialSubmit="true" onchange="change();" />

et je n'ai aucune envie d'aller apprendre quoi que ce soit en java, alors que je fréquente ici la partie du forum sur JavaScript

**NoSmoking** · 20/03/2018, 18h08

Bonjour,
il faut nous mettre le code HTML généré, Ctrl + U sur la plupart des navigateurs, et non le code serveur.

Pourquoi le return true dans ta fonction change() ?

**scrutin** · 20/03/2018, 21h02

J'ai enlevé la partie

Code :

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

return=true;

Mais j'ai le meme constat.

**NoSmoking** · 21/03/2018, 10h48

il faut nous mettre le code HTML généré, Ctrl + U sur la plupart des navigateurs, et non le code serveur.

pas vu !

pour Info :
Avec l'événement onchange il faut quitter le champ pour que celui-ci se déclenche, si tu souhaites un changement immédiat il te faut utiliser oninput.

**scrutin** · 07/05/2018, 15h26

Voici le code généré

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
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html id="document:html" lang="fr"><head><meta content="text/html; charset=utf-8" http-equiv="Content-Type" /><link href="./css/rime/rime.css" rel="stylesheet" type="text/css" /><link href="./css/style.css" rel="stylesheet" type="text/css" /><script language="javascript" src="/dsprv/grh03/js/template.js"></script>
<script language="javascript" src="/dsprv/grh03/js/fonctionControl.js"></script>
<title id="document:title">ACCEPTATION DES PIÈCES & ACTES DÉPOSÉS</title>
<meta content="Rendered by ICEFaces D2D" name="icefaces" /><script src="/dsprv/grh03/xmlhttp/1525695549114/icefaces-d2d.js" type="text/javascript"></script>
<script src="/dsprv/grh03/xmlhttp/1525695549114/ice-extras.js" type="text/javascript"></script>
<script type="text/javascript">try { document.execCommand('BackgroundImageCache', false, true); } catch(e) {}</script></head>
<body class="bodyt" id="document:body"><iframe frameborder="0" id="history-frame:SV9qoRjvKCTSLdlV-9xQew:1" name="history-frame:SV9qoRjvKCTSLdlV-9xQew:1" src="/dsprv/grh03/xmlhttp/blank" style="z-index: 10000; visibility: hidden; width: 0; height: 0; position: absolute; opacity: 0.22; filter: alpha(opacity=22);" title="Icefaces Redirect"></iframe>
<div id="nonscrolling"><form action="javascript:;" class="iceFrm" enctype="application/x-www-form-urlencoded" id="j_id12" method="post" onsubmit="return false;"><script id="j_id12script" type="text/javascript">$element(document.getElementById('j_id12')).captureAndRedirectSubmit();</script><input name="j_id12" type="hidden" value="j_id12" /><input name="icefacesCssUpdates" type="hidden" value="" /><div id="j_id12:stateSavingMarker"><input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="1" /><input name="javax.faces.RenderKitId" type="hidden" value="ICEfacesRenderKit" /></div>
<hr /><div id="j_id12hdnFldsDiv" style="display:none;"></div></form></div>
<table><tr><td valign="top"><div class="tree" id="scrolling"></div></td><td class="content" valign="top"><div xmlns:jsp="http://java.sun.com/JSP/Page"><div class="icePnlGrp" id="j_id38"><div class="demoWindow"><jsp:root version="1.2" xmlns:jsp="http://java.sun.com/JSP/Page">
	<jsp:directive.page contentType="text/html;charset=utf-8"></jsp:directive.page>
<script type="text/javascript">
function change() {
        
        document.getElementById('numOprFin').value = document.getElementById('numOprDeb').value;  
        alert("dsffsd"+document.getElementById('numOprFin').value);
}</script>
<jsp:root version="1.2" xmlns:jsp="http://java.sun.com/JSP/Page">
	<jsp:directive.page contentType="text/html;charset=utf-8"></jsp:directive.page>
</jsp:root>
<link href="./css/Themes/Blue.css" rel="stylesheet" type="text/css" /><form action="javascript:;" class="iceFrm" enctype="application/x-www-form-urlencoded" id="form1" method="post" onsubmit="return false;"><script id="form1script" type="text/javascript">$element(document.getElementById('form1')).captureAndRedirectSubmit();</script><input name="form1" type="hidden" value="form1" /><input name="icefacesCssUpdates" type="hidden" value="" /><div id="form1:stateSavingMarker"><input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="1" /><input name="javax.faces.RenderKitId" type="hidden" value="ICEfacesRenderKit" /></div>
<jsp:root version="1.2" xmlns:jsp="http://java.sun.com/JSP/Page">
	<jsp:directive.page contentType="text/html;charset=utf-8"></jsp:directive.page>
 
</jsp:root>
 
<div class="icePnlClpsbl" id="form1:j_id281">
<div class="icePnlClpsblCnt"><div class="icePnlGrp" id="form1:j_id285"><div align="center"><table class="icePnlGrd" id="form1:j_id287"><tbody><tr class="icePnlGrdRow1"><td class="icePnlGrdCol1" id="form1:j_id287-0-0"><span class="iceOutTxt inputTextR" id="form1:j_id288">N&deg; d&eacute;p&ocirc;t</span></td><td class="icePnlGrdCol2" id="form1:j_id287-0-1"><input class="iceInpTxt inputText" id="form1:numOprDeb" name="form1:numOprDeb" onblur="setFocus('');iceSubmitPartial(form, this, event);" onchange="javascprit:change();" onfocus="setFocus(this.id);" onkeypress="iceSubmit(form,this,event);" onmousedown="this.focus();" style="width: 77px; " type="text" value="26398" /></td><td class="icePnlGrdCol1" id="form1:j_id287-0-2"><input class="iceInpTxt inputText" id="form1:numOprFin" name="form1:numOprFin" onblur="setFocus('');iceSubmitPartial(form, this, event);" onfocus="setFocus(this.id);" onkeypress="iceSubmit(form,this,event);" onmousedown="this.focus();" style="width: 77px; " type="text" value="" /></td></tr>
<tr class="icePnlGrdRow2"><td class="icePnlGrdCol1" id="form1:j_id287-1-0"><span class="iceOutTxt inputTextR" id="form1:j_id289">Exercice</span></td><td class="icePnlGrdCol2" id="form1:j_id287-1-1"><input class="iceInpTxt inputText" id="form1:j_id290" name="form1:j_id290" onblur="setFocus('');iceSubmitPartial(form, this, event);" onfocus="setFocus(this.id);" onkeypress="iceSubmit(form,this,event);" onmousedown="this.focus();" style="width: 77px; " type="text" value="" /></td><td class="icePnlGrdCol1" id="form1:j_id287-1-2"><input class="iceInpTxt inputText" id="form1:j_id291" name="form1:j_id291" onblur="setFocus('');iceSubmitPartial(form, this, event);" onfocus="setFocus(this.id);" onkeypress="iceSubmit(form,this,event);" onmousedown="this.focus();" style="width: 77px; " type="text" value="" /></td></tr>
<tr class="icePnlGrdRow1"><td class="icePnlGrdCol1" id="form1:j_id287-2-0"><span class="iceOutTxt inputTextR" id="form1:j_id292">Date de d&eacute;p&ocirc;t</span></td><td class="icePnlGrdCol2" id="form1:j_id287-2-1"><div class="iceSelInpDatePopup" id="form1:j_id293_rd"><input class="iceSelInpDateInput" id="form1:j_id293" name="form1:j_id293" onblur="setFocus('');iceSubmitPartial(form, this, event);" onfocus="setFocus('');" onkeypress="iceSubmit(form,this,event);" type="text" value="" /><input alt="Ouvrir le calendrier popup" class="iceSelInpDateOpenPopup" id="form1:j_id293_cb" name="form1:j_id293_cb" onclick="document.forms['form1']['form1:_idcl'].value='form1:j_id293_cb';document.forms['form1']['form1:_idform1:j_id293sp'].value='toggle';iceSubmitPartial( document.forms['form1'], this,event);Ice.Calendar.addCloseListener('form1:j_id293','form1','form1:_idcl','form1:_idform1:j_id293sp');return false;" onfocus="setFocus('');" src="/dsprv/grh03/xmlhttp/css/xp/css-images/spacer.gif" title="Ouvrir le calendrier popup" type="image" /></div></td><td class="icePnlGrdCol1" id="form1:j_id287-2-2"><div class="iceSelInpDatePopup" id="form1:j_id294_rd"><input class="iceSelInpDateInput" id="form1:j_id294" name="form1:j_id294" onblur="setFocus('');iceSubmitPartial(form, this, event);" onfocus="setFocus('');" onkeypress="iceSubmit(form,this,event);" type="text" value="" /><input alt="Ouvrir le calendrier popup" class="iceSelInpDateOpenPopup" id="form1:j_id294_cb" name="form1:j_id294_cb" onclick="document.forms['form1']['form1:_idcl'].value='form1:j_id294_cb';document.forms['form1']['form1:_idform1:j_id294sp'].value='toggle';iceSubmitPartial( document.forms['form1'], this,event);Ice.Calendar.addCloseListener('form1:j_id294','form1','form1:_idcl','form1:_idform1:j_id294sp');return false;" onfocus="setFocus('');" src="/dsprv/grh03/xmlhttp/css/xp/css-images/spacer.gif" title="Ouvrir le calendrier popup" type="image" /></div></td></tr>
<tr class="icePnlGrdRow2"><td class="icePnlGrdCol1" id="form1:j_id287-3-0"><span class="iceOutTxt inputTextR" id="form1:j_id295">Utilisateur cr&eacute;ateur</span></td><td class="icePnlGrdCol2" id="form1:j_id287-3-1"><select class="iceSelOneMnu inputText" id="form1:j_id296" name="form1:j_id296" onblur="setFocus('');" onchange="setFocus('');iceSubmitPartial(form, this, event);" onfocus="setFocus(this.id);" size="1"><option value=""></option>
<option value="user_recettes">user_recettes</option></select></td><td class="icePnlGrdCol1" id="form1:j_id287-3-2"><span class="iceOutTxt" id="form1:j_id299"></span></td></tr></tbody></table></div></div></div><input name="form1:j_id281Expanded" type="hidden" /></div>
 
</div>
</div>
<div id="form1hdnFldsDiv" style="display:none;"><input name="form1:j_id316" type="hidden" /><input name="form1:_idcl" type="hidden" /><input name="form1:j_id367" type="hidden" /><input name="form1:j_id393" type="hidden" /><input name="form1:_idform1:j_id294sp" type="hidden" /><input name="form1:_idform1:j_id293sp" type="hidden" /><input name="form1:j_id429" type="hidden" /></div></form>
</jsp:root></div>
<br /></div></div></td></tr></table>
<script type="text/javascript">
     
       Setup();</script>
<script id="SV9qoRjvKCTSLdlV-9xQew:1:dynamic-code" type="text/javascript"></script>
</body></html>

**psychadelic** · 10/05/2018, 04h37

Code :

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

document.getElementById('numOprFin')

Code :

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

 <input class="iceInpTxt inputText" id="form1:numOprFin"

forcément, c'est pas pareil...

PS: t’aurai pu beautifier ton source avant de le poster

**scrutin** · 10/05/2018, 17h00

beautifier c'est embellir ou bien???
Si ce n'est pas pareil. Que dois je faire. merci

**psychadelic** · 10/05/2018, 19h15

https://marketplace.visualstudio.com...okyQR.beautify

Mais ce qui n'est pas pareil c'est l'id que tu utilises dans le code JavaScript et id que tu utilises dans le code HTML ( comme je te les ait indiqués en rouge )

ou, si tu préfère, il n'existe aucun élément ayant pour id='numOprFin' ( ni même 'numOprDeb') dans ta page, donc ta fonction "change" ne pouvant pas trouver de tels éléments, ben elle fait rien.

et au fait, " javascprit " n'est pas un langage reconnu en html

**scrutin** · 11/05/2018, 00h38

donc nous devons faire

Code :

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

document.getElementById('form1:numOprFin');

form1 est l'id du formulaire. numOprFin l'id du champs numero fin

**psychadelic** · 11/05/2018, 01h09

Envoyé par scrutin

numOprFin l'id du champs numero fin

non, l'ID du numéro fin c'est 'form1:numOprFin' au complet.
et c'est idem pour le numéro de début

il faut aussi corriger le javascprit

**scrutin** · 15/05/2018, 14h46

J'ai modifié mon javascript:

Code :

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

1
2
3
4
function change() {
 
	document.getElementById('form1:numOprFin').value = document.getElementById('form1:numOprDeb').value;  
}

Mais j'ai le meme probléme

**psychadelic** · 15/05/2018, 14h49

Envoyé par psychadelic

et au fait, " javascprit " n'est pas un langage reconnu en html

Envoyé par psychadelic

il faut aussi corriger le javascprit

**psychadelic** · 15/05/2018, 16h08

Envoyé par scrutin

beautifier c'est embellir ou bien???

=> à partir de la 2eme minute

**NoSmoking** · 15/05/2018, 18h17

L'attribut language="javascript" est effectivement « deprecaded » depuis HTML 4.x autant dire une éternité mais cela n’empêchera pas le script de fonctionner.

Je serais également curieux de savoir ce qu'il y a dans les autres fonctions appelées avant ta fonction change().

Code html :

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

<input class="iceInpTxt inputText" id="form1:numOprDeb" name="form1:numOprDeb" onblur="setFocus('');iceSubmitPartial(form, this, event);" onchange="javascprit:change();" onfocus="setFocus(this.id);" onkeypress="iceSubmit(form,this,event);" onmousedown="this.focus();" style="width: 77px; " type="text" value="26398" />

et là oui il y aurait à dire sur cette ligne !

**psychadelic** · 15/05/2018, 18h42

Envoyé par NoSmoking

et là oui il y aurait à dire sur cette ligne !

à ton avis, pourquoi je lui ai demandé de beautifier son code ?
cette ligne fait 10km, a défaut de pouvoir se relire, sa première urgence c'est d'abord de présenter son code proprement.

**NoSmoking** · 15/05/2018, 19h27

On a bien compris qu'une bonne indentation est gage de débogage/maintenance plus aisé mais existe-t-il un « Formatter/Beautifier » qui rendrait le code d'une balise lisible comme cela

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
<input class="iceInpTxt inputText" 
  id="form1:numOprDeb" 
  name="form1:numOprDeb" 
  onblur="setFocus('');iceSubmitPartial(form, this, event);" 
  onchange="javascprit:change();" 
  onfocus="setFocus(this.id);" 
  onkeypress="iceSubmit(form,this,event);" 
  onmousedown="this.focus();" 
  style="width: 77px; " 
  type="text" 
  value="26398"
/>

?

Utilisation du listener onchange dans une page xhtml

JavaScript

Discussions similaires

Partager

Partager