Form submission using ajax

JavaScript
1

I have couple problems that I am trying to resolve…

I want to submit my form to php script using ajax but having trouble tracking the submitted data in the form.
How would I see the data submitted using ajax in console(web tools)?
I am using Ubuntu and my browser is Firefox version 58.0.1

Also is there more efficient way to enter the form data for testing purposes rather then doing this…

type data into the form
submit
data is gone somewhere

repeat…

Any suggestion would be appreciated

2

You can either inspect the request in the network panel, or set a breakpoint right before the request gets sent… e.g. if your submit handler looks like this:

var form = document.getElementById('my-form')

form.addEventListener('submit', function (event) {
  var data = new FormData(event.target)
  var xhr = new XMLHttpRequest()

  event.preventDefault()

  xhr.open('POST', event.target.action)
  xhr.send(data)
})

you can set a breakpoint somewhere inside that function, and when the debugger pauses the script switch to the console panel. You can then directly access all variables in the scope of the function from the console, so you can just type

console.log(...data)

and get all entries of the form data printed out. Or you can of course put that console.log(...data) right in your actual code too.

Enable the form autofill for your browser… or write actual tests. ;-)

3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.