Question

I use these elements – jQuery window. http://fstoke.me/jquery/window/

I create the window and I have a website created div. This div is hidden. When I open the window the div is visible. This works correctly.

When I click on the picture(#imgChatSend) – I want to get value from input(#txtChatInput). Entry is always empty. Why?

This is my code:

HTML

<div id="ChatForm" style="display:none;">

<input id="txtChatInput"name="txtChatInput" type="text" />
<img id="imgChatSend" src="images/btn-send.png" alt="Send" />

</div>

JS

windowchat = $.window({
                           
                            title: "Chat",
                            height: 300,
                            width: 300,
                            content: $("#ChatForm").html(),
                            minWidth: 300,
                            minHeight: 300,
                            maxWidth: 800,
                            maxHeight: 800
                        });


$('#imgChatSend').live('click', function() { 
                
        alert($("#txtChatInput").val());  //$("#txtChatInput").val() is ""
                return false;
            });

Answer 1

It seems the window plugin creates a clone of the content you are showing in the window, resulting in 2 inputs with the id txtChatInput.

Using $("#txtChatInput") will refer to the first element found with that specific id (id’s are supposed to be unique).

A workaround would be to give your selector a context in which it will start looking for the input:

$('#imgChatSend').live('click', function() { 
   var $parent = $(this).closest("div"); // get the div the button we just clicked is in
   alert($("#txtChatInput", $parent).val()); // tell jquery to only look in this div for the element with id txtChatInput

   return false;
});