Javascript Question

Sending values to inputs with js

I have the following form:

<h:form id="formprueba">

<!-- Panel -->
<div class="panel panel-info" style="margin-top:1%; margin-left:2%; margin-right:2%;">
<div class="panel-body">
<p:panel id="panel" widgetVar="panelwv" header="#{msg.Sgc005tit}" toggleable="true" collapsed="false" style="margin-top:1%; margin-left:1%; margin-right:1%;">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4">
<p:inputText id="codigo" style="margin-bottom:3px; margin-top:3px; width:200px; height:45px;" maxlength="50" required="true" requiredMessage="#{bd.getMessage('htmlvalidate')}" value="#{prueba.codigo}" />
<p:watermark for="codigo" value="#{msg.sgc001cod}" />
<p:spacer height="1" />
<p:message for="codigo" />
<p:inputText id="desc" style="margin-bottom:3px; margin-top:3px; width:200px; height:45px;" maxlength="100" required="true" requiredMessage="#{bd.getMessage('htmlvalidate')}" value="#{prueba.desc}" />
<p:watermark for="desc" value="#{msg.sgc001des}" />
<p:spacer height="1" />
<p:message for="desc" />
</div>
</div>
<h:inputText id="vop" value="#{prueba.validarOperacion}" />
</p:panel>
</div>
</div>


<!-- Main content -->
<section class="content">
<div class="row">
<div class="col-xs-12">

<div class="box">
<div class="box-header">
<h3 class="box-title">Data Table With Full Features</h3>
</div>
<!-- /.box-header -->
<div class="box-body">
<table id="tbResult" class="table table-bordered table-striped" cellspacing="0" width="100%">
<thead>
<tr>
<th width="5%">
<center>
<p:commandLink onclick="fm_check('toDelete',true)"><i class="fa fa-trash fa-2x" title="#{msg.borrar}"></i>
</p:commandLink>
</center>
</th>
<th>#{msg.Sgc001tbcod}</th>
<th>#{msg.Sgc001tbdes}</th>
<th width="10%">
<center>#{msg.bvt001TbEnviar}</center>
</th>
</tr>
</thead>
<tbody>
<c:forEach items="#{prueba.table}" varStatus="loop">
<tr>
<td width="5%">
<center>
<input type="checkbox" name="toDelete" class="chk" value="#{prueba.vltabla[loop.index][0]}" />
</center>
</td>
<td>
<h:outputText value="#{prueba.vltabla[loop.index][0]}" />
</td>
<td>
<h:outputText value="#{prueba.vltabla[loop.index][1]}" />
</td>
<td width="10%">
<center><i title="Enviar" onclick="enviar('#{prueba.vltabla[loop.index][0]}','#{prueba.vltabla[loop.index][1]}','1');" class="fa fa-pencil-square-o fa-2x text-info" onmouseover="" style="cursor: pointer;"></i>
</center>
</td>
</tr>
</c:forEach>
</tbody>
<tfoot>
<tr>
<th width="5%">
<center>
<p:commandLink onclick="fm_check('toDelete',true)"><i class="fa fa-trash fa-2x" title="#{msg.borrar}"></i>
</p:commandLink>
</center>
</th>
<th>#{msg.Sgc001tbcod}</th>
<th>#{msg.Sgc001tbdes}</th>
<th width="10%">
<center>#{msg.bvt001TbEnviar}</center>
</th>
</tr>
</tfoot>
</table>
</div>
<!-- /.box-body -->
</div>
<!-- /.box -->
</div>
<!-- /.col -->
</div>
<!-- /.row -->
</section>

</h:form>


and this JS:

function enviar(vT0,vT1,vT2){
alert("Llamo al metodo");
alert("codigo: " + vT0);
alert("desc: " + vT1);
alert("vop: " + vT2);
document.getElementById("formprueba:codigo").value = rTrim(vT0);
document.getElementById("formprueba:desc").value = rTrim(vT1);
document.getElementById("formprueba:vop").value = rTrim(vT2);
//updateInput('formprueba:codigo', '#F2F2F2');
alert("final de la operacion");
}


The alerts print the desired values that I want to send to their respective inputs, but the values are not sent. What am I doing wrong here?

When clicking the image at the column editar it should send the values to their respective inputs. What am i missing?

I just updated the JS and it doesnt print the las alert... i asume there's something wrong when it reaches the first document.getElementById("formprueba:codigo").value = rTrim(vT0);

I ask for some guidance please.

Answer

Your code is difficult to test, but I can see that you're putting the name of the form when selecting the inputs by id. So, instead of

document.getElementById("formprueba:codigo").value = rTrim(vT0);
document.getElementById("formprueba:desc").value = rTrim(vT1);
document.getElementById("formprueba:vop").value = rTrim(vT2);

you can try

document.getElementById("codigo").value = rTrim(vT0);
document.getElementById("desc").value = rTrim(vT1);
document.getElementById("vop").value = rTrim(vT2);
Comments