javascript - 文本栏的值未显示？

Question

我正在研究使用行 ID 生成 HTML 表单的模式框弹出。但我不明白为什么在 textbar 中不显示文本会出现一些错误。

1) 我的 textbar 没有显示 HTML 页面中的值，该值是从 JSON 按钮获取的，但我可以在我的检查元素中看到它。

2) HTML 中的选择选项未根据 JSON 值预先选择。

您可以在下面看到

使用ajax函数添加表单元素的modal.js文件的一部分。

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 FORM代码

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

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



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

Answer 1

您可以先附加元素，然后从 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>