如何实现按下回车与点击按钮均触发AJAX表单提交

现有代码仅将AJAX提交逻辑绑定在发送按钮的点击事件上，要实现按回车提交，核心是监听输入区域的键盘事件，识别到回车键按下时执行提交逻辑即可，建议把提交逻辑抽为公共函数复用，避免重复代码。

具体修改步骤 #

1. 调整JS逻辑 #

做三处优化：

• 把CSRF头配置提前，不用每次触发提交都重复设置
• 抽离公共提交方法，按钮点击、回车触发都调用这一个方法，后续改逻辑只需要改一处
• 给textarea绑定键盘按下事件，识别回车键触发提交，默认保留Shift+回车换行的常用交互，不需要可以直接删掉对应判断。

完整修改后JS代码：

jQuery(document).ready(function(){
    // 全局配置CSRF请求头
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
        }
    });

    // 公共提交方法
    function submitForm($currentForm) {
        jQuery.ajax({
            url: "{{ url('/names') }}",
            method: 'get',
            data: {
                runBy: $currentForm.find(".name").val(),
                command: $currentForm.find(".surname").val(),
            },
            success: function() {
                location.reload();
            }
        });
    }

    // 原按钮点击提交逻辑
    jQuery('.ajaxSubmit').click(function(e) {
        e.preventDefault();
        submitForm($(this).closest("form"));
    });

    // 新增回车监听
    jQuery('.surname').keydown(function(e) {
        // 兼容新旧浏览器的回车键判断
        if (e.key === 'Enter' || e.keyCode === 13) {
            // 按住Shift+回车时保留默认换行，不需要这个功能就删掉下面3行
            if (e.shiftKey) {
                return;
            }
            e.preventDefault(); // 阻止textarea默认的回车换行
            submitForm($(this).closest("form"));
        }
    });
});

2. 优化表单结构（建议修改） #

原代码的按钮没有指定type，部分浏览器会默认将表单内的按钮识别为提交按钮，触发原生页面跳转提交，同时内联的onclick事件不利于维护，可以调整为如下代码：

<form>
    <input type="hidden" value="{{Auth::user()?->name}}" class="name">
    <textarea class="surname" name="input" cols="30" rows="1"></textarea>
    <button type="button" class="ajaxSubmit">send</button>
</form>

注意事项 #

• 如果不需要Shift+回车换行的交互，直接删除JS中判断e.shiftKey的分支即可，按下回车会直接提交
• 不要把AJAX逻辑复制两份分别绑定给点击和回车事件，后续修改很容易漏改其中一处，抽公共函数是更稳妥的写法

内容的提问来源于stack exchange，提问作者Levarados