Generate input field using jQuery's append

Question

Issue: I am attempting to append an input field from a modal window, containing a value inserted by the user, to an existing panel. So far the user is able to create the new field from the modal and add it, however, as this is part of an edit page, I want their input to be added to an input field. Here is the working code: BOOTPLY EXAMPLE . I want the newly generated field to be formatted the same as the existing fields because it will become part of a giant form allowing it to be submitted and update the operational page.

Question: Will I have to format this within the append function itself where I declare the other formatting constraints? or can I somehow set the attributes within the 'cloudcontainer' div where the input is being appended to? Also, should I be using .html function instead of append? Performance is really not a concern here.

Thanks

Answer 1

You have to append exactly same formatted input tag as you have generated in the beginning and then add the form value to it

$("#clickme").click(function(){
    $('.cloudcontainer').append('<div class="cloud"><p><b>'+$('#fieldtitle').val()+': </b><input style="display: inline; width: 325px;" class="form-control" id="projectName" type="text" value="'+$('#fieldvalue').val()+'" </input></p></div>');
  });

Demo

Answer 2

在您的JavaScript中，在添加字段的行上您应该执行以下操作：

$('.cloudcontainer').append('<div class="cloud"><p><b>'+$('#fieldtitle').val()+': </b>'+'<input type="text" value="' + $('#fieldvalue').val() + '"></p></div>');