добавление входных данных в HTML-форму, используя JavaScript - PullRequest
Новая
       23

добавление входных данных в HTML-форму, используя JavaScript

1 голос
/ 23 декабря 2009

У меня есть html-форма, в которую я хотел бы добавить поля ввода для использования javascript. Первоначально у меня были поля ввода под «телом», и следующие были в состоянии добавить поля: 

            // Create number input field
            var phoneInput = document.createElement("INPUT");
            phoneInput.id = "phone" + instance;
            phoneInput.name = "phone" + instance;
            phoneInput.type = "text";

            // Insert that stuff
            document.body.insertBefore(document.createElement("BR"), element);
            document.body.insertBefore(phoneLabel, element);
            document.body.insertBefore(phoneInput, element);

Затем я добавил элемент 'form' вокруг исходного ввода в html-файле. 

    <body>
    <form action=searchform.php method=GET>
        <LABEL for="phone1">Cell #: </LABEL>
        <input id="phone1" type="text" name="phone1">
        <input type="button" id="btnAdd" value="New text box" onclick="newTextBox(this);" />
    </form>
    </body>

Теперь кнопка не добавляет новые текстовые поля. Я неправильно структурировал это? Спасибо!

Ответы [ 3 ]

3 голосов
/ 23 декабря 2009

Это потому, что вы добавляете элементы к телу, что означает, что insertBefore не может найти element (потому что он находится в <form>, а не <body>), поэтому он никогда не вставляется.

Быстрый способ исправить это - использовать document.body.firstChild.insertBefore. Однако, если форма больше не является первым элементом в body, это больше не будет работать.

Более понятным и лучшим способом было бы присвоить вашей форме идентификатор (например, <form id="myform">), а затем получить доступ к форме с помощью: document.getElementById("myform").insertBefore. Затем вы можете разместить свою форму в любом месте, и она будет по-прежнему доступна с помощью идентификатора.

2 голосов
/ 23 декабря 2009

Проще всего было бы использовать jQuery. Добавьте идентификатор в форму, для более легкой ссылки: 

<form id="myform" action="action" method="GET">
  <input type="hidden" name="a" value="1"/>
  <input type="hidden" name="b" value="2"/>
</form>

<script type="text/javascript">
  $("#myform").append('<input type="hidden" name="c" value="3"/>');
</script>

Позже вы можете изменить значение вашего нового ввода, легко ссылаясь на него: 

$("#myform input[name='c']").val(7);
2 голосов
/ 23 декабря 2009

Gve формы ID 

<form id="myForm" action="searchform.php" method="GET">

Создайте элементы JavaScript так же, как вы привыкли, тогда вы можете просто добавить элементы так: 

var f = document.getElementById('myForm');
f.appendChild(document.createElement('br'));
f.appendChild(phoneLabel);
f.appendChild(phoneInput);

(insertbefore также будет работать на f, хотя я думаю, что это более читабельно.)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...