如何使用javascript按钮发布特定消息？_Javascript_Jquery

如何使用javascript按钮发布特定消息？

javascript jquery

如何使用javascript按钮发布特定消息？,javascript,jquery,Javascript,Jquery,我有一个聊天室，而不是聊天，我需要我的“发送消息”按钮将用户，他在注册表中写的用户名，发送到聊天室中。除了用户名，没有别的 function make_chat_dialog_box(to_user_id, to_user_name) { var modal_content = '<div id="user_dialog_'+to_user_id+'" class="user_dialog" title="You have chat with '+to_user_name+'"&g

我有一个聊天室，而不是聊天，我需要我的“发送消息”按钮将用户，他在注册表中写的用户名，发送到聊天室中。除了用户名，没有别的

function make_chat_dialog_box(to_user_id, to_user_name)
{
    var modal_content = '<div id="user_dialog_'+to_user_id+'" class="user_dialog" title="You have chat with '+to_user_name+'">';
    modal_content += '<div style="height:400px; border:1px solid #ccc; overflow-y: scroll; margin-bottom:24px; padding:16px;" class="chat_history" data-touserid="'+to_user_id+'" id="chat_history_'+to_user_id+'">';
    modal_content += fetch_user_chat_history(to_user_id);
    modal_content += '</div>';
    modal_content += '<div class="form-group">';
    modal_content += '<textarea name="chat_message_'+to_user_id+'" id="chat_message_'+to_user_id+'" class="form-control chat_message"></textarea>';
    modal_content += '</div><div class="form-group" align="right">';
    modal_content+= '<button type="button" name="send_chat" id="'+to_user_id+'" class="btn btn-info send_chat">Send</button></div></div>';
    $('#user_model_details').html(modal_content);
}

$(document).on('click', '.start_chat', function(){
    var to_user_id = $(this).data('touserid');
    var to_user_name = $(this).data('tousername');
    make_chat_dialog_box(to_user_id, to_user_name);
    $("#user_dialog_"+to_user_id).dialog({
        autoOpen:false,
        width:400
    });
    $('#user_dialog_'+to_user_id).dialog('open');
    $('#chat_message_'+to_user_id).emojioneArea({
        pickerPosition:"top",
        toneStyle: "bullet"
    });
});

$(document).on('click', '.send_chat', function(){
    var to_user_id = $(this).attr('id');
    var chat_message = $.trim($('#chat_message_'+to_user_id).val());
    if(chat_message != '')
    {
        $.ajax({
            url:"insert_chat.php",
            method:"POST",
            data:{to_user_id:to_user_id, chat_message:chat_message},
            success:function(data)
            {
                //$('#chat_message_'+to_user_id).val('');
                var element = $('#chat_message_'+to_user_id).emojioneArea();
                element[0].emojioneArea.setText('');
                $('#chat_history_'+to_user_id).html(data);
            }
        })
    }
    else
    {
        alert('Type something');
    }
});

函数生成聊天对话框（至用户id、至用户名称）
{
var modal_内容=“”；
模态_内容+=''；
模态内容+=获取用户聊天历史（至用户id）；
模态_内容+=''；
模态_内容+=''；
模态_内容+=''；
模态_内容+=''；
模态_内容+=‘发送’；
$（'#用户模型详细信息'）.html（模式内容）；
}
$（文档）。在（'单击'，'上。开始聊天'，函数（）{
var to_user_id=$（this.data（'tuserid'）；
var to_user_name=$（this.data（'tousername'）；
创建聊天对话框（至用户id、至用户名）；
$（“#用户对话”+到用户id）。对话({
自动打开：错误，
宽度：400
});
$（'#user_dialog'+to_user_id）.dialog（'open'）；
$（'#聊天信息'+to_用户id）.emojioneArea({
拾取位置：“顶部”，
音调风格：“子弹”
});
});
$（文档）。在（'单击'，'上。发送聊天'，函数（）{
var to_user_id=$（this.attr（'id'）；
var chat_message=$.trim（$（'#chat_message'+to_user_id）.val（））；
如果（聊天信息！=''）
{
$.ajax({
url:“插入_chat.php”，
方法：“张贴”，
数据：{to_user_id:to_user_id，chat_message:chat_message}，
成功：功能（数据）
{
//$（'chat_message'+to_user_id）.val（''）；
var元素=$（'#聊天信息'+to_用户id）.emojioneArea（）；
元素[0]。emojioneArea.setText（“”）；
$（'#chat_history'+to_user_id）.html（数据）；
}
})
}
其他的
{
警惕（‘键入某物’）；
}
});

