Question

When i click on the link which has the id bob i want it to close the chat but also give the value of the hidden input shown below.

<div id="chat" class="chat">
    <div id="ch" class="ch"> 
        <label id="name1">bob</label>
        <a id="bob" onclick="closechat(this.id)">x</a>  <--- LINK I CLICK ON 
    </div>
    <input type="hidden" name="to" id="to" value="bob">  <-- HIDDEN VALUE I WANT 
    <input type="hidden" id="chatboxid" value="chatbox"> 
    <div class="chatbox" id="chatbox" style="display: none; "> 
        <div class="messages"></div>
        <textarea name="message" id="message" class="chatinp" rows="3" cols="27">
        </textarea>
        <button class="send" onclick="submitmessage()">Send</button>
    </div>
</div>

the link i click gives me a id which is the id of a user and then it will close that chatbox
but i need the hidden value as it stores the value of a needed id so i can use JQUERY
to close it.

oh and this gets clones so the elements ids keep on changing everytime i clone it.

Answer 1

Assuming that the id attribute on <a id="bob"> is unique, then you could do this inside your closechat function:

function closechat(id) {
    var value_you_want = $('#' + id).closest('.chat').find('input[name=to]').val();
    //...
}

Pay attention to Jared’s comment though, if you are duplicating id attributes (as your HTML implies) then you’re begging the world to bury you in strange difficult to reproduce bugs: id attributes must be unique within each page. Also, using onclick attributes is pretty old school. Your HTML would be better off looking like this:

<div class="chat">
    <div class="ch"> 
        <label>bob</label>
        <a class="closechat">x</a>  <--- LINK I CLICK ON 
    </div>
    <input type="hidden" name="to" value="bob">  <-- HIDDEN VALUE I WANT 
    <div class="chatbox" style="display: none; "> 
        <div class="messages"></div>
        <textarea name="message" class="chatinp" rows="3" cols="27">
        </textarea>
        <button class="send">Send</button>
    </div>
</div>

<script type="text/javascript">
    $('a.closechat').click(function() {
        // what closechat() does goes here and it should use
        // `this.id` instead of getting an argument.
    });
    $('button.send').click(function() {
        // What submitmessage() does goes here, it too looks at
        // `this` to to figure out where it is and which <textarea>
        // to use.
    });
</script>

References:

• closest
• find