Changing an input fields value in jQuery on click

Question

My site searches the Spotify Library and returns a list of results. The idea is that users can click on one of the results and have it added to a playlist which will in turn be posted as part of a form submit. The code below adds the clicked song to a .selected-list container, then adds a hidden input to the DOM with the value of the Spotify song href.

This all works, but each time I click a new song and a new input is added, the href of all the previous added inputs changes too. I know that it's because I am identifying the .track which all the inputs have, but I can't quite figure out how to go about it.

$('.spotify-result').click(function() {
        $(this).clone().appendTo($('.selected-list'));
        $('.submit-spotify').before('<input type="hidden" id="track_href" class="track" value="" name="track_href" />');
        $('.track').val($('.track-href', this).text());
});

hradac · Accepted Answer · 2013-03-29 15:51:01Z

1

So if the idea is to create a new hidden input each time an item is added to the list I suggest doing the following.

$('.spotify-result').click(function() {
        var $input = $('<input type="hidden" id="track_href" class="track" value="" name="track_href" />');

        $(this).clone().appendTo($('.selected-list'));
        $('.submit-spotify').before($input);
        $input.val($('.track-href', this).text());
});

This creates a jQuery object called $input that you can manipulate as if it were an element on the page and when you're ready inject it somewhere on your page. This way it doesn't matter what order it appears in the DOM so if you have to change where it goes on your page you won't have to wrestle with .prev() methods.

answered Mar 29, 2013 at 15:51

hradac

2,5011 gold badge19 silver badges21 bronze badges

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

2 Comments

GuerillaRadio Over a year ago

This certainly makes sense from a scalability point of view. Thanks. Out of interest, what does the 'this' refer to in this line - $input.val($('.track-href', this).text()); Is it $input?

hradac Over a year ago

@GuerillaRadio this inside of an event handler like this should refer to the element the event is fired off of. In this case the element being clicked.

Nelson Benítez León · Accepted Answer · 2013-03-29 15:34:07Z

1

Replace your following code:

$('.track').val($('.track-href', this).text());

for this one:

$('.submit-spotify').prev('.track').val($('.track-href', this).text());

answered Mar 29, 2013 at 15:34

Nelson Benítez León

51k8 gold badges70 silver badges84 bronze badges

Comments

talemyn · Accepted Answer · 2013-03-29 15:42:59Z

1

It's because you are using the .track class as the selector in the final line of your code ($('.track').val($('.track-href', this).text());). That will update all elements that have a class="track", which, as shown in the prior line of code, every new input will have.

If we could see a sample of your HTML output, it might be a little easier to help you with a solution . . . hard to tell what some of the things are that you are selecting . . .

My best guess right now, though, would be to try combining the last two lines into one and set the value when you create the input:

    $('.submit-spotify').before('<input type="hidden" id="track_href" class="track" value="' + $('.track-href', this).text() + '" name="track_href" />');

edited Mar 29, 2013 at 15:42

answered Mar 29, 2013 at 15:36

talemyn

8,0004 gold badges33 silver badges52 bronze badges

1 Comment

GuerillaRadio Over a year ago

I've tried this too talemyn and it works perfectly, thanks very much.

Collectives™ on Stack Overflow

Changing an input fields value in jQuery on click

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related