Клонирование пустых полей формы

0

Я все еще пытаюсь создать пустые поля, которые пользователи могут добавлять "на лету". Я пытаюсь клонировать следующий скрытый шаблон, но я не могу его добавить.

Мой HTML

 <div class="_100">
  <fieldset id="FieldBlank">
   <div id="readroot" class="hidden">

    <div class="_100">
     <div class="_50"> QA Sample ID:<input type="text" id="QASampleID" name="QASampleID"></div>
     <div class="_50" data-role="controlgroup" data-mini="true" data-type="horizontal">
      <label>Collection Method</label><br />
        <input type="radio" id="radGrab1" value="Grab" name="Collection1" />
       <label for="radGrab1">Grab</label>
        <input type="radio" id="radEWI1" value="EWI" name="Collection1" />
       <label for="radEWI1">EWI</label></div>
    </div>

  <div class="_100">
   <div class="_40">    
    <label class="analysis-label" for="analysis">Analyte:</label>
     <select class="analysis" id="analysis" name="analysis" data-iconpos="left" data-icon="grid">
      <option>Select</option>
      <option value = "TN">TN</option>
      <option value = "TP,NO2+3">TP,NO2+3</option>
     </select></div>
    <div class="_30">   
     <label class="preserve-label" for="preserve">Preserved</label>
      <select class="select_preserve" id="preserve" name="preserve" data-iconpos="left" data-icon="grid">
       <option>Select</option>
       <option value = "HNO3">HNO&#8323;</option>
       <option value = "H2SO4">H&#8322;SO&#8324;</option>
      </select></div>
    <div class="_30"> 
      <label class="cool-label" for="cool">Cooled</label>
       <select class="select_cool" id="cool" name="cool" data-iconpos="left" data-icon="grid">  
       <option>Select</option>
       <option value = "Ice">Ice</option>
       <option value = "Frozen">Frozen</option>
       <option value = "None">None</option>
      </select></div>
    </div>

   </div>                
  </fieldset>
 </div>   
   <button type="button" data-theme="b" data-icon="plus" id="moreFields" onclick="moreFields()">ADD FIELD BLANK</button>

 <hr /><div id="writeroot"> </div> 

Мой javascript

var counter = 0;

function moreFields() {
    counter++;
    var newFields = document.getElementById('readroot').cloneNode(true);
    newFields.id = '';
    newFields.style.display = 'block';
    var newField = newFields.childNodes;
    for (var i = 0; i < newField.length; i++) {
        var theName = newField[i].name
        if (theName)
            newField[i].name = theName + counter;
    }
    var insertHere = document.getElementById('writeroot');
    insertHere.parentNode.insertBefore(newFields,insertHere);
}

Я просто не могу заставить его работать! Это потому, что этот скрипт не jquery? Кажется, это не потому, что оно скрыто, потому что, когда я показываю его, кнопка все еще не работает, чтобы добавить клоны? Я так вытаскиваю свои волосы прямо сейчас. Мне нужна твоя помощь!

  • 0
    Вы пометили вопрос с помощью jQuery, но я не вижу ни одного.
  • 0
    если вы действительно используете jQuery, вы можете просто использовать api.jquery.com/clone, но убедитесь, что вы указали, что это глубокий клон. И просто примечание - не используйте _, чтобы начать имя класса, некоторым браузерам это не нравится.
Показать ещё 5 комментариев
Теги:
forms
clone

1 ответ

0

Вы пробовали что-то вроде:

$("#readroot input").clone().appendTo("body"); // Or wherever you want to append them to

И, да, не скрывайте вещи вручную. Вместо этого используйте функцию переключения jQuery:

$("#readroot").toggle(); // Or hide()
  • 0
    Я пробовал скрыть / показать, но это сработало только один раз, и мне нужна возможность добавить несколько пробелов
  • 0
    Теперь, когда я думаю об этом, вам не нужно ничего клонировать; вы? почему бы вам просто не использовать $ ('# writeroot'). append ($ ('<input />')); создавать новые входы по мере необходимости?
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню