Get parent form of submit button using Javascript

user_10796680 0
Viewed 421

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({ ...
html jquery javascript
1 Answers

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>

user_5194130
Related