Значение текстовой панели не отображается?

Question

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

1) Мой textbar не отображает значение на странице HTML, полученное с JSON Кнопка, но я вижу это в моем элементе проверки.

2) select option в HTML, предварительно не выбранном на основе значения JSON.

Вы можете увидеть ниже

Часть файла modal.js, который добавляет элемент формы с помощью функции ajax.

form.append('<div class="row"><div class="col span-1-of-3"><label>Description: </label></div><div class="col span-2-of-3"><textarea type="text" name="leaddescription" value="'+value['LeadDescription']+'"></textarea></div></div>')

form.append('<div class="row"><div class="col span-1-of-3"><label>Admin Notes: </label></div><div class="col span-2-of-3"><textarea type="text" name="adminnotes" value="'+value['AdminNotes']+'"></textarea></div></div>')

form.append('<div class="row"><div class="col span-1-of-3"><label>Owner Notes: </label></div><div class="col span-2-of-3"><textarea type="text" name="ownernotes" value="'+value['OwnerNotes']+'" ></textarea></div></div>')

form.append('<div class="row"><div class="col span-1-of-3"><label>Lead Status: </label></div><div class="col span-2-of-3"><div class="col span-1-of-3"><select name="leadstatus" id="leadstatus" value="'+value['LeadStatus']+'"><option>Select</option><option value="Active">Active</option><option value="Paused">Paused</option><option value="Expired">Expired</option><option value="Unsubscribed">Unsubscribed</option></select></div></div></div>')

$("leadstatus select").val(value['LeadStatus']);

form.append('<div class="row"><div class="col span-1-of-3"></div><div class="col span-2-of-3"><input type="submit" name="update_lead_submit" value="Update"></div></div>')

Завершено modal.js файл

