如何在JavaScript/jQuery校园项目中添加表单提交按钮并置于绿色按钮旁

别着急，我来一步步教你把提交按钮加到绿色按钮旁边，还能实现表单提交功能，不管用原生JavaScript还是jQuery都能搞定，咱们慢慢来：

第一步：把提交按钮放到绿色按钮旁边 #

首先得把按钮插入到页面里，刚好放在绿色按钮的右侧。这里分两种写法：

用jQuery实现（更简洁） #

假设你的绿色按钮有个类叫green-btn，直接用after()方法就能把新按钮插到它后面：

// 在绿色按钮后添加提交按钮
$('.green-btn').after('<button type="button" class="submit-btn">提交表单</button>');

用原生JavaScript实现 #

如果不想依赖jQuery，原生JS也能轻松做到：

// 找到绿色按钮
const greenBtn = document.querySelector('.green-btn');
// 创建提交按钮元素
const submitBtn = document.createElement('button');
submitBtn.type = 'button';
submitBtn.className = 'submit-btn';
submitBtn.textContent = '提交表单';
// 插入到绿色按钮后面
greenBtn.after(submitBtn);

第二步：给按钮绑定提交逻辑 #

按钮加好了，接下来要让它点击后能提交表单。这里也分两种方式，还可以加上简单的表单验证，避免用户空提交：

原生JavaScript版本 #

假设你的表单id是my-form，代码如下：

// 获取提交按钮和表单
const submitBtn = document.querySelector('.submit-btn');
const form = document.getElementById('my-form');

// 绑定点击事件
submitBtn.addEventListener('click', function() {
  // 先做简单的必填项验证
  let isValid = true;
  form.querySelectorAll('input[required]').forEach(input => {
    if (!input.value.trim()) {
      isValid = false;
      alert(`${input.placeholder}不能为空哦！`);
      input.focus();
      return;
    }
  });

  if (isValid) {
    // 方式1：普通表单提交（会刷新页面）
    form.submit();

    // 方式2：AJAX无刷新提交（体验更好，推荐）
    /*
    const formData = new FormData(form);
    fetch(form.action, {
      method: form.method,
      body: formData
    })
    .then(res => res.json())
    .then(data => {
      alert('提交成功啦！');
      form.reset(); // 提交后清空表单
    })
    .catch(err => {
      console.error('提交出错：', err);
      alert('提交失败，请重试~');
    });
    */
  }
});

jQuery版本 #

jQuery写起来更简洁，适合刚上手的新手：

// 给提交按钮绑定点击事件（用on绑定确保动态添加的按钮也能生效）
$(document).on('click', '.submit-btn', function() {
  const $form = $('#my-form');
  let isValid = true;

  // 表单必填项验证
  $form.find('input[required]').each(function() {
    if (!$(this).val().trim()) {
      isValid = false;
      alert(`${$(this).attr('placeholder')}不能为空哦！`);
      $(this).focus();
      return false; // 跳出循环
    }
  });

  if (isValid) {
    // 方式1：普通表单提交
    $form.submit();

    // 方式2：AJAX无刷新提交
    /*
    $.ajax({
      url: $form.attr('action'),
      method: $form.attr('method'),
      data: $form.serialize(),
      success: function(data) {
        alert('提交成功啦！');
        $form[0].reset(); // 清空表单
      },
      error: function(xhr, status, err) {
        console.error('提交出错：', err);
        alert('提交失败，请重试~');
      }
    });
    */
  }
});

第三步：调整按钮样式（可选） #

为了让提交按钮和绿色按钮风格统一，你可以加一点CSS：

.submit-btn {
  background-color: #28a745; /* 和绿色按钮同色系 */
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  margin-left: 8px;
  cursor: pointer;
}

.submit-btn:hover {
  background-color: #218838; /* 鼠标 hover 时加深颜色 */
}

几个小提醒 #

• 确保表单里的输入框都有name属性，不然后端接收不到数据哦
• 如果用AJAX提交，要确认后端接口支持对应的请求方式（GET/POST）
• 表单验证可以根据你的需求扩展，比如检查邮箱格式、手机号格式等

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