无刷新提交表单并取值：触发JS函数显示页面Div的技术问询

嘿，我来帮你实现这个需求！要做到点击提交按钮后不刷新页面，同时显示指定div、运行你的JavaScript函数，核心就是阻止表单的默认提交行为，然后在事件处理逻辑里完成所有操作。下面是具体的步骤和代码示例：

第一步：准备好要显示的隐藏div #

首先，页面上得有个初始隐藏的div，等提交后再显示出来。比如：

<div id="submitSuccessDiv" style="display: none; margin-top: 20px; padding: 15px; background: #e8f4f8; border-radius: 4px;">
  表单提交成功啦！这里是你要显示的内容 🎉
</div>

第二步：修改表单+添加JS逻辑 #

你不需要改动表单的action和method（留着#也没关系），重点是给表单绑定submit事件，在事件里完成所有操作。下面是结合你提供的表单代码修改后的完整示例：

<form action="#" method="post" name="form1" id="form1">
  <div class="row_ligne">
    <div class="col-25">
      <label for="fname">Fréquence </label>
    </div>
    <div class="col-75">
      <select id="frequence" name="frequence" onchange="showDiv(this)">
        <option value="yearly">Annuelle</option>
        <option value="monthly">Mensuelle</option>
        <!-- 你可以在这里补充其他选项 -->
      </select>
    </div>
  </div>
  <!-- 这里放你的其他表单字段 -->
  <button type="submit">提交表单</button>
</form>

<!-- 要显示的div -->
<div id="submitSuccessDiv" style="display: none; margin-top: 20px; padding: 15px; background: #e8f4f8; border-radius: 4px;">
  表单提交成功啦！这里是你要显示的内容 🎉
</div>

<script>
// 等页面DOM加载完成再执行代码，避免找不到元素的问题
document.addEventListener('DOMContentLoaded', function() {
  // 获取表单和目标div元素
  const form = document.getElementById('form1');
  const successDiv = document.getElementById('submitSuccessDiv');

  // 给表单绑定提交事件
  form.addEventListener('submit', function(e) {
    // 关键：阻止表单默认的刷新提交行为
    e.preventDefault();

    // 1. 显示目标div
    successDiv.style.display = 'block';
    // 如果你用CSS类来隐藏（比如.hidden { display: none; }），可以换成：
    // successDiv.classList.remove('hidden');

    // 2. 运行你的自定义JavaScript函数
    runYourFunction();
  });

  // 这里是你的自定义函数示例，替换成你实际需要运行的函数就行
  function runYourFunction() {
    console.log('表单提交完成，自定义函数已执行！');
    // 你可以在这里写任何逻辑，比如处理表单数据、发送AJAX请求到后端等等
  }

  // 保留你原有的showDiv函数（如果需要的话）
  function showDiv(selectElement) {
    console.log('当前选择的频率：', selectElement.value);
    // 你的原有逻辑可以放在这里
  }
});
</script>

几个关键细节说明 #

• 阻止默认行为：e.preventDefault()是核心，没有这一步的话，表单还是会触发页面刷新，咱们的需求就实现不了啦。
• DOMContentLoaded：确保页面元素都加载完成后再绑定事件，不然可能会出现“找不到表单元素”的错误。
• 显示div的方式：直接修改style.display很方便，但如果你的样式比较复杂，推荐用CSS类来控制显示隐藏（比如加个.hidden类），这样样式和逻辑分离，更易维护。
• 处理表单数据：如果需要把表单数据发送到后端，你可以在runYourFunction里用fetch或者XMLHttpRequest来做无刷新请求，比如：

  function runYourFunction() {
    // 获取表单数据
    const formData = new FormData(form);
    // 发送POST请求到后端
    fetch('/your-api-url', {
      method: 'POST',
      body: formData
    })
    .then(response => response.json())
    .then(data => {
      console.log('后端返回的数据：', data);
      // 这里可以根据返回结果做进一步处理
    });
  }
  

这样就能完美实现你要的效果啦！如果还有其他问题，随时问我~

内容的提问来源于stack exchange，提问作者hamza el hadry