$(document).ready(function() {

    $('[name="leadidclick"]').click(function(e){

      e.preventDefault();
      // var leadid = $('[name="leadidclick"]').val();

      var leadid = $(this).val();

      alert("You clicked Leadid: " + leadid);

       $.ajax({

        type: "POST",
        url: './server/modal.php',
        data: {

          'leadid': leadid

        },        
        success: function(data){

          var result = $.parseJSON(data);
          console.log(result);

          // console.log(result.length)
          //Modal Box to POP UP HERE

          $('#formapp').empty(); // first empty division content 

          var form=''; //declare var

          $.each(result, function(key, value) {

                    form = $("<form action='' method='POST'></form>").attr("id", value['Lead_Id']);                                               

                    form.append('<div class="row"><div class="col span-1-of-3"><label>Lead Id: </label></div><div class="col span-2-of-3"><input type="text" name="leadid" value="'+value['Lead_Id']+'"></div>');

                    form.append('<div class="row"><div class="col span-1-of-3"><label>Name: </label></div><div class="col span-2-of-3"><div class="row"><div class="col span-1-of-2"><input type="text" name="first_name" value="'+value['FirstName']+'"></div><div class="col span-1-of-2"><input type="text" name="last_name" value="'+value['LastName']+'"></div></div></div></div>')

                    form.append('<div class="row"><div class="col span-1-of-3"><label>Company: </label></div><div class="col span-2-of-3"><input type="text" name="company_name" value="'+value['Company']+'"></div>');

                    form.append('<div class="row"><div class="col span-1-of-3"><label>Website: </label></div><div class="col span-2-of-3"><input type="text" name="website_name" value="'+value['Website']+'"></div></div>')

                    form.append('<div class="row"><div class="col span-1-of-3"><label>Designation: </label></div><div class="col span-2-of-3"><input type="text" name="designation_name" value="'+value['Designation']+'"></div></div>')

                    form.append('<div class="row"><div class="col span-1-of-3"><label>Linkedin: </label></div><div class="col span-2-of-3"><input type="text" name="linkedin_name" value="'+value['Linkedin']+'"></div></div>')

                    form.append('<div class="row"><div class="col span-1-of-3"><label>Email: </label></div><div class="col span-2-of-3"><input type="email" name="email_name" value="'+value['Email']+'" ></div></div>')

                    form.append('<div class="row"><div class="col span-1-of-3"><label>Phone: </label></div><div class="col span-2-of-3"><input type="text" name="phone" value="'+value['Phone']+'"></div></div>')

                    form.append('<div class="row"><div class="col span-1-of-3"><label>State: </label></div><div class="col span-2-of-3"><input type="text" name="state" value="'+value['State']+'"></div></div>')

                    form.append('<div class="row"><div class="col span-1-of-3"><label>Country: </label></div><div class="col span-2-of-3"><input type="text" name="country" value="'+value['Country']+'"></div></div>')

                    form.append('<div class="row"><div class="col span-1-of-3"><label>Tech Area: </label></div><div class="col span-2-of-3"><input type="text" name="techarea" value="'+value['TechArea']+'"></div></div>')

                    form.append('<div class="row"><div class="col span-1-of-3"><label>Firm Type: </label></div><div class="col span-2-of-3"><input type="text" name="firmtype" value="'+value['FirmType']+'"></div></div>')

                    form.append('<div class="row"><div class="col span-1-of-3"><label>Firm Size: </label></div><div class="col span-2-of-3"><input type="text" name="firmsize" value="'+value['FirmSize']+'"></div></div>')

                    form.append('<div class="row"><div class="col span-1-of-3"><label>Last Contact Date: </label></div><div class="col span-2-of-3"><input type="date" name="lastcontactdate" value="'+value['LastContactDate']+'"></div></div>')

                    form.append('<div class="row"><div class="col span-1-of-3"><label>Next Contact Date: </label></div><div class="col span-2-of-3"><input type="date" name="nextcontactdate" value="'+value['NextContactDate']+'"></div></div>')

                    form.append('<div class="row"><div class="col span-1-of-3"><label>Set Reminder Date: </label></div><div class="col span-2-of-3"><input type="date" name="setreminderdate" value="'+value['SetReminder']+'"></div></div>')

                    form.append('<div class="row"><div class="col span-1-of-3"><label>Description: </label></div><div class="col span-2-of-3"><textarea type="text" name="leaddescription" value="'+value['LeadDescription']+'"></textarea></div></div>')

                    form.append('<div class="row"><div class="col span-1-of-3"><label>Admin Notes: </label></div><div class="col span-2-of-3"><textarea type="text" name="adminnotes" value="'+value['AdminNotes']+'"></textarea></div></div>')

                    form.append('<div class="row"><div class="col span-1-of-3"><label>Owner Notes: </label></div><div class="col span-2-of-3"><textarea type="text" name="ownernotes" value="'+value['OwnerNotes']+'" ></textarea></div></div>')

                    form.append('<div class="row"><div class="col span-1-of-3"><label>Lead Status: </label></div><div class="col span-2-of-3"><div class="col span-1-of-3"><select name="leadstatus" id="leadstatus" value="'+value['LeadStatus']+'"><option>Select</option><option value="Active">Active</option><option value="Paused">Paused</option><option value="Expired">Expired</option><option value="Unsubscribed">Unsubscribed</option></select></div></div></div>')

                    $("leadstatus select").val(value['LeadStatus']);

                    form.append('<div class="row"><div class="col span-1-of-3"></div><div class="col span-2-of-3"><input type="submit" name="update_lead_submit" value="Update"></div></div>')

                    // form.append()

                    // form.append('<input type="button" value="button">');                    

          });


          $( "#formapp" ).html( form );

          $('#myModal').show();         


        }

      });

    });

});

файл dashboard.html где ajax отправить html код ФОРМЫ

<div id="myModal" class="modal">

                                      <!-- Modal content -->
        <div class="modal-content">
        <span class="close">&times;</span>



        <div id="formapp">
        </div>
        </div>
</div> 

Answer 1

Лучше, если вы можете вставить свои HTML коды в одну текстовую строку в файле PHP и добавить сразу.

Вместо многократного использования form.append, создайте переменную и добавьте HTML строк к нему, а затем добавить его сразу.

Answer 2

Вы можете сначала добавить элемент, а затем установить значения для всех этих добавленных элементов из jQuery, чтобы обновить дерево DOM и установить значения для этих элементов:

