Как динамически генерировать поля ввода

Question

Как динамически генерировать поля ввода

0

У меня есть форма с полями ввода.

Однажды, я нажал кнопку отправки, я хочу сгенерировать 2 поля ввода с помощью значка "плюс/+". Поэтому, когда я нажимаю на значок "+", он будет генерировать поля ввода.

Вот часть html:

 <label>Name</label>
 <input type="text" value="Jim" id="demo_1" name="demo_name" class="input-medium"/>
 <label>Id</label>
 <input type="text" value="123" id="demo_1" name="demo_name" class="input-medium">

<button id="demo_submit" class="btn" name="demo_submit" type="button">Submit</button>

user3340300 23 фев. 2014, в 17:57

Источник

5

Что вы пробовали? Что ты не понимаешь? Вы спрашиваете, как обрабатывать события? Как создать новые элементы?
SLaks 23 фев. 2014, в 16:42
0

я не могу получить тебя ..
user3340300 23 фев. 2014, в 16:43

Теги:

javascript

jquery

4 ответа

1

Я предлагаю посмотреть существующие плагины (например, JQuery SheepIt! Plugin) и посмотреть, как это кодируется.

Чтобы добавить элементы динамической формы, это можно сделать с помощью метода clone() и DocumentFragment - http://ejohn.org/blog/dom-documentfragments/

JohanVdR 23 фев. 2014, в 14:43

0

$ (". addInput"). click (function {$ ("form"). append (PUT INPUT ELEMNT HERE);});

Yene Mulatu 23 фев. 2014, в 14:43

0

могу ли я работать демо на основе моего кода, так как я новичок ..
user3340300 23 фев. 2014, в 16:47
0

Это не способ учиться, но, поскольку вы новичок, я постараюсь вам помочь. jsfiddle.net/Yene/J7fLY проверить ссылку
Yene Mulatu 23 фев. 2014, в 16:54

0

Проверь это.
HTML

<label>Name</label>
<input type="text" value="Jim" id="demo_1" name="demo_name" class="input-medium" />
<label>Id</label>
<input type="text" value="123" id="demo_1" name="demo_name" class="input-medium">
<button id="demo_submit" class="btn" name="demo_submit" type="button">Submit</button>
<button id="demo_add" class="btn" name="demo_add" type="button">Add more</button>
<div id='add'></div>

JQuery

$('#demo_add').click(function () {
    $inputName = "<input type='text' placeholder='Name'/>";
    $inputId = "<input type='text' placeholder='Id'/>";
    $br = "<br/>";
    $('#add').append($inputName);
    $('#add').append($inputId);
    $('#add').append($br);
});

Надеюсь, это поможет.

Bhavik 23 фев. 2014, в 13:53

0

после нажатия кнопки «Отправить» я хочу отключить первые поля, чтобы мы не могли изменить ввод.
user3340300 23 фев. 2014, в 16:56
0

Проверьте обновление здесь
Bhavik 23 фев. 2014, в 17:03

Ещё вопросы

Что вы пробовали? Что ты не понимаешь? Вы спрашиваете, как обрабатывать события? Как создать новые элементы?
могу ли я работать демо на основе моего кода, так как я новичок ..
Это не способ учиться, но, поскольку вы новичок, я постараюсь вам помочь. jsfiddle.net/Yene/J7fLY проверить ссылку
после нажатия кнопки «Отправить» я хочу отключить первые поля, чтобы мы не могли изменить ввод.

hariom · Accepted Answer · 2014-02-23T14-31-00.000Z

Рабочий пример: http://plnkr.co/edit/szYoU4GCeLWX8b9DcsYT

<script type="text/javascript">
  function addFields () {
  var newNode1 = document.createElement('input'),
     newNode2 = document.createElement('input');
   newNode1.type = newNode2.type = "text"; document.forms[0].appendChild(newNode1);
    document.forms[0].appendChild(newNode2);
  }
</script>
  <form>  
  <label>Name</label>
    <input type="text" value="Jim" id="demo_1" name="demo_name" class="input-medium"/>
    <label>Id</label>
    <input type="text" value="123" id="demo_1" name="demo_name" class="input-medium">

   <button id="demo_submit" class="btn" name="demo_submit" type="button" onclick="addFields()">Submit</button>
</form>

Это то, что я ищу. Однако мне нужно, чтобы 1-е поле со значениями Jim и 123 было отключено после нажатия кнопки sumbit.
Вы можете сделать document.getElementById ('demo_1'). Disabled = true; Используйте это, чтобы узнать больше об этом. stackoverflow.com/questions/2874688/...