Prevent A Form From Submitting To View Its Data

Overview

• I use this when developing forms to prevent them from actually sending so I can look at the data
• In this example, clicking the 'submit' button ends up sending the values to the console without submitting the form

Example

HTML

<form id="target-form">
  <input type="text" name="alfa" value="bravo" />
  <input type="submit" name="submit" value="submit" />
</form>

JavaScript

const stopSubmission = (event) => {
    event.preventDefault()
    const theData = new FormData(event.target)
    for (const key of theData.keys()) {
        console.log(`${key} = ${theData.get(key)}`)
    }
}

document.addEventListener('submit', stopSubmission)

Notes

• This will stop all forms on the page from being submitted
• The code works by watching for the 'submit' event at the document level. It's stopped with 'preventDefault' and then the data is loaded into a new FormData element for examination
• Making the 'FormData' element triggers a 'formdata' event that could be used as a secondary trigger
• Looping through the items is done with `.keys()` and then pulling individual data for an item with `.get(KEY)` on the FormData object
• It would be possible to add another button on the page that continues the submission. Check the Using FormData Objects page below for direction on that
• The name and value of the 'submit' input comes across for me in Safari, but not Chrome on macOS 12. Would need to test to detremine if that's the same thing the server would get

References

• MDN: Using FormData Objects
• MDN: FormData