如何在Rails表单中点击按钮时执行JavaScript函数而非提交请求？

嘿，这事儿不难，用原生JS有好几种办法能实现，我给你捋清楚：

方法1：监听表单提交事件，阻止默认行为后执行函数 #

这是最稳妥的方式，不管用户是点击按钮还是按回车提交表单，都会触发这个逻辑：

首先定义你的wawa函数，然后给表单绑定提交事件：

function wawa() {
  alert('it works');
}

// 确保DOM加载完成后再绑定事件，避免找不到元素
document.addEventListener('DOMContentLoaded', function() {
  // 通过action属性匹配目标表单
  const targetForm = document.querySelector('form[action="/welcome"]');
  
  if (targetForm) {
    targetForm.addEventListener('submit', function(event) {
      event.preventDefault(); // 阻止表单默认的提交跳转
      wawa(); // 执行你的自定义函数
    });
  }
});

方法2：修改按钮类型为button，绑定点击事件 #

默认情况下，Rails的f.button生成的是type="submit"的按钮，会自动触发表单提交。我们可以把它改成普通按钮，再绑定点击事件：

第一步：修改Rails视图代码 #

= form_for :location, :url=>'/welcome' do |f|
  = f.text_field '', placeholder: 'Enter your zip code', id:'input_id'
  = f.button "Continue", class: 'button-test', type: 'button' # 新增type: 'button'

第二步：添加JS事件监听 #

function wawa() {
  alert('it works');
}

document.addEventListener('DOMContentLoaded', function() {
  // 通过类名找到按钮
  const continueBtn = document.querySelector('.button-test');
  
  if (continueBtn) {
    continueBtn.addEventListener('click', wawa);
  }
});

方法3：内联事件（简单场景快速实现） #

如果你的需求很简单，也可以直接在按钮上添加onclick属性，同时阻止默认提交：

修改Rails视图代码 #

= form_for :location, :url=>'/welcome' do |f|
  = f.text_field '', placeholder: 'Enter your zip code', id:'input_id'
  = f.button "Continue", class: 'button-test', onclick: "wawa(); return false;"

对应的JS函数 #

function wawa() {
  alert('it works');
}

注意：这种内联事件的方式虽然快捷，但如果后续逻辑复杂，维护起来会比较麻烦，更推荐前两种方式。

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