.text() удаляет все входные значения

Question

У меня есть форма, что пользователи заполняют набор контрольных точек, и когда они нажимают кнопку, вывод представляет собой последовательность заметок. В этой форме div в моем HTML настроен, чтобы вытащить список элементов, которые появятся в электронном письме. Иногда пользователю необходимо заполнить пустое текстовое поле для одного из элементов. Тем не менее, способ написания кода в настоящее время, я могу получить текст для элементов на странице, но он удаляет весь текст внутри текстовых полей. Есть ли способ включить текстовые поля? Вот пример кода:

HTML

<div> 
    <p> 
     <input type="checkbox" class="DocsNeeded"> This <input class="DocsNeeded" checked="checked" type="text" size="20" /> information is an example of an item with an input field<br><br> 
    </p> 
</div> 
<div> 
    <p> 
     <input type="checkbox" class="DocsNeeded"> This is <input type="text" size="20" /> another example of an item with an input field<br><br> 
    </p>  
</div> 

JavaScript Функция

$(".DocsNeeded:checked:visible").each(function() {  
    if ($(this).is(":checked")) { 
     docs += "• " + $(this).parent("p").text().trim() + "\r\n"; 
    } 
}); 

EDIT Основываясь на вопросы, приведенные ниже:

По существу выходного текста (то, что я надеюсь, чтобы получить от этого вопроса), что пользователь будет копировать и вставлять в предварительно отформатированное электронное письмо:

Г-н Person

Вот список всех документов, которые вы не отправляли нам

• Этот [пользовательский ввод здесь] информация является примером элемента с полем ввода

• Это [пользовательский ввод здесь] другой пример элемента с полем ввода

Answer 1

.text() наборы/получает «текст» внутри HTML-элемента. Это не тип ввода = «текст». Пример, близкий к тому, что вы достигаете, приведен ниже. Я также включил пример использования text().

Кроме того, способ доступа детей к элементам jQuery состоит в использовании .children() или .find() (глубже).

$(document).ready(function() { 
 
    $('#clickme').click(function() { 
 
    var docs = ''; 
 
    $(".DocsNeeded:checked:visible").each(function() {  
 
     if ($(this).is(":checked")) { 
 
      docs += "• " + 
 
       $(this).parent("p").find('.label-1').text() + ' ' + 
 
       $(this).parent("p").find('input[type=text]').val() + ' ' + 
 
       $(this).parent("p").find('.label-2').text() + "\r\n"; 
 
     } 
 
    }); 
 
    $('#result').text(docs); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <p> 
 
     <input type="checkbox" class="DocsNeeded"> <span class="label-1">This</span> <input class="DocsNeeded" checked="checked" type="text" size="20" /> <span class="label-2">information is an example of an item with an input field</span><br><br> 
 
    </p> 
 
</div> 
 
<div> 
 
    <p> 
 
     <input type="checkbox" class="DocsNeeded"> <span class="label-1">This is</span> <input type="text" size="20" /> <span class="label-2">another example of an item with an input field</span><br><br> 
 
    </p>  
 
</div> 
 

 
<button id="clickme">Click Me </button> 
 
<hr /> 
 
<div id="result" style="white-space:pre"></div> 
 
<hr />