Javascript adding fields dynamically in table without updating the form

Question

JSFiddle with the code: http://jsfiddle.net/wxLa80od/

I have a html page which is looks like:

<form action="cvformphp.php" method="post">
<table id="cvtable">
<tr><td><h2>Personal Info</h2></td></tr>
<tr><td>Name* </td> <td><input type="text" name="name"></td></td>
<tr><td>Email* </td><td><input type="Email" name="email"></td></tr>
<tr><td><h2>Experiences</h2></td></tr>
<tr><td>Job role </td><td><input type="text" id="role1" name="role1"></td>     <td>Company name</td><td><input type="text" id="comp1" name="comp1"></td </tr>

<input type="text" hidden="hidden" value="1" id="countexp" name="countexp"/>
<tbody id="exp" name="exp"></tbody>

<tr><td></td><td><input  type="button" id="2" value="+ Add More"  onclick="addExp()"/></td></td></tr>
</table>
</form>

with javascript code

<script>
var countBox =2;
function addExp()
{
document.getElementById("countexp").value= countBox;

document.getElementById("exp").innerHTML +="<br/><tr><td>Job role</td><td>
<input type='text' id='role"+ countBox +"'  name='role"+ countBox+"'/></td>     
<td>Company name</td><td><input type='text' name='comp"+ countBox +"'   
id='comp"+countBox +"''/> </td></tr>";
       countBox += 1;
}

</script>

The code is running well but the problem is when I click "Add more" button the dynamic added fields is getting empty!

I want to fill all data in the form so I can pass them to php file.

Could someone perhaps tell me please how I can not clear the fields?

Thanks in advance.

What do you mean by "is getting empty"? They are added but empty? Or they are not added at all? — TiiJ7
– TiiJ7, Commented Apr 15, 2015 at 9:14
Please always try to provide a jsfiddle so we can easily check the code ourself. :) — Jordumus
– Jordumus, Commented Apr 15, 2015 at 9:19
@TiiJ7 I mean when I add more fields and I fill them with e.g "x value" then I click on add more button again, new fields are created but my "x value" is deleted form the above fields. — Hessa Abdulaziz
– Hessa Abdulaziz, Commented Apr 15, 2015 at 9:36

Jordumus · Accepted Answer · 2015-04-15 09:45:18Z

When using innerHtml, you ALWAYS replace the content with the newly defined content, even if you use +=. That's why your dynamic content is empty after each click on the button.

I will provide 2 solutions for this problem. One of them requires the use of jQuery, the other doesn't (but is more complicated):

Solution 1 (WITH jQuery)

function addExp()
{
document.getElementById("countexp").value= countBox;

    $("#exp").append("<tr><td>Job role</td> \
        <td><input type='text' id='role"+ countBox +"'  \
        name='role"+ countBox+"'/></td><td>Company name</td>\
        <td><input type='text' name='comp"+ countBox +"' \
        id='comp"+countBox +"''/> </td></tr>");

    countBox += 1;
}

jsFiddle: http://jsfiddle.net/wxLa80od/4/

Solution 2 (WITHOUT jQuery)

function addExp()
{
    document.getElementById("countexp").value= countBox;

    var newChild = document.createElement("tr");
        document.getElementById("countexp").value= countBox;

    // Create an empty <tr> element and add it to the 1st position of the table:
    var row = document.getElementById("exp").insertRow(-1);

    // Insert new cells (<td> elements) at the 1st and 2nd position of the "new" <tr> element:
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    var cell3 = row.insertCell(2);
    var cell4 = row.insertCell(3);

    // Add some text to the new cells:
    cell1.innerHTML = "Job role";
    cell2.innerHTML = "<input type='text' id='role"+ countBox +"' name='role"+ countBox+"'/>";  
    cell3.innerHTML = "Company name"; 
    cell4.innerHTML = "<input type='text' name='comp"+ countBox +"'id='comp"+countBox +"''/>";



        countBox += 1;
}

jsFiddle: http://jsfiddle.net/wxLa80od/2/

Also a quick note: do NOT use <br/> in between two rows <tr>, it can create a mess really quickly. Please use css for this (example: margin-bottom: 15px;)

user3317695 · Accepted Answer · 2015-04-15 09:47:50Z

0

innerHTML does not get the value inputted from keyboard. You may use appendChiled. In that case you should create element using createElement statement. It is easier to use jquery. Try following code

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script>
var countBox =2;
function addExp()
{
document.getElementById("countexp").value= countBox;

$("#exp").append("<br><tr><td>Job role</td><td><input type='text' id='role"+ countBox +"'  name='role"+ countBox+"'/></td><td>Company name</td><td><input type='text' name='comp"+ countBox +"' id='comp"+countBox +"''/> </td></tr>");
       countBox += 1;
}

</script>

</head>
<body>

<form action="cvformphp.php" method="post">
<table id="cvtable">
<tr><td><h2>Personal Info</h2></td></tr>
<tr><td>Name* </td> <td><input type="text" name="name"></td></td>
<tr><td>Email* </td><td><input type="Email" name="email"></td></tr>
<tr><td><h2>Experiences</h2></td></tr>
<tr><td>Job role </td><td><input type="text" id="role1" name="role1"></td>     <td>Company name</td><td><input type="text" id="comp1" name="comp1"></td ></tr>

<input type="text" hidden="hidden" value="1" id="countexp" name="countexp"/>
<tbody id="exp" name="exp"></tbody>

<tr><td></td><td><input  type="button" id="2" value="+ Add More"  onclick="addExp()"/></td></td></tr>
</table>
</form>

</body>
</html>

edited Apr 15, 2015 at 9:47

answered Apr 15, 2015 at 9:39

user3317695

767 bronze badges

1 Comment

Jordumus Over a year ago

Please, please, remove that <br/> in the append, it really hurts my eyes, other than that: a good solution, if jQuery is allowed, if not: see my answer below.

Rajpal Singh · Accepted Answer · 2020-07-05 13:08:41Z

According to answer of this question I agreed. But! we can do the needful for the required/expected result as below and also can make your own stuff for the expected/required result if you know JavaScript well.

function getInputValues(container){
    if(!(container instanceof Node) || !(container instanceof HTMLElement)){
        container = document.querySelector(container);
    }
    let values = {};
    container.querySelectorAll("INPUT").forEach((el)=>{
        values[el.name] = el.value;
    });
    
    return values;
}

function setInputValues(container, values){
    if(!(container instanceof Node) || !(container instanceof HTMLElement)){
        container = document.querySelector(container);
    }
    Object.keys(values).forEach((key)=>{
        container.querySelector("INPUT[name='"+key+"']").value = values[key];    
    });
}

Before the document.getElementById("exp").innerHTML += you have to get the values and after the added/updated html you have to set the values for the same inputs and if you want to use input name as array then you can set the index values also and also can change the input attribute from name to id or any other unique attribute from the function of getInputValues to make everything woks perfectly.

I wrote this code for my own project and you also can make your own if required otherwise it'll help's you

Collectives™ on Stack Overflow

Javascript adding fields dynamically in table without updating the form

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related