CODEWITHSUNDEEP
javascriptjqueryhtml
jmpman
jmpman

Reputation: 23

Generate input field using jQuery's append

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

Upvotes: 0

Views: 72

Answers (2)

Tushar Gupta
Tushar Gupta

Reputation: 15913

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

Upvotes: 2

IvanJ
IvanJ

Reputation: 645

In your JavaScript, on the line where you append fields you should do something like this:

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

Upvotes: 1

Related Questions