+ Start a Discussion
prasanth puvvada 4prasanth puvvada 4 

output not coming in visualfroce javascript program

hi, at output VF page, i have 2 input text fieds.  if i enter text and click on submit then the value should appear in the 2nd text box and also display at output label.  Here no error message is showing but it is not generating any output after click on submit button.    

please help.
 
<apex:page id="name">
<script>
function result()
{
var input=document.getElementById('name:fm:pb1:pbs1:pbsi1:in1').value;
document.getElementById('name:fm:pb1:pbs1:pbsi2:in2').value=input;
document.getElementById('name:fm:pb1:pbs1:out3').InnerHTML='my name'+input;

}

</script>

<apex:form id="fm">
<apex:pageblock id="pb1">
<apex:pageblocksection id="pbs1">

<apex:pageblocksectionitem id="pbsi1">
<apex:outputlabel value="enter u r name" id="out1"/>
<apex:inputtext id="in1" />
</apex:pageblocksectionitem>
<br/><br/>
<br/>
<br/>
<br/>

<apex:commandbutton value="submit onclick" id="c1" onclick="result();" />
<apex:commandbutton value="submit oncomplete" id="c2" oncomplete="result();" />
<br/>
<br/>
<br/>
<br/>
<br/>
<apex:pageblocksectionitem id="pbsi2">
<apex:outputlabel value="my name is:" id="out2" />
<apex:inputtext id="in2" />
</apex:pageblocksectionitem>
<apex:outputlabel value="written by js is: " id="out3" /> 

</apex:pageblocksection>
</apex:pageblock>
</apex:form>
</apex:page>

 
Best Answer chosen by prasanth puvvada 4
Arunkumar RArunkumar R
Hi Prasanth,

Can you try the below code,
 
<apex:page id="name">
<script>
function result()
{
var input=document.getElementById('name:fm:pb1:pbs1:pbsi1:in1').value;
document.getElementById('name:fm:pb1:pbs1:pbsi2:in2').value=input;
document.getElementById('name:fm:pb1:pbs1:out3').innerHTML='my name'+input;

}

</script>

<apex:form id="fm">
<apex:pageblock id="pb1">
<apex:pageblocksection id="pbs1">

<apex:pageblocksectionitem id="pbsi1">
<apex:outputlabel value="enter u r name" id="out1"/>
<apex:inputtext id="in1" />
</apex:pageblocksectionitem>
<br/><br/>
<br/>
<br/>
<br/>

<apex:commandbutton value="submit onclick" id="c1" onclick="result();" reRender="pbsi2"/>
<apex:commandbutton value="submit oncomplete" id="c2" oncomplete="result();" reRender="pbsi2"/>
<br/>
<br/>
<br/>
<br/>
<br/>
<apex:pageblocksectionitem id="pbsi2">
<apex:outputlabel value="my name is:" id="out2" />
<apex:inputtext id="in2" />
</apex:pageblocksectionitem>
<apex:outputlabel value="written by js is: " id="out3" /> 

</apex:pageblocksection>
</apex:pageblock>
</apex:form>
</apex:page>

Change made in your code:

1. In line no: 7 changed InnerHTML to innerHtml. Since Javascript is case sensitive.
2. In line no: 26, 27, used the reRender attribute to avoid whole page refresh.

All Answers

Arunkumar RArunkumar R
Hi Prasanth,

Can you try the below code,
 
<apex:page id="name">
<script>
function result()
{
var input=document.getElementById('name:fm:pb1:pbs1:pbsi1:in1').value;
document.getElementById('name:fm:pb1:pbs1:pbsi2:in2').value=input;
document.getElementById('name:fm:pb1:pbs1:out3').innerHTML='my name'+input;

}

</script>

<apex:form id="fm">
<apex:pageblock id="pb1">
<apex:pageblocksection id="pbs1">

<apex:pageblocksectionitem id="pbsi1">
<apex:outputlabel value="enter u r name" id="out1"/>
<apex:inputtext id="in1" />
</apex:pageblocksectionitem>
<br/><br/>
<br/>
<br/>
<br/>

<apex:commandbutton value="submit onclick" id="c1" onclick="result();" reRender="pbsi2"/>
<apex:commandbutton value="submit oncomplete" id="c2" oncomplete="result();" reRender="pbsi2"/>
<br/>
<br/>
<br/>
<br/>
<br/>
<apex:pageblocksectionitem id="pbsi2">
<apex:outputlabel value="my name is:" id="out2" />
<apex:inputtext id="in2" />
</apex:pageblocksectionitem>
<apex:outputlabel value="written by js is: " id="out3" /> 

</apex:pageblocksection>
</apex:pageblock>
</apex:form>
</apex:page>

Change made in your code:

1. In line no: 7 changed InnerHTML to innerHtml. Since Javascript is case sensitive.
2. In line no: 26, 27, used the reRender attribute to avoid whole page refresh.
This was selected as the best answer
prasanth puvvada 4prasanth puvvada 4
sir thankyou very much for your code.   Sir i written the 7th line for displaying the textbox data at 34th line (as output label). everything is working except this. could u find the error in it.
Arunkumar RArunkumar R
Prasanth, 

In output label it showing textbox value, the above code is working fine. Did you tried the above code? If i understood wrongly, can you elobarate your problem exactly?
prasanth puvvada 4prasanth puvvada 4
sir, thankyu verymuch, the code is working well.....