输入键提交 Ajax 表单

2024-04-10

我有一个非常简单的 AJAX 表单,它要求提供电子邮件地址并在提交后将其发送给我。

我怎样才能在按下回车键时获得要提交的表单?

当用户单击提交按钮时运行:

<script type="text/javascript">
    $(document).ready(function () {
        $("#submit_btn").click(function () {
            // Get input field values:
            var user_email = $('input[name=email]').val();

            // Simple validation at client's end
            // We simply change border color to red if empty field using .css()
            var proceed = true;
            if (user_email === "") {
                $('input[name=email]').css('border-color', 'red');
                proceed = false;
            }

            // Everything looks good! Proceed...
            if (proceed) {
                /* Submit form via AJAX using jQuery. */
            }
        });

        // Reset previously set border colors and hide all message on .keyup()
        $("#contact_form input, #contact_form textarea").keyup(function () {
            $("#contact_form input, #contact_form textarea").css('border-color', '');
            $("#result").slideUp();
        });
    });
</script>

我知道这个问题之前已经被问过——我很难得到这个问题keypress功能来工作。

我尝试了这个但没有成功:

$("#contact_form").keypress(function (e) {
    if ((e.keyCode == 13) && (e.target.type != "textarea")) {
        e.preventDefault();
        // Get input field values
        var user_email = $('input[name=email]').val();

        // Simple validation at client's end
        // We simply change border color to red if empty field using .css()
        var proceed = true;

        if (user_email === "") {
            $('input[name=email]').css('border-color', 'red');
            proceed = false;
        }

        // Everything looks good! Proceed...
        if (proceed) {
            /* Submit form via AJAX using jQuery. */
        }
    }
});

形式是#contact_form.

任何帮助将不胜感激...


只需将提交事件绑定到您的表单,然后回车键也将起作用:

$("#contact_form").submit(function (e) {
    e.preventDefault();
    // Get input field values
    var user_email = $('input[name=email]').val();

    // Simple validation at client's end
    // We simply change border color to red if empty field using .css()
    var proceed = true;

    if (user_email === "") {
        $('input[name=email]').css('border-color', 'red');
        proceed = false;
    }

    if (proceed) {
        // Insert the AJAX here.
    }
});

代码在这里:http://jsfiddle.net/6TSWk/6/ http://jsfiddle.net/6TSWk/6/

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