这是整个index.php

<?php include('database_connection.php'); session_start(); if(!isset($_SESSION['user_id'])) { header("location:login.php"); } ?> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>Chat Application using PHP Ajax Jquery</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdn.rawgit.com/mervick/emojionearea/master/dist/emojionearea.min.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script src="https://cdn.rawgit.com/mervick/emojionearea/master/dist/emojionearea.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.2.2/jquery.form.js"></script> </head> <body> <div class="container"> <br /> <h3 align="center">Chat Application using PHP Ajax Jquery</h3><br /> <br /> <div class="row"> <div class="col-md-8 col-sm-6"> <h4>Online User</h4> </div> <div class="col-md-2 col-sm-3"> <input type="hidden" id="is_active_group_chat_window" value="no" /> <button type="button" name="group_chat" id="group_chat" class="btn btn-warning btn-xs">Group Chat</button> </div> <div class="col-md-2 col-sm-3"> <p align="right">Hi - <?php echo $_SESSION['username']; ?> - <a href="logout.php">Logout</a></p> </div> </div> <div class="table-responsive"> <div id="user_details"></div> <div id="user_model_details"></div> </div> <br /> <br /> </div> </body> </html> <style> .chat_message_area { position: relative; width: 100%; height: auto; background-color: #FFF; border: 1px solid #CCC; border-radius: 3px; } #group_chat_message { width: 100%; height: auto; min-height: 80px; overflow: auto; padding:6px 24px 6px 12px; } .image_upload { position: absolute; top:3px; right:3px; } .image_upload > form > input { display: none; } .image_upload img { width: 24px; cursor: pointer; } </style> <div id="group_chat_dialog" title="Group Chat Window"> <div id="group_chat_history" style="height:400px; border:1px solid #ccc; overflow-y: scroll; margin-bottom:24px; padding:16px;"> </div> <div class="form-group"> <!--<textarea name="group_chat_message" id="group_chat_message" class="form-control"></textarea>!--> <div class="chat_message_area"> <div id="group_chat_message" contenteditable class="form-control"> </div> <div class="image_upload"> <form id="uploadImage" method="post" action="upload.php"> <label for="uploadFile"><img src="upload.png" /></label> <input type="file" name="uploadFile" id="uploadFile" accept=".jpg, .png" /> </form> </div> </div> </div> <div class="form-group" align="right"> <button type="button" name="send_group_chat" id="send_group_chat" class="btn btn-info">Send</button> </div> </div> <script> $(document).ready(function(){ fetch_user(); setInterval(function(){ update_last_activity(); fetch_user(); update_chat_history_data(); fetch_group_chat_history(); }, 5000); function fetch_user() { $.ajax({ url:"fetch_user.php", method:"POST", success:function(data){ $('#user_details').html(data); } }) } function update_last_activity() { $.ajax({ url:"update_last_activity.php", success:function() { } }) } function make_chat_dialog_box(to_user_id, to_user_name) { var modal_content = '<div id="user_dialog_'+to_user_id+'" class="user_dialog" title="You have chat with '+to_user_name+'">'; modal_content += '<div style="height:400px; border:1px solid #ccc; overflow-y: scroll; margin-bottom:24px; padding:16px;" class="chat_history" data-touserid="'+to_user_id+'" id="chat_history_'+to_user_id+'">'; modal_content += fetch_user_chat_history(to_user_id); modal_content += '</div>'; modal_content += '<div class="form-group">'; modal_content += '<textarea name="chat_message_'+to_user_id+'" id="chat_message_'+to_user_id+'" class="form-control chat_message"></textarea>'; modal_content += '</div><div class="form-group" align="right">'; modal_content+= '<button type="button" name="send_chat" id="'+to_user_id+'" class="btn btn-info send_chat">Send</button></div></div>'; $('#user_model_details').html(modal_content); } $(document).on('click', '.start_chat', function(){ var to_user_id = $(this).data('touserid'); var to_user_name = $(this).data('tousername'); make_chat_dialog_box(to_user_id, to_user_name); $("#user_dialog_"+to_user_id).dialog({ autoOpen:false, width:400 }); $('#user_dialog_'+to_user_id).dialog('open'); $('#chat_message_'+to_user_id).emojioneArea({ pickerPosition:"top", toneStyle: "bullet" }); }); $(document).on('click', '.send_chat', function(){ var to_user_id = $(this).attr('id'); var chat_message = $.trim($('#chat_message_'+to_user_id).val()); if(chat_message != '') { $.ajax({ url:"insert_chat.php", method:"POST", data:{to_user_id:to_user_id, chat_message:chat_message}, success:function(data) { //$('#chat_message_'+to_user_id).val(''); var element = $('#chat_message_'+to_user_id).emojioneArea(); element[0].emojioneArea.setText(''); $('#chat_history_'+to_user_id).html(data); } }) } else { alert('Type something'); } }); function fetch_user_chat_history(to_user_id) { $.ajax({ url:"fetch_user_chat_history.php", method:"POST", data:{to_user_id:to_user_id}, success:function(data){ $('#chat_history_'+to_user_id).html(data); } }) } function update_chat_history_data() { $('.chat_history').each(function(){ var to_user_id = $(this).data('touserid'); fetch_user_chat_history(to_user_id); }); } $(document).on('click', '.ui-button-icon', function(){ $('.user_dialog').dialog('destroy').remove(); $('#is_active_group_chat_window').val('no'); }); $(document).on('focus', '.chat_message', function(){ var is_type = 'yes'; $.ajax({ url:"update_is_type_status.php", method:"POST", data:{is_type:is_type}, success:function() { } }) }); $(document).on('blur', '.chat_message', function(){ var is_type = 'no'; $.ajax({ url:"update_is_type_status.php", method:"POST", data:{is_type:is_type}, success:function() { } }) }); $('#group_chat_dialog').dialog({ autoOpen:false, width:400 }); $('#group_chat').click(function(){ $('#group_chat_dialog').dialog('open'); $('#is_active_group_chat_window').val('yes'); fetch_group_chat_history(); }); $('#send_group_chat').click(function(){ var chat_message = $.trim($('#group_chat_message').html()); var action = 'insert_data'; if(chat_message != '') { $.ajax({ url:"group_chat.php", method:"POST", data:{chat_message:chat_message, action:action}, success:function(data){ $('#group_chat_message').html(''); $('#group_chat_history').html(data); } }) } else { alert('Type something'); } }); function fetch_group_chat_history() { var group_chat_dialog_active = $('#is_active_group_chat_window').val(); var action = "fetch_data"; if(group_chat_dialog_active == 'yes') { $.ajax({ url:"group_chat.php", method:"POST", data:{action:action}, success:function(data) { $('#group_chat_history').html(data); } }) } } $('#uploadFile').on('change', function(){ $('#uploadImage').ajaxSubmit({ target: "#group_chat_message", resetForm: true }); }); $(document).on('click', '.remove_chat', function(){ var chat_message_id = $(this).attr('id'); if(confirm("Are you sure you want to remove this chat?")) { $.ajax({ url:"remove_chat.php", method:"POST", data:{chat_message_id:chat_message_id}, success:function(data) { update_chat_history_data(); } }) } }); }); </script>

使用PHP Ajax Jquery的聊天应用程序
使用PHP Ajax Jquery的聊天应用程序


在线用户组聊天您好--



。聊天信息区域{位置：相对；宽度：100%；高度：自动；背景颜色：FFF；边框：1px实心#CCC；边框半径：3px；}组聊天信息{宽度：100%；高度：自动；最小高度：80px；溢出：自动；填充：6px 24px 6px 12px；}。图像上传{位置：绝对；顶部：3px；右侧：3px；}。图像上传>表单>输入{显示：无；}。图像上传{宽度：24px；光标：指针；}发送$（文档）。准备就绪（函数（）{fetch user（）；setInterval（function（）{update_last_activity（）；fetch_user（）；update_chat_history_history（）；fetch_user（）{$.ajax（{url:'fetch_user.php'，method:'POST'，success:function（data）{$（'#user_details'）.html（data）}}}}function update u last_activity（）{.ajax（{url:'update last__activity.php}），success:function（）{}}}function make_chat_dialog_box（to_user_id，to_user_name）{var modal_content=''；modal_content+=''；modal_content+=获取_user_chat_历史（to_user_id）；modal_content+=''；modal_content+=''；modal_content+''；modal_content+=''；modal_content+=''；modal_content+='Send'.$（'.\35;用户_模型u'）。html（modal_content）}详细信息）$（文档）.on（'click'，'start_chat'，function（）{var to_user_id=$（this）.data（'tuserid'）；var to_user_name=$（this）.data（'tusername'）；make_chat_对话框（to_user_id，to_user_name）$（“#user_dialog_”+to_user_id）.dialog（{autoOpen false，width:400}）；$（'35; user#dialog+to#user#dialog+to#用户#id）..消息区（'uemou({pickerPosition:“top”，toneStyle:“bullet”}）；$（document）.on（'click'，'send_chat'，function（）{var to_user_id=$（this）.attr（'id'）；var chat_message=$.trim（$（'chat_message_+to_user_id）.val（））；if（chat_message！=''）{.ajax（{url:'insert_chat.php'，method:'POST'，data:{to_user_id:to_user_id，chat message success，}，function:（数据）{/$（'#chat_message_'+to_user_id）.val（''）；var元素=$（'#chat_message_'+to_user_id）.emojioneArea（）；元素[0].emojioneArea.setText（'''）$（'#chat_history__'+to_user_id.html（数据）}}}html（数据）}}其他{alert（'Type something'）；}）；函数fetch user_chat_chat_chat_历史（to_user.u id:)fetch user.php:“fetch user.{history.”fetch url:“fetch hat”{user.{url:{hat.”{to_user_id:to_user_id}，成功：函数（数据）{$（'#chat_history}+to_user_id）.html（数据）}}}函数更新{$（'.chat_history'）。每个（函数（）{var to_user_id=$（this）。数据（'tuserid'）；获取_user_chat_history（to_id）}$（to_user_id）}$）；（文档）。在（'on'，'ui按钮上，'icon（），单击对话框图标，'ui按钮，{$。销毁函数（'u'）.remove（）；$（'#is#u active_group_chat_window'）.val（'no'）；$（document）.on（'focus'，'.chat_message'，function（）{var is_type='yes'；$.ajax（{url:'update_is_is_type_status.php'，method POST'，data:{is_type:is_type:is_type}，success:function:function（）{}}}）；$（document on（'blur'，'chat#chat#message var='var='var='var='u type='no'）。ajax:“update_is_type_status.php”，方法：“POST”，数据：{is_type:is_type}，success:function（）{}）；$（'#group_chat_dialog'）。dialog（{autoOpen:false，width:400}）；$（'#group_chat'）。单击（function（）{$（'#group#chat_chat_对话'）。对话框（'open$）（'#是活动的#group_chat_chat（）窗口'）。val（'yes chat group#获取#历史记录。#（function（）{var chat_message=$.trim（$）（$）（group_chat_message'）.html（）；var action='insert_data'；if（chat_message！=''）{$.ajax（{url:'group_chat.php'，method:'POST'，data:{chat_message chat_message action:action}，success:function:function（数据）{$（'.'group_chat_message html（））.html（''）；$）（'group#chat u chat u-history'）.html（数据）}}其他}}（'Type something'）；}}）；函数fetch_group_chat_history（）{var group_chat_dialog_active=$（'is#active_group_chat_window'）.val（）；var action=“fetch_data”；if（group_chat_dialog_active='yes'）{.ajax（{url:'group_chat.php'，method POST），数据：{action:action:action}，success:function（数据）{$（'group#chat#chat#history'）.html（数据）}}}$（'#uploadFile'）。在（'change'，function（）{$（'#uplo'）上
    <input type="button" onclick="seperator('"+ [ PHP or JS STUFF ]+ "');">";

     <input type=hidden id="user", name = "user">

   <script>
       function seperator(phpin){
        // check if value is there
       if (typeof phpin ==="undefined"){
            alert("PHP ERROR: Please fill the whole form !");
           return;
       }
       // get the form by form id

        //split the value by " " 
        var h=phpin.split();
        //separate value parts
        var username=h[0];
        var whatever=h[1];
        // get the hidden field
         var hidden =documentGetElemetById("user");
         //fill the hidden field
          hidden.value=username;
          //here you can call now also your submit function instead of this 
          //here or comment it out
         //get the form   
          var form=documentGetElemetById("formid");
         //submit form
          form.submit();
        }
      </script>