var form = $('form');
var value = {
  "LeadDescription": "LeadDescription",
  "AdminNotes": "AdminNotes",
  "OwnerNotes": "OwnerNotes",
  "LeadStatus": "Active"
}
form.append('<div class="row"><div class="col span-1-of-3"><label>Description: </label></div><div class="col span-2-of-3"><textarea type="text" name="leaddescription"></textarea></div></div>');

form.append('<div class="row"><div class="col span-1-of-3"><label>Admin Notes: </label></div><div class="col span-2-of-3"><textarea type="text" name="adminnotes"></textarea></div></div>');

form.append('<div class="row"><div class="col span-1-of-3"><label>Owner Notes: </label></div><div class="col span-2-of-3"><textarea type="text" name="ownernotes"></textarea></div></div>');

form.append('<div class="row"><div class="col span-1-of-3"><label>Lead Status: </label></div><div class="col span-2-of-3"><div class="col span-1-of-3"><select name="leadstatus" id="leadstatus" value="' + value['LeadStatus'] + '"><option>Select</option><option value="Active">Active</option><option value="Paused">Paused</option><option value="Expired">Expired</option><option value="Unsubscribed">Unsubscribed</option></select></div></div></div>');

form.append('<div class="row"><div class="col span-1-of-3"></div><div class="col span-2-of-3"><input type="submit" name="update_lead_submit" value="Update"></div></div>');

// set values now
$('[name="leaddescription"]').val(value['LeadDescription']);
$('[name="ownernotes"]').val(value['OwnerNotes']);
$('[name="adminnotes"]').val(value['AdminNotes']);
$("#leadstatus").val(value['LeadStatus']);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<form></form>

Если вы хотите сделать иначе, вы можете использовать <textarea>VALUE</textarea>

var form = $('form');
var value = {
  "LeadDescription": "LeadDescription",
  "AdminNotes": "AdminNotes",
  "OwnerNotes": "OwnerNotes",
  "LeadStatus": "Active"
}
form.append('<div class="row"><div class="col span-1-of-3"><label>Description: </label></div><div class="col span-2-of-3"><textarea type="text" name="leaddescription">' + value['LeadDescription'] + '</textarea></div></div>');

form.append('<div class="row"><div class="col span-1-of-3"><label>Admin Notes: </label></div><div class="col span-2-of-3"><textarea type="text" name="adminnotes">' + value['AdminNotes'] + '</textarea></div></div>');

form.append('<div class="row"><div class="col span-1-of-3"><label>Owner Notes: </label></div><div class="col span-2-of-3"><textarea type="text" name="ownernotes">' + value['OwnerNotes'] + '</textarea></div></div>');

form.append('<div class="row"><div class="col span-1-of-3"><label>Lead Status: </label></div><div class="col span-2-of-3"><div class="col span-1-of-3"><select name="leadstatus" id="leadstatus" value="' + value['LeadStatus'] + '"><option>Select</option><option value="Active">Active</option><option value="Paused">Paused</option><option value="Expired">Expired</option><option value="Unsubscribed">Unsubscribed</option></select></div></div></div>');

$("#leadstatus").val(value['LeadStatus']);

form.append('<div class="row"><div class="col span-1-of-3"></div><div class="col span-2-of-3"><input type="submit" name="update_lead_submit" value="Update"></div></div>');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<form></form>

Answer 3

Если вы хотите показать описание внутри textarea, вам нужно просто напечатать ваше значение внутри textarea.

<textarea> this is textarea.<textarea/>

тег <textarea><textarea/> показывает только значение, когда мы определяем значение внутри тега

form.append('<div class="row"><div class="col span-1-of-3"><label>Description: </label></div><div class="col span-2-of-3"><textarea type="text" name="leaddescription"> value['LeadDescription'] </textarea></div></div>');

form.append('<div class="row"><div class="col span-1-of-3"><label>Admin Notes: </label></div><div class="col span-2-of-3"><textarea type="text" name="adminnotes"> value['AdminNotes'] </textarea></div></div>');