javascript - 在文本框中输入时提交 ajax 表单

coder 2024-04-12 原文

我有一个文本框，它是我的消息文本框。目前，我的 ajax 表单只需单击一个按钮即可工作。我猜是因为按钮的名称。

我想要这样当我在文本框中按回车键时，它会提交表单但不会刷新页面。

在输入时添加一些 jquery 使我的页面刷新。

下面是我刷新页面当前状态的代码。我使用按钮的工作状态包含在此表单中:

    <form class="chat-form form -dark" method="POST" onsubmit="return submitchat();">
        <input class="form-control" type="text" name="chat" id="chatbox" placeholder="Type something.." />
        <input type='submit' name='send' id='send' class='btn btn-send' value='Send' />
    </form>

我的 php 脚本是:

    <form class="chat-form form -dark" method="POST" onsubmit="return submitchat();">
        <input class="form-control entryMsg" type="text" name="chat" id="chatbox" placeholder="Type something.." />
    </form>

我的 Javascript/Jquery 是:`

<script>
    // Javascript function to submit new chat entered by user
    function submitchat(){
            if($('#chat').val()=='' || $('#chatbox').val()==' ') return false;
            $.ajax({
                url:'chat/chat.php',
                data:{chat:$('#chatbox').val(),ajaxsend:true},
                method:'post',
                success:function(data){
                    $('#result').html(data); // Get the chat records and add it to result div
                    $('#chatbox').val(''); //Clear chat box after successful submition
                    document.getElementById('result').scrollTop=document.getElementById('result').scrollHeight; // Bring the scrollbar to bottom of the chat resultbox in case of long chatbox
                }
            })
            return false;
    };

    // Function to continously check the some has submitted any new chat
    setInterval(function(){
        $.ajax({
                url:'chat/chat.php',
                data:{ajaxget:true},
                method:'post',
                success:function(data){
                    $('#result').html(data);
                }
        })
    },1000);

    // Function to chat history
    $(document).ready(function(){
        $('#clear').click(function(){
            if(!confirm('Are you sure you want to clear chat?'))
                return false;
            $.ajax({
                url:'chat/chat.php',
                data:{username:"<?php echo $_SESSION['username'] ?>",ajaxclear:true},
                method:'post',
                success:function(data){
                    $('#result').html(data);
                }
            })
        })
    })
</script>
<script>
    $(document).ready(function() {
        $('.entryMsg').keydown(function(event) {
            if (event.keyCode == 13) {
                this.form.submit();
                return false;
             }
        });
    });
</script>`

最佳答案

添加一个keydown函数来运行函数。

$("#txtSearchProdAssign").keydown(function (e) {
  
  if (e.keyCode == 13) {
   console.log("put function call here");
   e.preventDefault();
   submitchat();
  }
  
});

