CODEWITHSUNDEEP
javascriptjqueryhtmlhidden-field
AnimaSola
AnimaSola

Reputation: 7856

Update 1 text area from multiple hidden fields, through multiple links

Basic layout:

<textarea id="courseText"></textarea>

<ul class="chapter-items">

    <li id="chap1link">Chapter 1</li>
    <input id="chap1value" type="hidden" value="I am he as you are he as you are me and we are all together" />

    <li id="chap2link">Chapter 2</li>
    <input id="chap2value" type="hidden" value="See how they run like pigs from a gun, see how they fly" />

    <li id="chap3link">Chapter 3</li>
    <input id="chap3value" type="hidden" value="I'm crying" />

</ul>

Is it possible to update the textarea courseText whenever the li is clicked with the value from the corresponding hidden field?

If chap1link li is clicked, it loads the value of chap1value onto the textarea.

Any piece of advise would be highly appreciated. Thanks!

Upvotes: 0

Views: 153

Answers (1)

Anujith
Anujith

Reputation: 9370

Try:

$(".chapter-items li").click(function(){    
    $("#courseText").val($(this).next('input[type=hidden]').val());
});

Sample

However I would suggest the following html markup (anything inside a ul must be in an li) 

<ul class="chapter-items">
    <li id="chap1link">Chapter 1
    <input id="chap1value" type="hidden" value="I am he as you are he as you are me and we are all together" />    
    </li>
    <li id="chap2link">Chapter 2
     <input id="chap2value" type="hidden" value="See how they run like pigs from a gun, see how they fly" />
    </li>
    <li id="chap3link">Chapter 3
    <input id="chap3value" type="hidden" value="I'm crying" />
    </li>
</ul>

And the following js code:

$(".chapter-items li").click(function(){    
    $("#courseText").val($(this).find('input[type=hidden]').val());
});

Sample 2

Upvotes: 3

Related Questions