Javascript - rendering input field text

Question

I wrote a function that renders all my selected fields (seats) in a div class.. When I click on them they need to be shown by their name.. Now, I want that fields to be written in the input field I selected on click..

var rowRange = 'abcdefghijklmnopqrstuvwxyz'.split('');

var $cart = $('#selected-seats'),
    sc = $('#seat-map').seatCharts({
    map: [
        'aaaaa__aaaaa',
        'aaaaa__aaaaa',
        'aaaaa__aaaaa'
    ],

    naming : {
        top : false,
        getLabel : function (character, row, column) {
            return rowRange[row - 1].toUpperCase() + column;
        },
    },

    click: function () {
        if (this.status() === 'available') {
            $('<li>'+this.settings.label+'</b></li>')
                .appendTo($cart);


            $counter.text(sc.find('selected').length+1);

            return 'selected';
    });
});

and this is my form input field

 <input type="text" id="selected-seats" class="form-control"  size="20">

This example works fine but I have trouble connecting it with input field..

if (this.status() == 'available') {
            $('<li>'+this.settings.label+'</b></li>')
                .appendTo($cart);

This does not..

if (this.status() == 'available') {
            document.getElementById('selected-seats')
                .appendTo($cart);

What about $('#selected-seats').appendTo($cart)?

scrowler
– scrowler

2018-11-15 11:45:30 +00:00
Commented Nov 15, 2018 at 11:45 — scrowler
– scrowler, Commented Nov 15, 2018 at 11:45
Also tried. Still nothing.

Jhonas
– Jhonas

2018-11-15 11:49:28 +00:00
Commented Nov 15, 2018 at 11:49 — Jhonas
– Jhonas, Commented Nov 15, 2018 at 11:49

Szab · Accepted Answer · 2018-11-15 11:50:05Z

1

document.getElementById('selected-seats')

The line above returns a pure DOM element, not wrapped by any jQuery object. DOM elements don't have the appendTo method - jQuery objects do however. So what you need to do is either to use jQuery to get the element by ID (first example below) or use it to wrap the result of the native getElementById method (second example below).

// First example
$('#selected-seats').appendTo($cart)

// Second example
var selectedSeatsElement = document.getElementById('selected-seats');
$(selectedSeatsElement).appendTo($cart)

answered Nov 15, 2018 at 11:50

Szab

1,2638 silver badges18 bronze badges

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

6 Comments

Jhonas Over a year ago

Thank you for your fast response. I tried both ways and it doesn't work. I am starting to think it can be related to my input field?

Szab Over a year ago

It might be. Does it find the element when you invoke the getElementById method yourself?

Jhonas Over a year ago

It's not triggering! :/

Szab Over a year ago

Could you be more specific?

Jhonas Over a year ago

Everything is passing without any errors. This part does work $('<li>'+this.settings.label+'</b></li>'), but when it comes on the example with input field it does nothing..

|

Jhonas · Accepted Answer · 2018-11-15 13:04:27Z

0

I just fixed it!

I needed to return value for input field.

$('#selected-seats')
                 .attr('id', 'cart-item-'+this.settings.id)
                 .val(this.settings.label)
                 .appendTo($cart);

answered Nov 15, 2018 at 13:04

Jhonas

337 bronze badges

Collectives™ on Stack Overflow

Javascript - rendering input field text

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related