+ Start a Discussion
SHAIK MOHAMMAD YASEENSHAIK 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.
Best Answer chosen by SHAIK MOHAMMAD YASEEN
Karan Shekhar KaulKaran Shekhar Kaul
Hi Mate,

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

Karan Shekhar KaulKaran Shekhar Kaul
Hi Mate,

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.
This was selected as the best answer
SHAIK MOHAMMAD YASEENSHAIK MOHAMMAD YASEEN
Hi Karan Shekhar Kaul,


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.
Amol Salve 14Amol Salve 14
Hello 
Use following code to solve your problem
<apex:page >
script>
function addRow(){
    
    var textval = document.getElementById("inputval").value;
    var divToAddText = document.getElementById("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:form id="frm">
<apex:inputText id="inputval"/>
<apex:commandButton value="Insert" onclick="addRow();return false;"/>
<apex:outputpanel id="rowToBeAdded">

</apex:outputpanel>
</apex:form>
<

</apex:page>

Thank you,
Amol Salve
Salesforce Developer