javascript - 使用 Javascript 获取提交按钮的父表单

Question

我正在尝试获取提交按钮的父表单。由于ID是动态生成的，所以我不知道。我确信有更好的方法来做到这一点，所以其他建议也很好，但如果可以按照我的方式完成，我也将不胜感激。

表格:

<!--Form for sending policy reminders to users-->
<form id="sendReminderForm{{ user.id }}" method="post" action="">
    <input type="hidden" name="policyId" value="{{ policy.id }}">
    <input type="hidden" name="userId" value="{{ user.id }}">
    <button class="btn btn-warning btn-xs"
            onclick="sendReminder(event)"
            type="submit">
        <span class="fa fa-paper-plane"></span> Remind
    </button>
</form>

JS:

// Send Policy notification to user
function sendReminder(e) {
    e.preventDefault();

    let data = new FormData(e.target.name.get(0));

    $.ajax({ ...

Answer 1

您可以通过从事件读取form.id属性来获取包含被单击的按钮的表单的id >目标:

function sendReminder(e) {
  e.preventDefault();

  let formId = e.target.form.id;
  console.log(formId);
}

<form id="sendReminderForm{{ user.id }}" method="post" action="">
  <input type="hidden" name="policyId" value="{{ policy.id }}">
  <input type="hidden" name="userId" value="{{ user.id }}">
  <button class="btn btn-warning btn-xs" onclick="sendReminder(event)" type="submit">
     <span class="fa fa-paper-plane"></span> Remind
   </button>
</form>

但是值得注意的是，使用 onclick 和其他 onX 事件属性不再是好的做法，应该避免。

实现目标的更好方法是使用不显眼的事件处理程序，如下所示:

document.querySelectorAll('form').forEach(form => {
  form.addEventListener('submit', e => {
    e.preventDefault();
    
    let formId = e.target.id;
    console.log(formId);    
  });
});

<form id="sendReminderForm{{ user.id }}" method="post" action="">
  <input type="hidden" name="policyId" value="{{ policy.id }}">
  <input type="hidden" name="userId" value="{{ user.id }}">
  <button class="btn btn-warning btn-xs" type="submit">
     <span class="fa fa-paper-plane"></span> Remind
   </button>
</form>

这里的逻辑与上面的 jQuery 相同，正如您在问题中标记的那样:

$('form').on('submit', e => {
  e.preventDefault();
  console.log(e.target.id);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="sendReminderForm{{ user.id }}" method="post" action="">
  <input type="hidden" name="policyId" value="{{ policy.id }}">
  <input type="hidden" name="userId" value="{{ user.id }}">
  <button class="btn btn-warning btn-xs" type="submit">
     <span class="fa fa-paper-plane"></span> Remind
   </button>
</form>