how can i dynamically add elements to my form using javascript or jquery?

Question

I have a student profile form, where student fills information about their education.

Student Profile

My code is

<script language="JavaScript">

var imCount = 0;

function addRow(r, tdCount) {
     alert(tdCount);
     alert(r.innerHTML);
     var root = r.parentNode.parentNode.parentNode; //the root 

     var allRows = root.getElementsByTagName('tr'); //the rows' collection 
     var cRow = root.insertRow(7);
     var cRow = allRows[tdCount + imCount].cloneNode(true)//the clone of the 1strow 

        cRow.setAttribute('name', cRow.getAttribute('name') + '_' + (allRows.length + 1 +  imCount)); //change the selecet's name 

    var cLbl = cRow.getElementsByTagName('label')[0];
    cLbl.setAttribute("style", "visibility: collapse");

    var cInp = cRow.getElementsByTagName('input'); //the inputs' collection of the 1st row 
    for (var i = 0; i < cInp.length; i++) {//changes the inputs' names (indexes the names) 
        cInp[i].setAttribute('name', cInp[0].getAttribute('name') + '_' + (allRows.length + 1 + imCount))
    }
    var cSel = cRow.getElementsByTagName('select')[0];
    cSel.setAttribute('name', cSel.getAttribute('name') + '_' + (allRows.length + 1 + imCount)); //change the selecet's name 
    //root.appendChild(cRow);//appends the cloned row as a new row 
    allRows[tdCount + imCount].parentNode.insertBefore(cRow, allRows[tdCount + imCount].nextSibling)
    imCount++;
    alert(imCount);
}

  </script>
  <form method="post" action="">

<table width="100%">
<tr>
   <td>
    <div id="Education">
               <table class="Studentprofile" id="tblEducation">
                    <tr>
                        <td colspan="2"><br/> Education Details</td>
                    </tr>
                    <tr id="schoolRow" name="schoolRow">
                        <td class="studentprofileupdateHead" >
                            <label for="schools">Schools:</label>
                        </td>
                        <td class="studentprofileupdateBody" id="schools">
                            <input type="text" id="s1" name="s1" title="S1"></input>
                            <select name="selSYear">
                                <option value="0">-Select-</option>
                                <option value="1">2010</option>
                                <option value="2">2009</option>
                                <option value="3">2008</option>
                                <option value="4">2007</option>
                                <option value="5">2006</option>
                                <option value="6">2005</option>
                                <option value="7">2004</option>
                                <option value="8">2001</option>
                                <option value="8">2000</option>
                            <//select>
                        </td>
                    </tr>
                    <tr>
                        <td class="studentprofileupdateHead" >
                        </td>
                        <td class="studentprofileupdateBody">
                            <a href="#" onClick="javascript: addRow(this,1);">Add Shools</a>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2"><br/><hr class="profileUpdate"/><br/></td>
                    </tr>
                    <tr id="highschoolRow" name="highschoolRow">
                        <td class="studentprofileupdateHead" >
                            <label for="highschool">High School:</label>
                        </td>
                        <td class="studentprofileupdateBody" id="highschool">
                            <input type="text" id="hs1" name="hs11" title="HS1" />
                            <select name="selHSYear">
                                <option value="0">-Select-</option>
                                <option value="1">2010</option>
                                <option value="2">2009</option>
                                <option value="3">2008</option>
                                <option value="4">2007</option>
                                <option value="5">2006</option>
                                <option value="6">2005</option>
                                <option value="7">2004</option>
                                <option value="8">2001</option>
                                <option value="8">2000</option>
                            <//select>>
                            <br><br/>

                            <hr class="profileSubSection"/>
                        </td>
                    </tr>
                    <tr>
                        <td class="studentprofileupdateHead" >
                        </td>
                        <td class="studentprofileupdateBody">
                            <a href="#" onClick="javascript: addRow(this,4);">Add High Schools</a>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2"><br/><hr class="profileUpdate"/><br/></td>
                    </tr>
                    <tr id="collegeRow" name="collegeRow">
                        <td class="studentprofileupdateHead" >
                            <label for="college">College:</label>
                        </td>
                        <td class="studentprofileupdateBody" id="college">
                            <input type="text" id="co1" name="co1" title="CO1"/>
                            <select name="selColYear">
                                <option value="0">-Select-</option>
                                <option value="1">2010</option>
                                <option value="2">2009</option>
                                <option value="3">2008</option>
                                <option value="4">2007</option>
                                <option value="5">2006</option>
                                <option value="6">2005</option>
                                <option value="7">2004</option>
                                <option value="8">2001</option>
                                <option value="8">2000</option>
                            <//select>
                            <br><br/>

                            <hr class="profileSubSection"/>
                        </td>
                    </tr>
                    <tr>
                        <td class="studentprofileupdateHead" >
                        </td>
                        <td class="studentprofileupdateBody">
                            <a href="#" onClick="javascript: addRow(this,8);">Add College</a>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2"><br/><hr class="profileUpdate"/><br/></td>
                    </tr>
                    <tr>
                        <td class="studentprofileupdateHead" >
                        </td>
                        <td class="studentprofileupdateBody">
                            <input type="submit" id="saveStudentEducationInfo" name="saveStudentEducationInfo" title="Save Education Info" value="Save Details" />
                            <input type="submit" id="cancelStudentEducationInfo" name="cancelStudentEducationInfo" title="Cancel Education Info" value="Cancel" />
                        </td>
                    </tr>
                     <tr>
                        <td colspan="2"><br/><br/></td>
                    </tr>
                </table>
            </div>
