jQuery - input text attributes not displaying on page

Question

I am using jQuery to generate input elements for a dynamic form. For the most part, things are working out well, but I'm having a problem setting the text property of the elements... specifically, the text values don't render on the page, though they appear correct in the elements tab of the console.

For instance...

function generateInput(siteNumber, x){

    adult = $("<input/>", {
            type: 'radio',
            id: 'adult'+siteNumber+''+x+'',
            name: 'age'+siteNumber+'['+x+']',
            value: 'adult',
            text: 'Adult'
            });

    juvenile = $("<input/>", {
               type: 'radio',
               id: 'juvenile'+siteNumber+''+x+'',
               name: 'age'+siteNumber+'['+x+']',
               value: 'juvenile',
               text: 'Juvenile'
               });

    return adult.append(juvenile);

};

$(document).on("change", ".number_select", function(){
    siteNumber = $(this).parent().attr('data-site_number');
    numberFound = $(this).val();

    for(x = 1; x <= numberFound; x++){
        this['inputArray' + siteNumber].push(generateInput(siteNumber, x));
     };

     $(this).parent().append(this['inputArray' + siteNumber]);
});

Despite the fact that the console displays

<input type="radio" id="adult11" name="age1[1]" value="adult">Adult</input>
<input type="radio" id="juvenile11" name="age1[1]" value="juvenile">Juvenile</input>

these text elements do not appear on the page - the two radio buttons are there, no text. I would appreciate it if someone could help me understand why this is happening and what I can do to fix it. Thanks very much!

EDITING To adeneo's point, input tags are self-closing, so no dice with .text(). However, I have also tried .prepend()/.append() and similarly, nothing doing...

adult = $("<input/>", {
     type: 'radio',
     id: 'adult'+siteNumber+''+x+'',
     name: 'age'+siteNumber+'['+x+']',
     value: 'adult'
     }).prepend('Adult');

juvenile = $("<input/>", {
     type: 'radio',
     id: 'juvenile'+siteNumber+''+x+'',
     name: 'age'+siteNumber+'['+x+']',
     value: 'juvenile'
     }).prepend('Juvenile');

An input is a self closing element, it has no text, only a value, nor does it have a closing tag. — adeneo
– adeneo, Commented Apr 1, 2016 at 20:42
Good call - also tried .prepend() to no avail - editing question to reflect this. — skwidbreth
– skwidbreth, Commented Apr 1, 2016 at 20:46
As it's a self closing element, you can't prepend or append to it, it can't have children. — adeneo
– adeneo, Commented Apr 1, 2016 at 20:49
You'll have to add the text to the parent element, for instance wrapping both the input and the text in a span etc. — adeneo
– adeneo, Commented Apr 1, 2016 at 20:49

dave · Accepted Answer · 2016-04-01 20:52:31Z

1

I would create a label with the text you want, then prepend the input to the label element:

adult = $("<label>Adult</label>").prepend($("<input/>", {
        type: 'radio',
        id: 'adult'+siteNumber+''+x+'',
        name: 'age'+siteNumber+'['+x+']',
        value: 'adult'});

answered Apr 1, 2016 at 20:52

dave

65.1k6 gold badges81 silver badges98 bronze badges

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

3 Comments

litel Over a year ago

As a best practice, you should also add the 'adult'+siteNumber+''+x+'' generated id tag as a for attribute on the label.

skwidbreth Over a year ago

Thank you - for whatever reason, I had to parse it like this - adult = $("<input/>", { type: 'radio', id: 'adult'+siteNumber+''+x+'', name: 'age'+siteNumber+'['+x+']', value: 'adult' }); adultLabel = $("<label/>", { text: 'Adult', for: 'adult'+siteNumber+''+x+'' }).append(adult);

skwidbreth Over a year ago

Using the syntax that you had prepended the label with an empty text input field. Any idea why?

Collectives™ on Stack Overflow

jQuery - input text attributes not displaying on page

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related