function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
UrsfriendlyUrsfriendly 

How to add inputfields on VF page dynamically and get error messages.............?

 

please help me in the following scenario,

 

Scenario:Take standard object voters,on VF page initially 5 input text boxes to enter voter names rows wise like,

 

 EnterName1=======================

 EnterName2=======================

 EnterName3=======================

-------------------------------------------------------

------------------------------------------------------------  like so on

 

         ADDMORE     SAVE

 

when i click on add more ,5 more rows added to the page,when i click on save ,if any one of the inputfield is  empty,then error message sholud  throw at the side of that empty inputfield

 

 

Thank U

Best Answer chosen by Admin (Salesforce Developers) 
Pradeep_NavatarPradeep_Navatar

Below is the sample code to add the dynamically row in  and validate them-
<apex:page>
<body>
<form>
    <table id="TableId">
      <thead>
                <tr>
                  <th scope="col" class="num"></th>
                  <th scope="col" class="fname">First Name</th>
                  <th scope="col" class="lname">Last Name</th>
                  <th scope="col" class="email">Email</th>
                </tr>
      </thead>
      <tbody id="tablebody">
                <tr>
                  <td class="num">1.</td>
                  <td><input type="text" name="" value="" id="name1"/></td>
                  <td><input type="text" name="" value="" id="last1"/></td>
                  <td><input type="text" name="" value="" id="email1"/></td>
                </tr><tr>
                <td class="num">2.</td>
                  <td><input type="text" name="" value="" id="name2"/></td>
                  <td><input type="text" name="" value="" id="last2"/></td>
                  <td><input type="text" name="" value="" id="email2"/></td>
                </tr>
                 </tbody>
      <tfoot>
                <tr>
                  <td><input type="Button" value="Save" onclick="Validate();"/></td>
                  <td colspan="2"><a onclick="InsertRow();">Add More 5 Records</a></td>
                </tr>
      </tfoot>
    </table>
    <script>
    function addRow(num)
    {
                if(document.all)
                {
                   var tbody1 = document.getElementById('tablebody');
                   var row = document.createElement("TR");
                   var td1 = document.createElement("TD");   
                   td1.setAttribute("className","num");
                   td1.innerHTML = num + '.' ;  
                   var td2 = document.createElement("TD");
                   var SpanTd2 = document.createElement("Span");
                   var aTextBoxSpanTd2 = document.createElement('input');
                   aTextBoxSpanTd2.type = "text";   
                   aTextBoxSpanTd2.id = "name" + num ;
                   SpanTd2.appendChild(aTextBoxSpanTd2);
                   td2.appendChild(SpanTd2);
                   var td3 = document.createElement("TD");
                   var SpanTd3 = document.createElement("Span");
                   var aTextBoxSpanTd3 = document.createElement('input');
                   aTextBoxSpanTd3.type = "text";   
                   aTextBoxSpanTd3.id = "last" + num ;
                   SpanTd3.appendChild(aTextBoxSpanTd3);
                   td3.appendChild(SpanTd3);
                   var td4 = document.createElement("TD");
                   var SpanTd4 = document.createElement("Span");
                   var aTextBoxSpanTd4 = document.createElement('input');
                   aTextBoxSpanTd4.type = "text";   
                   aTextBoxSpanTd4.id = "email" + num ;
                   SpanTd4.appendChild(aTextBoxSpanTd4);
                   td4.appendChild(SpanTd4);
                   row.appendChild(td1);
                   row.appendChild(td2);
                   row.appendChild(td3);
                   row.appendChild(td4);
                   tbody1.appendChild(row);
                 }
                else
                {
                   var tbody1 = document.getElementById('tablebody');
                   var row = document.createElement("TR");
                   var td1 = document.createElement("TD");   
                   td1.setAttribute("class","num");
                   td1.innerHTML = num + '.' ;  
                   var td2 = document.createElement("TD");
                   var SpanTd2 = document.createElement("Span");
                   var aTextBoxSpanTd2 = document.createElement('input');
                   aTextBoxSpanTd2.type = "text";   
                   aTextBoxSpanTd2.id = "name" + num ;
                   SpanTd2.appendChild(aTextBoxSpanTd2);
                   td2.appendChild(SpanTd2);
                   var td3 = document.createElement("TD");
                   var SpanTd3 = document.createElement("Span");
                   var aTextBoxSpanTd3 = document.createElement('input');
                   aTextBoxSpanTd3.type = "text";   
                   aTextBoxSpanTd3.id = "last" + num ;
                   SpanTd3.appendChild(aTextBoxSpanTd3);
                   td3.appendChild(SpanTd3);
                   var td4 = document.createElement("TD");
                   var SpanTd4 = document.createElement("Span");
                   var aTextBoxSpanTd4 = document.createElement('input');
                   aTextBoxSpanTd4.type = "text";   
                   aTextBoxSpanTd4.id = "email" + num ;
                   SpanTd4.appendChild(aTextBoxSpanTd4);
                   td4.appendChild(SpanTd4);
                   row.appendChild(td1);
                   row.appendChild(td2);
                   row.appendChild(td3);
                   row.appendChild(td4);
                   tbody1.appendChild(row);
                }
    }
    function InsertRow()
    {
       var table = document.getElementById("TableId");
       var strTb = '', rowCount = table.rows.length;
       var NewId = rowCount-1;
       for(i = NewId ; i <= NewId + 4 ;++i)
       {  
                   addRow(i);
       }
    }
    function Validate()
    {
                var table = document.getElementById("TableId");
                var rowCount = table.rows.length;
                var MyTeam = new Array(rowCount);
                for(i = 1 ; i <= rowCount-2 ; i++)
                {
                 var Name =  "name" + i;  
                 var Last = "last" + i;
                 var email = "email" + i;
                 var NameValue = document.getElementById(Name).value;
                 var LastValue = document.getElementById(Last).value;
                 var EmailValue = document.getElementById(email).value;
                 if(NameValue == '')  
                 {      
                            alert("First Name is required in S.no" + " " + i);
                 }     
                }
    }
    </script>