function submitchat(){
  console.log("SUBMITCHAT function");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<form type="post">
<input type="text" id="txtSearchProdAssign">
</form>

关于javascript - 在文本框中输入时提交 ajax 表单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44965208/

入时 javascript 39 34 function php

有关javascript - 在文本框中输入时提交 ajax 表单的更多相关文章

ruby - 使用 ruby 将 HTML 转换为纯文本并维护结构/格式 - 2
我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。最佳答案首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h
ruby-on-rails - Rails 编辑表单不显示嵌套项 - 2
我得到了一个包含嵌套链接的表单。编辑时链接字段为空的问题。这是我的表格:Editingkategori{:action=>'update',:id=>@konkurrancer.id})do|f|%>'Trackingurl',:style=>'width:500;'%>'Editkonkurrence'%>|我的konkurrencer模型:has_one:link我的链接模型:classLink我的konkurrancer编辑操作:defedit@konkurrancer=Konkurrancer.find(params[:id])@konkurrancer.link_attrib
ruby - 如何在 Rails 4 中使用表单对象之前的验证回调？ - 2
我有一个服务模型/表及其注册表。在表单中，我几乎拥有服务的所有字段，但我想在验证服务对象之前自动设置其中一些值。示例:--服务Controller#创建Action:defcreate@service=Service.new@service_form=ServiceFormObject.new(@service)@service_form.validate(params[:service_form_object])and@service_form.saverespond_with(@service_form,location:admin_services_path)end在验证@ser
jquery - 我的 jquery AJAX POST 请求无需发送 Authenticity Token (Rails) - 2
rails中是否有任何规定允许站点的所有AJAXPOST请求在没有authenticity_token的情况下通过？我有一个调用Controller方法的JqueryPOSTajax调用，但我没有在其中放置任何真实性代码，但调用成功。我的ApplicationController确实有'request_forgery_protection'并且我已经改变了config.action_controller.consider_all_requests_local在我的environments/development.rb中为false我还搜索了我的代码以确保我没有重载ajaxSend来发送
git使用常见问题（提交代码，合并冲突） - 2
文章目录git常用命令（简介，详细参数往下看）Git提交代码步骤gitpullgitstatusgitaddgitcommitgitpushgit代码冲突合并问题方法一：放弃本地代码方法二：合并代码常用命令以及详细参数gitadd将文件添加到仓库：gitdiff比较文件异同gitlog查看历史记录gitreset代码回滚版本库相关操作远程仓库相关操作分支相关操作创建分支查看分支：gitbranch合并分支：gitmerge删除分支：gitbranch-ddev查看分支合并图：gitlog–graph–pretty=oneline–abbrev-commit撤消某次提交git用户名密码相关配置g
jquery - 如何将 AJAX 变量从 jQuery 传递到他们的 Controller ？ - 2
我有一个电子邮件表格。但是我正在制作一个测试电子邮件表单，用户可以在其中添加一个唯一的电子邮件，并让电子邮件测试将其发送到该特定电子邮件。为了简单起见，我决定让测试电子邮件通过ajax执行，并将整个内容粘贴到另一个电子邮件表单中。我不知道如何将变量从我的HAML发送到我的Controllernew.html.haml-form_tagadmin_email_blast_pathdoSubject%br=text_field_tag'subject',:class=>"mass_email_subject"%brBody%br=text_area_tag'message','',:nam
ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2
我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的
ruby-on-rails - rspec - 我怎样才能让 "pendings"有我的文本而不仅仅是 "No reason given" - 2
我有这个代码:context"Visitingtheusers#indexpage."dobefore(:each){visitusers_path}subject{page}pending('iii'){shouldhave_no_css('table#users')}pending{shouldhavecontent('Youhavereachedthispageduetoapermissionic错误')}它会导致几个待处理，例如ManagingUsersGivenapractitionerloggedin.Visitingtheusers#indexpage.#Noreason
ruby - attr_accessor 在写入时将 nil 转换为字符串 - 2
我有一个数据对象，其中包含许多用于各种输入的attr_accessor字段。我可以以某种方式定义类，以便所有字段的所有setter都将例如将值设置为空字符串而不是尝试的nil？最佳答案这里有一个小模块可以做到这一点:moduleNilToBlankAttrAccessordefnil_to_blank_attr_accessor(attr)attr_readerattrdefine_method"#{attr}="do|value|value=''ifvalue.nil?instance_variable_set"@#{attr
ruby - 如何为 pbcopy 生成富文本链接 - 2
我一直在玩一个脚本，它在Chrome中获取选定的文本并在Google中查找它，提供四个最佳选择，然后粘贴相关链接。它以不同的格式粘贴，具体取决于当前在Chrome中打开的页面-DokuWiki打开的DokuWiki格式，普通网站的HTML，我想要我的WordPress所见即所得编辑器的富文本。我尝试使用pbpaste-Preferrtf来查看没有其他样式的富文本链接在粘贴板上的样子，但它仍然输出纯文本。在文本编辑中保存文件并进行试验后，我想出了以下内容text=%q|{\rtf1{\field{\*\fldinst{HYPERLINK"URL"}}{\fldrsltTEXT}}}|te

javascript - 在文本框中输入时提交 ajax 表单

有关javascript - 在文本框中输入时提交 ajax 表单的更多相关文章

随机推荐