输入键提交 Ajax 表单 的相关文章

  • 从 Laravel 4 输入生成新数组

    我使用 Input all 从动态生成的表单中获取一些输入 我使用 jQuery 来允许用户添加字段 字段名称为 first names last names 和 emails input 变量现在看起来像这样 array size 4 t
  • 调整图像大小并将画布旋转 90 度

    这里有很多关于在 js 上使用画布旋转图像的主题 我阅读了其中的大部分内容 但无法找到解决我的问题的方法 我正在接收任何分辨率的图像 来自上传组件 我将其大小调整为 1024x768 如下所示 var canvas document cre
  • 如何解决 Typescript 构建中的错误“找不到模块 'jquery'”

    我目前在 ts 文件的顶部有这个import require jquery 我这样做是因为我试图在我的打字稿文件中使用 jquery 但我似乎无法编译它 因为它返回标题中所述的错误 我正在使用 ASP NET CORE 脚本文件夹 tsco
  • 在 HTML5 画布中,如何用我选择的背景遮盖图像?

    我试图用画布来实现这一点 globalCompositeOperation 但没有运气 所以我在这里问 这里有类似的问题 但我没有在其中找到我的案例 我的画布区域中有图层 从下到上的绘制顺序 画布底座填充纯白色 fff 用fillRect
  • window.location 和 location.href 之间的区别

    我对之间的区别感到困惑window location and location href 两者似乎都以相同的方式行事 有什么不同 window location是一个对象 它保存有关当前文档位置的所有信息 主机 href 端口 协议等 lo
  • 将 UMD Javascript 模块导入浏览器

    你好 我正在对 RxJS 进行一些研究 我可以通过在浏览器中引用它来使用该库 如下所示 它使用全局对象命名空间变量 Rx 导入 我可以制作可观察的东西并做所有有趣的事情 当我将 src 更改为指向最新的 UMD 文件时 一切都会崩溃 如下所
  • 使用会话 php 创建 cookie?

    我使用会话来登录我网站中的用户 问题是 我想让用户remember密码 因此关闭 打开浏览器后他们不需要再次登录 我需要使用 cookie 和 session 来实现它吗 my code user POST user pass POST p
  • 日期出现奇怪的错误,“未捕获非法访问”

    所以我试图找到最新的DateJavascript 可以处理 我把它减少到 9 月 275760 并增加了我开始捕获未捕获的天数illegal access例外new Date 09 24 275760 to new Date 10 13 2
  • PHP 表单 - 带验证蜜罐

    我有以下内容 效果很好 但对垃圾邮件机器人开放 我想放入蜜罐 而不是验证码 下面的代码适用于验证姓名 电子邮件 消息 但我无法让它与蜜罐一起工作 任何人都可以查看 蜜罐 代码并告诉我如何修复它吗 我希望表单给出 success2 不允许垃圾
  • PHP 拒绝从 var_dump、print 等输出数据

    我目前正在运行 WAMP 服务器 并且在过去的 30 分钟内一直在尝试弄清楚我的项目如何以及为什么不会输出任何指定的 PHP 数据 起初我以为是因为我有一个 htaccess文件的output buffering被禁用 所以我删除了它 仍然
  • 使用 Vue 的多模式组件

    我在 Vue 中实现动态模式组件时遇到问题 A common approach I follow to display a set of data fetched from the db is I dump each of the rows
  • 如何使用 crypto-js 解密 AES ECB

    我正在尝试将加密数据从 flash 客户端 发送到服务器端的 javascript 在 asp 中作为 jscript 运行 有几个 javascript Aes 库 但它们实际上没有文档记录 我正在尝试使用 crypto js 但无法让代
  • 通过 htaccess 将 PNG 解析为 PHP 仅适用于本地服务器,但不适用于网络服务器

    我用 PHP 创建了一个动态 PNG 图片 为了使用 PNG 扩展名 我创建了一个包含以下内容的 htaccess 文件 AddType application x httpd php png 在我的本地 XAMPP 服务器上 一切工作正常
  • 如何隐藏/禁用 Highcharts.js 中的图例框?

    我想问是否可以使用 HighCharts js 库隐藏图表中的所有图例框 var chart object chart renderTo render to type graph type colors graph colors title
  • 发送用户注册密码,django-allauth

    我在 django 应用程序上使用 django alluth 进行身份验证 注册 我需要创建一个自定义注册表单 其中只有一个字段 电子邮件 密码将在服务器上生成 这是我创建的表格 from django import forms from
  • 从 FileReader 设置背景图像样式

    我正在寻找一种解决方案 允许我从文件上传输入中获取文件并通过设置 document body style backgroundImage 来预览它 以下代码用于在 Image 元素中显示预览 function setImage id tar
  • 在 CKEditor 中设置字体大小和字体系列

    我正在使用 ckeditor 我想问一下这个插件如何设置font family和font size 我尝试过使用 CKEDITOR config font defaultLabel Arial CKEDITOR config fontSiz
  • JavaScript 相对路径

    在第一个 html 文件中 我使用了一个变量类别链接 var categoryLinks Career prospects http localhost Landa DirectManagers 511 HelenaChechik Dim0
  • 使用 MongoDB 和 Nodejs 插入和查询日期

    我需要一些帮助在 mongodb 和 nodejs 中按日期查找记录 我将日期添加到抓取脚本中的 json 对象 如下所示 jsonObj last updated new Date 该对象被插入到 mongodb 中 我可以看到如下 la
  • 循环内的异步性

    我正在使用 jQuery getJSON 用于从一组实用程序的给定 URL 检索数据的 API 我真的很想找到一种为每个实用程序重用代码 完全相同 的方法 由于循环的执行与 ajax 调用无关 因此我无法找到保留循环值的方法 我知道这个描述

随机推荐