Нужна помощь в создании элементов формы на основе клика через JavaScript и JQuery - PullRequest
Новая
       30

Нужна помощь в создании элементов формы на основе клика через JavaScript и JQuery

2 голосов
/ 11 августа 2011

Я довольно новичок в веб-программировании, и я пытаюсь просто добавить текстовые поля в определенную форму, основываясь на нажатии предыдущего текстового поля. HTML-страница будет начинаться с одного поля и будет расти с текстовыми полями, основанными на щелчке по любому предыдущему полю. Это через клиентский JavaScript.

Однако, похоже, что код не работает, и я никуда не денусь. Все, что отображается, это одно текстовое поле, регулируемое HTML, и событие click выводит что угодно. Прямо сейчас вы можете игнорировать стиль. 

<!DOCTYPE html>
<html>
<title>This is just a test</title>
<script type="text/javascript"  src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
$(document).ready(function(){
var inival = 0;
function addTextBox()
{
    var newArea = add_New_Element();
    var htcontents = "<input type='text' name='textbx[]'/>";
    document.getElementById(newArea).innerHTML = htcontents; // You can any other elements in place of 'htcontents' 
}
function add_New_Element() 
{
inival=inival+1; // Increment element number by 1
var ni = document.getElementById('area');
var newdiv = document.createElement('div'); // Create dynamic element
var divIdName = 'my'+inival+'Div';
newdiv.setAttribute('id',divIdName);
ni.appendChild(newdiv);
return divIdName;
}
  $("input").click(function(){
    addTextBox();
  });
});
</script>
<body>
<div>
<form id="mainform" action="execute.php" method="post">
<input type="text" name="textbx[]"/>
</form>
</div>
</body>
</html>

Ответы [ 3 ]

3 голосов
/ 11 августа 2011

Вы можете заменить все ваше решение следующим образом: 

$("input").click(function() {
    $(this).after($(this).clone(true)); 
    $(this).after("<br />");
});

Демо.

Я бы предпочел использовать .delegate и не надо клонировать обработчики событий: 

$("#myForm").delegate("input", "click", function() {
    $(this).after($(this).clone()); 
    $(this).after("<br />");
});

Демо.

0 голосов
/ 11 августа 2011

сначала у вас нет тега с идентификатором area, поэтому он будет выдавать ошибку при попытке получить его

Я думаю, что вы делаете это с трудом, проверьте это демо это большепроще чем то, что ты делаешь

0 голосов
/ 11 августа 2011

Эта строка: 

var ni = document.getElementById('area');

установит ni на null, потому что у вас нет элементов с идентификатором 'area'. Что означает позже в функции, когда вы пытаетесь сказать: 

ni.appendChild(newdiv);

это не сработает.

Кстати, почему вы создаете дополнительные элементы div для хранения новых входных данных? Почему бы просто не добавить элементы ввода напрямую?

...