CODEWITHSUNDEEP
javascriptjquery
skwidbreth
skwidbreth

Reputation: 8444

jQuery - input text attributes not displaying on page

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

Upvotes: 0

Views: 53

Answers (1)

dave
dave

Reputation: 64667

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

Upvotes: 1

Related Questions