</form>
</body>
</apex:page>

All Answers

Ispita_NavatarIspita_Navatar

Hi,

You can make use of   "Javascript"  coding along with html input elements to implement solution in your scenario.

 

You can use the following code snippet:-

 

<script type="text/javascript">
function addInput()
{
	var x = document.getElementById("inputs");
	x.innerHTML += "<input type=\"text\" />";
}
</script>


<input type="button" onmousedown="addInput();" />
<div id="inputs"></div>

 

Did this answer your question? If not, let me know what didn't work, or if so, please mark it solved.
UrsfriendlyUrsfriendly

thank u

 

please understand scenario:

 

through that added rows,i want to insert data into object and while inserting data i want to validate that data from newly added input text box,and error message should thrown at the beside of that textbox

 

 
Pradeep_NavatarPradeep_Navatar

Below is the sample code to add the dynamically row in  and validate them-
<apex:page>
<body>
<form>
    <table id="TableId">
      <thead>
                <tr>
                  <th scope="col" class="num"></th>
                  <th scope="col" class="fname">First Name</th>
                  <th scope="col" class="lname">Last Name</th>
                  <th scope="col" class="email">Email</th>
                </tr>
      </thead>
      <tbody id="tablebody">
                <tr>
                  <td class="num">1.</td>
                  <td><input type="text" name="" value="" id="name1"/></td>
                  <td><input type="text" name="" value="" id="last1"/></td>
                  <td><input type="text" name="" value="" id="email1"/></td>
                </tr><tr>
                <td class="num">2.</td>
                  <td><input type="text" name="" value="" id="name2"/></td>
                  <td><input type="text" name="" value="" id="last2"/></td>
                  <td><input type="text" name="" value="" id="email2"/></td>
                </tr>
                 </tbody>
      <tfoot>
                <tr>
                  <td><input type="Button" value="Save" onclick="Validate();"/></td>
                  <td colspan="2"><a onclick="InsertRow();">Add More 5 Records</a></td>
                </tr>
      </tfoot>
    </table>
    <script>
    function addRow(num)
    {
                if(document.all)
                {
                   var tbody1 = document.getElementById('tablebody');
                   var row = document.createElement("TR");
                   var td1 = document.createElement("TD");   
                   td1.setAttribute("className","num");
                   td1.innerHTML = num + '.' ;  
                   var td2 = document.createElement("TD");
                   var SpanTd2 = document.createElement("Span");
                   var aTextBoxSpanTd2 = document.createElement('input');
                   aTextBoxSpanTd2.type = "text";   
                   aTextBoxSpanTd2.id = "name" + num ;
                   SpanTd2.appendChild(aTextBoxSpanTd2);
                   td2.appendChild(SpanTd2);
                   var td3 = document.createElement("TD");
                   var SpanTd3 = document.createElement("Span");
                   var aTextBoxSpanTd3 = document.createElement('input');
                   aTextBoxSpanTd3.type = "text";   
                   aTextBoxSpanTd3.id = "last" + num ;
                   SpanTd3.appendChild(aTextBoxSpanTd3);
                   td3.appendChild(SpanTd3);
                   var td4 = document.createElement("TD");
                   var SpanTd4 = document.createElement("Span");
                   var aTextBoxSpanTd4 = document.createElement('input');
                   aTextBoxSpanTd4.type = "text";   
                   aTextBoxSpanTd4.id = "email" + num ;
                   SpanTd4.appendChild(aTextBoxSpanTd4);
                   td4.appendChild(SpanTd4);
                   row.appendChild(td1);
                   row.appendChild(td2);
                   row.appendChild(td3);
                   row.appendChild(td4);
                   tbody1.appendChild(row);
                 }
                else
                {
                   var tbody1 = document.getElementById('tablebody');
                   var row = document.createElement("TR");
                   var td1 = document.createElement("TD");   
                   td1.setAttribute("class","num");
                   td1.innerHTML = num + '.' ;  
                   var td2 = document.createElement("TD");
                   var SpanTd2 = document.createElement("Span");
                   var aTextBoxSpanTd2 = document.createElement('input');
                   aTextBoxSpanTd2.type = "text";   
                   aTextBoxSpanTd2.id = "name" + num ;
                   SpanTd2.appendChild(aTextBoxSpanTd2);
                   td2.appendChild(SpanTd2);
                   var td3 = document.createElement("TD");
                   var SpanTd3 = document.createElement("Span");
                   var aTextBoxSpanTd3 = document.createElement('input');
                   aTextBoxSpanTd3.type = "text";   
                   aTextBoxSpanTd3.id = "last" + num ;
                   SpanTd3.appendChild(aTextBoxSpanTd3);
                   td3.appendChild(SpanTd3);
                   var td4 = document.createElement("TD");
                   var SpanTd4 = document.createElement("Span");
                   var aTextBoxSpanTd4 = document.createElement('input');
                   aTextBoxSpanTd4.type = "text";   
                   aTextBoxSpanTd4.id = "email" + num ;
                   SpanTd4.appendChild(aTextBoxSpanTd4);
                   td4.appendChild(SpanTd4);
                   row.appendChild(td1);
                   row.appendChild(td2);
                   row.appendChild(td3);
                   row.appendChild(td4);
                   tbody1.appendChild(row);
                }
    }
    function InsertRow()
    {
       var table = document.getElementById("TableId");
       var strTb = '', rowCount = table.rows.length;
       var NewId = rowCount-1;
       for(i = NewId ; i <= NewId + 4 ;++i)
       {  
                   addRow(i);
       }
    }
    function Validate()
    {
                var table = document.getElementById("TableId");
                var rowCount = table.rows.length;
                var MyTeam = new Array(rowCount);
                for(i = 1 ; i <= rowCount-2 ; i++)
                {
                 var Name =  "name" + i;  
                 var Last = "last" + i;
                 var email = "email" + i;
                 var NameValue = document.getElementById(Name).value;
                 var LastValue = document.getElementById(Last).value;
                 var EmailValue = document.getElementById(email).value;
                 if(NameValue == '')  
                 {      
                            alert("First Name is required in S.no" + " " + i);
                 }     
                }
    }
    </script>
</form>
</body>
</apex:page>

This was selected as the best answer
UrsfriendlyUrsfriendly

Thank u Master,

 

     Really Thank u for sharing u r knowledge with us...........................

 

 
UrsfriendlyUrsfriendly

How to insert that entered data into object from each and every fields(from added rows also).

 

 

Thank u
ani123ani123

can any one tell me how to insert parents and child records