用js提交表单解决一个页面有多个提交按钮的问题

下面是使用 JS 提交表单解决一个页面多个提交按钮问题的攻略：

1. HTML 页面结构

首先，准备页面 HTML 结构。在表单中需要添加多个提交按钮时，我们可以使用一个 hidden 类型的 input 元素来保存当前提交按钮的值，然后为每个按钮添加相同的 name 属性，不同的 value 属性:

<form id="myform">
  <input type="hidden" id="submit_type" name="submit_type" value="">
  <button type="button" onclick="document.getElementById('submit_type').value='button1';submitForm()">按钮1</button>
  <button type="button" onclick="document.getElementById('submit_type').value='button2';submitForm()">按钮2</button>
  <button type="button" onclick="document.getElementById('submit_type').value='button3';submitForm()">按钮3</button>
</form>

2. JS 提交表单

然后，我们需要在 JS 代码中实现表单提交的逻辑。我们可以编写一个 submitForm() 函数来提交表单。需要注意的是，该函数需要在每个按钮的 onclick 事件中调用。

同时，建议使用 jQuery 来方便地提交表单并处理返回结果。在这个示例中，我们通过 AJAX 发送表单请求，并在提交后将返回的数据显示在页面上：

function submitForm() {
  $.ajax({
    url: 'submit.php', // 表单提交的地址
    type: 'POST', // 表单提交的方法
    data: $('#myform').serialize(), // 表单数据
    success: function (res) {
      // 处理表单提交成功的返回结果
      $('#result').html(res);
    },
    error: function (xhr, status, error) {
      // 处理表单提交失败的返回结果
      alert('表单提交失败');
    }
  })
}

以上就是使用 JS 提交表单解决一个页面多个提交按钮问题的完整攻略。下面是两个示例说明：

示例 1：表单提交并重定向到新页面

在这个示例中，我们将使用 JS 提交表单并将用户重定向到另一个页面。

HTML 代码：

<form id="myform">
  <input type="hidden" id="submit_type" name="submit_type" value="">
  <button type="button" onclick="document.getElementById('submit_type').value='button1';submitForm()">按钮1</button>
  <button type="button" onclick="document.getElementById('submit_type').value='button2';submitForm()">按钮2</button>
  <button type="button" onclick="document.getElementById('submit_type').value='button3';submitForm()">按钮3</button>
</form>

JS 代码：

function submitForm() {
  $.ajax({
    url: 'submit.php', // 表单提交的地址
    type: 'POST', // 表单提交的方法
    data: $('#myform').serialize(), // 表单数据
    success: function (res) {
      // 处理表单提交成功的返回结果
      window.location.href = 'show.php?result=' + encodeURIComponent(res);
    },
    error: function (xhr, status, error) {
      // 处理表单提交失败的返回结果
      alert('表单提交失败');
    }
  })
}

在上面的 success 函数中，我们使用 encodeURIComponent() 函数对返回结果进行编码。这可以确保在 URL 中传递的值是安全的。

示例 2：表单提交并在当前页面显示结果

在这个示例中，我们将使用 JS 提交表单并在当前页面显示结果。

HTML 代码：

<form id="myform">
  <input type="hidden" id="submit_type" name="submit_type" value="">
  <button type="button" onclick="document.getElementById('submit_type').value='button1';submitForm()">按钮1</button>
  <button type="button" onclick="document.getElementById('submit_type').value='button2';submitForm()">按钮2</button>
  <button type="button" onclick="document.getElementById('submit_type').value='button3';submitForm()">按钮3</button>
</form>

<div id="result"></div>

JS 代码：

function submitForm() {
  $.ajax({
    url: 'submit.php', // 表单提交的地址
    type: 'POST', // 表单提交的方法
    data: $('#myform').serialize(), // 表单数据
    success: function (res) {
      // 处理表单提交成功的返回结果
      $('#result').html(res);
    },
    error: function (xhr, status, error) {
      // 处理表单提交失败的返回结果
      alert('表单提交失败');
    }
  })
}

在上面的 success 函数中，我们使用 $('#result').html(res) 将返回结果显示在 result id 所指向的元素中。