Динамически создавая форму

Question

На моей странице я показываю таблицу записей. В конце таблицы находится кнопка «Изменить». Когда кнопка нажата, строка превращается в форму для непосредственного изменения содержимого.

Этот код:

element.innerHTML = "<tr class='alt_col'>"; 
element.innerHTML += "<form action='/RIDT/includes/modify_codeplug.inc.php' method='POST' name='modify_form'>"; 
element.innerHTML += "<td><input type='text' name='fileName' value='" + fileName + "'></td>"; 
element.innerHTML += "<td><input type='text' name='location' value='" + loc + "'></td>"; 
element.innerHTML += "<td><input type='text' name='build' value='" + build + "'></td>"; 
element.innerHTML += "<td><input type='text' name='version' value='" + version + "'></td>"; 
element.innerHTML += "<td><select name='type' id ='selectType'>" + descOptions + "</select></td>"; 
element.innerHTML += "<td><input type='hidden' name='id' value='" + id + "'/><input type='submit' value='Submit'/></td>"; 
element.innerHTML += "</form>"; 
element.innerHTML += "</tr>"; 

var options = document.getElementById("selectType").options; 

for (i = 0; i < options.length; i++) 
{ 
    if (options[i].text == desc) 
    { 
     options[i].selected=true; 
    } 
} 

Результаты в виде создается так:

<form action="/RIDT/includes/modify_codeplug.inc.php" method="POST" name="modify_form"></form> 

Со всеми формами входных элементов, поступающих после запирающего элемента. Почему форма закрывается раньше?

Answer 1

Я не тестировал это, но jQuery имеет ту же проблему, если вы попытаетесь вставить незакрытый элемент в DOM. Закрывающий тег добавляется для вас.

Попробуйте вместо этого:

//track the html as a single string var 
var html = "<tr class='alt_col'>"; 
html += "<form action='/RIDT/includes/modify_codeplug.inc.php' method='POST' name='modify_form'>"; 
html += "<td><input type='text' name='fileName' value='" + fileName + "'></td>"; 
html += "<td><input type='text' name='location' value='" + loc + "'></td>"; 
html += "<td><input type='text' name='build' value='" + build + "'></td>"; 
html += "<td><input type='text' name='version' value='" + version + "'></td>"; 
html += "<td><select name='type' id ='selectType'>" + descOptions + "</select></td>"; 
html += "<td><input type='hidden' name='id' value='" + id + "'/><input type='submit' value='Submit'/></td>"; 
html += "</form>"; 
html += "</tr>"; 

// set the html string once 
element.innerHTML = html; 

Answer 2

Спасибо за помощь всем. Я буду исследовать все предложения, представленные более глубоко позже. В интересах экономии времени я сделал это по-другому. Вместо отправки формы кнопка submit вызывает другую функцию javascript, которая выбирает входные данные из DOM, затем строит и отправляет скрытую форму в мой php-скрипт. Это некрасиво, но он выполнил свою работу.