堆栈内存溢出
  繁体   English   中英

如何让我的 javascript 按钮发布特定消息？

[英]How can I make my javascript button to post a certain message?

 原文  2019-10-12 09:36:21  0   1    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+'">';
    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');
    }
});

这是整个索引。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>

我有所有这些文件：

数据库连接

D b

fetch_user

fetch_user_chat_history

群聊

指数

插入聊天

登录

登出

登记

删除聊天

update_is_type e_status

update_last_activity

上传

1 个解决方案

解决方案1
 1  2019-10-12 10:33:35

而不是使用按钮使用

    <input type="button" onclick="seperator('"+ [ PHP or JS STUFF ]+ "');">";

也许你还定义了一个隐藏的输入元素

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

他现在不再发送表格，而是首先调用 javascript function。 在这个 function 中，您现在可以做任何您需要的事情，如果需要，最后提交表格。 我为你创建了一个原型（像往常一样包含或构建在 js 中）你可以修改它。 你的需求是肯定的。 只是给你一个想法:)

   <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>

玩得开心。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何让我的 javascript 表单重置按钮工作？ 如何在按下按钮后显示某些获取数据。 使用 JavaScript 和 HTML 在某些情况下，如何使我的按钮被点击？ 当被问到某个问题时，如何让我的 Discord Bot (Javascript) 在标签中回复用户？ 如何在 JavaScript 中制作重新启动按钮？ 如何使滚动按钮与某个视频 url 相关联？ 如何在CodeIgniter中动态发布消息？ 如何使某个脚本未在javascript中执行？ （Javascript）如何制作静音按钮以在单击时静音我的背景音乐？ 如何在 JavaScript 中为我的图表制作销毁按钮？ （图表.js）
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM