Utilisation du listener onchange dans une page xhtml

Version imprimable

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:

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>

20/03/2018, 17h37
scrutin

Merci Bisûnûrs d'avoir déplacer ce furum dans la partie javascript.
merci
20/03/2018, 18h03
psychadelic

ç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:

<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 8O
20/03/2018, 18h08
NoSmoking

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() ?
20/03/2018, 21h02
scrutin

J'ai enlevé la partie

Code:

return=true;

Mais j'ai le meme constat.
21/03/2018, 10h48
NoSmoking

Citation:

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

:koi: 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.

Voici le code généré

Code:

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>

10/05/2018, 04h37
psychadelic

Code:

document.getElementById('numOprFin')

Code:

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

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

PS: t’aurai pu beautifier ton source avant de le poster :roll:
10/05/2018, 17h00
scrutin

beautifier c'est embellir ou bien???
Si ce n'est pas pareil. Que dois je faire. merci
10/05/2018, 19h15
psychadelic

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
11/05/2018, 00h38
scrutin

donc nous devons faire

Code:

document.getElementById('form1:numOprFin');

form1 est l'id du formulaire. numOprFin l'id du champs numero fin
11/05/2018, 01h09
psychadelic

Citation:

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

J'ai modifié mon javascript:

Code:

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

Mais j'ai le meme probléme

15/05/2018, 14h49
psychadelic

Citation:

Envoyé par psychadelic

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

Citation:

Envoyé par psychadelic

il faut aussi corriger le javascprit
15/05/2018, 16h08
psychadelic

Citation:

Envoyé par scrutin

beautifier c'est embellir ou bien???

https://www.youtube.com/watch?v=dc21bhbnrZk

=> à partir de la 2eme minute
15/05/2018, 18h17
NoSmoking

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:

<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 !
15/05/2018, 18h42
psychadelic

Citation:

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.

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:

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" />
?