</td>
</tr>

</table>
    </form>

When user click on Add School link it will call addRow() and passing two parameters addRow(r, tdCount).

 <a href="#" onClick="javascript: addRow(this,1);">Add Schools</a>

i am passing 1 to add new elements to row 1 it works perfect

i can add multiple new element but now looking to another section,

 <a href="#" onClick="javascript: addRow(this,4);">Add High Schools</a>

here i am passing 4 to add new elements to my form,it works perfect without adding ADD SCHOOLS. but when i add schools 2-3 times it will not add high school.

Like this Student Profile 2

in above image you can find that i have added 3 new schools and now i want to add high school but it cant be added to the form.

How can i solve this issue?

Any way to find tr instead of hard coding values in addRow(this,4)?

Have you checked append(), html() and size() functions at jquery? — Arda
– Arda, Commented Sep 28, 2011 at 7:46
As answered By Nicola Peluchetti. it works perfect but i get to know that by viewing source code of the page i am not getting id for all textbox. it is necessary for me to generate id for all new textboxes. what can i do to get id? — Bhargav
– Bhargav, Commented Sep 28, 2011 at 9:47

Nicola Peluchetti · Accepted Answer · 2011-09-28 07:51:42Z

3

I'd change your code like this (removing the onclick )

$('.studentprofileupdateBody a').click(function(){
   console.log('ok');
    var $tr = $(this).closest('tr').prev()
     var clone = $tr.clone();
    $tr.after(clone);
});

fiddle here: http://jsfiddle.net/mSRg3/

answered Sep 28, 2011 at 7:51

Nicola Peluchetti

76.9k32 gold badges150 silver badges197 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Bhargav Over a year ago

@ Nicola Peluchetti : Thanks for your support!

Bhargav Over a year ago

it works perfect but i get to know that by viewing source code of the page that i am not getting id for all textbox. it is necessary for me to generate id for all new textboxes. what can i do to generate id?

Nicola Peluchetti Over a year ago

You need to generate a different id for each textbox?I suggest you open a new question and post the code so that more people can help

Bhargav Over a year ago

@ Nicola Peluchetti : Thanks... I will post a new question.

Nicola Peluchetti Over a year ago

Maybe you need a different name dor the input, anyway if you use php server side you could use an array as a name like name='si[]' and then when you post data you receive it as an array.

Collectives™ on Stack Overflow

how can i dynamically add elements to my form using javascript or jquery?

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related