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
– Mister Jojo

2021-06-06 16:58:56 +00:00
Commented Jun 6, 2021 at 16:58 — Mister Jojo
– Mister Jojo, Commented Jun 6, 2021 at 16:58

Rory McCrossan · Accepted Answer · 2021-06-06 16:54:27Z

3

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>

answered Jun 6, 2021 at 16:54

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Nothing here Over a year ago

Thanks for the detailed response. Would you happen to know why the OnX events are no longer good practice?

Rory McCrossan Over a year ago

There's a variety of reasons, this answer covers the basic points, but there are longer more in depth articles online

Collectives™ on Stack Overflow

Get parent form of submit button using Javascript

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related