You need to sign in to do that
Don't have an account?
SHAIK MOHAMMAD YASEEN
on vfpage need to have a button and input text box. when we type soms text in textbox and press button it should add new row below with the text to dispaly as outputtext
Hi All,
on a vfpage i have a inputtext box and a insert button next to it.
my requirement is when user types some text in the inputtextbox and presees insert button then a new row has to be added below with the text as outputtext.
when the user again types some text in the input textbox and again pressed insert button then the previously added row should go down and the new row should be added with the text input
Please let me know how to achieve. it will be more helpful if code can be shared for the same.
Best Regards,
Mohammad Yaseen.
on a vfpage i have a inputtext box and a insert button next to it.
my requirement is when user types some text in the inputtextbox and presees insert button then a new row has to be added below with the text as outputtext.
when the user again types some text in the input textbox and again pressed insert button then the previously added row should go down and the new row should be added with the text input
Please let me know how to achieve. it will be more helpful if code can be shared for the same.
Best Regards,
Mohammad Yaseen.
This might help you.
<apex:page id="pg">
<apex:pageBlock title="Add text" id="pgb">
<apex:pageBlockSection title="Demo" id="pgs">
<apex:form id="frm">
<apex:inputText id="inputval"/>
<apex:commandButton value="Insert" onclick="addRow();return false;"/>
<apex:outputpanel id="rowToBeAdded">
</apex:outputpanel>
</apex:form>
</apex:pageBlockSection>
</apex:pageBlock>
<script>
function addRow(){
var textval = document.getElementById("{!$Component.pg.pgb.pgs.frm.inputval}").value;
var divToAddText = document.getElementById("{!$Component.pg.pgb.pgs.frm.rowToBeAdded}");
var node = document.createElement("div");
var textnode = document.createTextNode(textval);
node.appendChild(textnode);
if(divToAddText.innerHTML == '' || divToAddText.innerHTML == null){
divToAddText.appendChild(node);
}
else{
divToAddText.insertBefore(node, divToAddText.childNodes[0]);
}
}
</script>
</apex:page>
Please do not forget to mark this thread as SOLVED and answer as the BEST ANSWER if it helpd resolve your issue.
All Answers
This might help you.
<apex:page id="pg">
<apex:pageBlock title="Add text" id="pgb">
<apex:pageBlockSection title="Demo" id="pgs">
<apex:form id="frm">
<apex:inputText id="inputval"/>
<apex:commandButton value="Insert" onclick="addRow();return false;"/>
<apex:outputpanel id="rowToBeAdded">
</apex:outputpanel>
</apex:form>
</apex:pageBlockSection>
</apex:pageBlock>
<script>
function addRow(){
var textval = document.getElementById("{!$Component.pg.pgb.pgs.frm.inputval}").value;
var divToAddText = document.getElementById("{!$Component.pg.pgb.pgs.frm.rowToBeAdded}");
var node = document.createElement("div");
var textnode = document.createTextNode(textval);
node.appendChild(textnode);
if(divToAddText.innerHTML == '' || divToAddText.innerHTML == null){
divToAddText.appendChild(node);
}
else{
divToAddText.insertBefore(node, divToAddText.childNodes[0]);
}
}
</script>
</apex:page>
Please do not forget to mark this thread as SOLVED and answer as the BEST ANSWER if it helpd resolve your issue.
Thanks for your immediate response. your code works as per my need.
can you please help me with one more requirement for the page if we have inserted 3 texts we need to add them in a list sending to controller. can you please help me how can we achieve this. Thanks
Best Regards,
Mohammad Yaseen.
Use following code to solve your problem
Thank you,
Amol Salve
Salesforce Developer