Create a label using jQuery on the fly

Question

I need to create a label and text field on the fly and also include datepicker for the textfield. I need something like this:

<label for="from">From </label> <input type="text" id="from" name="from" />

I have tried something like this in jQuery:

var label = $("<label>").attr('for', "from");   
                    label.html('Date: ' +
                        '<input type="text" id="from name="from" value="">');

                    $(function() {
                        $("#from").datepicker();
                    });

This one somehow doesn't create the label and also the text field. I am not sure what I am missing.

EDIT

To be more precise, I am using this in the portlets and I don't have body tags in the jsp page. So when I call the function to append to body it won't.

Are you adding this to the DOM somewhere else? The code here creates the object, but doesn't attach it to the dom, so it won't display in the browser. — hellslam, May 01 '12 at 16:45

kapa · Accepted Answer · 2015-05-19T06:23:31.013

26

Something like this would work:

//Create the label element
var $label = $("<label>").text('Date:');
//Create the input element
var $input = $('<input type="text">').attr({id: 'from', name: 'from'});

//Insert the input into the label
$input.appendTo($label);
//Insert the label into the DOM - replace body with the required position
$('body').append($label);

//applying datepicker on input
input.datepicker();

jsFiddle Demo

Please note that you don't have to use the for attribute on the label if the input element is inside it. So use one of these:

<label><input id="x1"></label>

<label for="x1"></label> <input id="x1">

edited May 19 '15 at 06:23

answered May 01 '12 at 16:47

kapa

77,694
21
158
175

I am actually using this is in the portlets, I don't have body tag in portlets. Its just a jsp page – user525146 May 01 '12 at 16:52
1

@user525146 Instead of `body`, simply use any other selector you wish. For example, if you have a `
`, use `$('#inserthere')` instead of `$('body')`.
– kapa May 01 '12 at 16:57
I have another problem My jsp page is an ajax page, so each time the page loads it creates a new Date label and text field.. – user525146 May 01 '12 at 17:08
2

@user525146 That's easy. Since `id`s must be unique in the whole document, you should simply check for an already existing `#from` element. Something like `if ($('#from').length == 0) { //run code }`. – kapa May 01 '12 at 17:37
It worked like a charm. Thanks very much, I just have one more question, did you work on jquery datatables plugin? I am trying to incorporate the datepicker into the sDom element of the datatables by creating a feature plugin. – user525146 May 01 '12 at 19:22
@user525146 Nope. But for every problem, you should ask a different question. – kapa May 01 '12 at 20:38
I do have it here..http://stackoverflow.com/questions/10386351/create-datepicker-and-dropdown-in-sdom. I haven't got any response though.. – user525146 May 01 '12 at 20:43
No response because the link is broke. – JoshYates1980 Jun 07 '17 at 15:33
@JoshYates1980 That question got deleted for some reason – kapa Jun 08 '17 at 11:12

score 4 · Answer 2 · answered May 01 '12 at 16:45

You will need to attach the label you've created to the DOM to get it to show:

var label = $("<label>").attr('for', "from");
    label.html('Date: ' +
      '<input type="text" id="from name="from" value="">');

label.appendTo('body');

// set up datepicker
label.find('#from').datepicker();

score 1 · Answer 3 · answered May 01 '12 at 16:45

1

Where are you trying to insert the label? If you want it at the beginning of the page, you can do something like this.

var $label = $("<label>").attr('for', "from");   

$label.html('Date: <input type="text" id="from" name="from" value="">');

$(function() {
    $('body').prepend($label);

    $(':input', $label).datepicker();
});

answered May 01 '12 at 16:45

Bryan

6,682
2
17
21

Please note, that in my version of the answer, I've corrected the "id" typo, and I've also appended the label to the body, while providing a way to easily change the target to append to :) – Bryan May 01 '12 at 16:54

score 0 · Answer 4 · answered May 01 '12 at 16:45

0

1) You are missing closing quote at the end of the ID attribute.
2) You didn't append the label itself to anything.

answered May 01 '12 at 16:45

Ilia G

10,043
2
40
59

Create a label using jQuery on the fly

4 Answers4

Linked