Get parent form of submit button using Javascript

Question

I am trying to get the parent form of the submit button. Since the ID is produced dynamically, I won't know it. I am sure there is a better way to do this so other suggestions are fine as well, but if it can be done my way I would also appreciate it.

Form:

<!--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({ ...

`e.target.closest('form')` – Mister Jojo Jun 06 '21 at 16:58 — Mister Jojo, Jun 06 '21 at 16:58

score 3 · Accepted Answer · answered Jun 06 '21 at 16:54

You can get the id of the form containing the button which was clicked by reading the form.id property from the event target:

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>

However it's worth noting that using onclick, and the other onX event attributes, are no longer good practice and should be avoided.

The better method to achieve your goal is to use unobtrusive event handlers like this:

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>

Here's the same logic as above in jQuery, as you tagged it in the question:

$('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>

Thanks for the detailed response. Would you happen to know why the OnX events are no longer good practice? — David Alford, Jun 06 '21 at 17:03
There's a variety of reasons, [this answer](https://stackoverflow.com/a/11742769/519413) covers the basic points, but there are longer more in depth articles online — Rory McCrossan, Jun 06 '21 at 17:36

Get parent form of submit button using Javascript

1 Answers1