Javascript добавления полей динамически в таблице без обновления формы

JSFiddle с кодом: http://jsfiddle.net/wxLa80od/Javascript добавления полей динамически в таблице без обновления формы

У меня есть HTML-страницу, которая выглядит следующим образом:

<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>

с кодом яваскрипта

<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>

Код работает хорошо, но проблема заключается в том, что когда я нажимаю кнопку «Добавить больше», динамические добавленные поля становятся пустыми!

Я хочу заполнить все данные в форме, чтобы передать их в файл php.

Может ли кто-нибудь, возможно, рассказать мне, как я не могу очистить поля?

Заранее спасибо.

источник

2015-04-15 Hessa Abdulaziz

Что вы подразумеваете под «становится пустым»? Они добавляются, но пустые? Или они вообще не добавлены? – TiiJ7

Пожалуйста, всегда старайтесь предоставить jsfiddle, чтобы мы могли легко проверить код самостоятельно. :) – Jordumus

Создал jsfiddle для этой проблемы: http://jsfiddle.net/wxLa80od/ – Jordumus

При использовании innerHtml, вы всегда заменить содержимое с недавно определенным содержанием, даже если вы используете +=. Вот почему ваш динамический контент пуст после каждого нажатия кнопки.

Я предоставлю 2 решения этой проблемы. Один из них требует использования JQuery, другой не делает (но более сложная):

Решение 1 (С 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/

Решение 2 (БЕЗ 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/

Также быстрое примечание: сделать НЕ использование <br/> между двумя рядами <tr>, он может создать беспорядок очень быстро. Пожалуйста, используйте css для этого (пример: margin-bottom: 15px;)

источник

2015-04-15 09:39:48 Jordumus

внутреннийHTML не получает значение, введенное с клавиатуры. Вы можете использовать appendChiled. В этом случае вы должны создать элемент с помощью оператора createElement. Легче использовать jquery. Попробуйте следующий код

<!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>

источник

2015-04-15 09:39:11 user3317695

Пожалуйста, удалите это '
' в append, это действительно больно моим глазам, кроме этого: хорошее решение, если jQuery разрешен, если нет: см. Мой ответ ниже. – Jordumus

@Jordumus Большое спасибо за ваш ответ, это действительно поможет! –

@ user3317695 Спасибо много! –

Javascript добавления полей динамически в таблице без обновления формы

ответ

Смежные вопросы