Question

我有一个聊天客户端的表单，它应该向Socket IO服务器提交一条消息并在聊天中显示它。我的视图可以从其他远程客户端接收消息并在列表中显示在我的页面上，所以我知道Socket IO服务器正在运行，我认为我对jQuery和前端太糟糕了以使提交表单正常工作而我我很难过。

我有一个id为“target”的表单应该在按下发送按钮时触发submit（），但没有任何反应。如何从表单输入中获取文本以附加到带有“消息”的无序列表？

来自我的HTML：

       <div class="panel-body">
          <ul id="messages" class="media-list">
          </ul>
       </div>

       <form action="" id="target">
        <div class="input-group">
            <input id="m" class="form-control" placeholder="Enter Message" autocomplete="off"/>
            <span class="input-group-btn">
                <button class="btn btn-info" type="button">Send</button>
            </span>
        </div>
       </form>

我的内部JS：

 <script>
        $(function () {
            var socket = io();
            $("#target").submit(function(){
                console.log($('#m').val());
                socket.emit('response message', $('#m').val());
                $('#m').val('');
                return false;
            });
            socket.on('chat message', function(msg){
        	console.log("From user " + msg);
                $('#messages').append($('<li>').text(msg));
            });
            socket.on('response message', function(msg){
        	console.log("From agent " + msg);
                $('#messages').append($('<li>').text(msg));
            });
        });

        </script>

Answer 1

对于您的按钮类型，您需要指定submit作为表单上的提交操作。

<button class="btn btn-info" type="submit">Send</button>

JQuery Form Submit（）不适用于SocketIO客户端

1 个答案: