0

I would like to use the html5 FormData api. Like so:

var formData = new FormData(document.querySelector('form'))

but I have multiple forms. how do I select a specific form like for:

<form accept-charset="UTF-8" action="/timeline_events" class="timeline-event-form timeline_event_form">

?

timpone
  • 19,235
  • 36
  • 121
  • 211
  • You can you the name and id attributes or the submit button's onclick handler's this.form property to access form data in various ways... – me_ May 08 '18 at 23:14
  • You want to access by action or something contained in your question's final html line... this.form.action – me_ May 08 '18 at 23:17

2 Answers2

2

You can use document.querySelectorAll('form'). This will return you list of all the forms. Now you can get data of any form just using index on this node list like

var froms = document.querySelectorAll('form');
var f1Data = new FormData(forms[1]); //To get the data of first form
var f2Data = new FormData(forms[2]);
....

Or you can also add data-attribute to each form and select the required form with that

Something like

<form data-form="form-1">...</form>
<form data-form="form-2">...</form>
<form data-form="form-3">...</form>

Now you can use document.querySelector('form[data-form="form-1"]'); to get the first form and so on

Muhammad Usman
  • 10,039
  • 22
  • 39
0

Simply use a specific selector in your .querySelector().

If you want to only target the form with the class of timeline-event-form, you can combine the element selector form with the class selector .timeline-event-form as:

var formData = new FormData(document.querySelector('form.timeline-event-form'))
Obsidian Age
  • 41,205
  • 10
  • 48
  • 71