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

Tushar Gupta · Accepted Answer · 2015-04-01 15:43:58Z

2

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

answered Apr 1, 2015 at 15:43

Tushar Gupta

16k1 gold badge33 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

IvanJ · Accepted Answer · 2015-04-01 15:39:33Z

1

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>');

answered Apr 1, 2015 at 15:39

IvanJ

6555 silver badges20 bronze badges

1 Comment

jmpman Over a year ago

Thanks, IvanJ, works perfectly! I just accepted the other answer because the formatting was more consistent - figure that will be better for future reference. Wish I could up-vote you, but don't have enough rep.

Collectives™ on Stack Overflow

Generate input field using jQuery's append

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related