-1

Let's assume we have the following form. Once it is submitted is there a way to visualise the content of the request in json form without a server side script?

<html>
    <head>
    </head>
    <body>
        <form class="dump" action="#" method="post">
            <fieldset>
                <legend>Dump inputs</legend>
                <label for="name">Name</label>
                <input id="name" type="text" size="25" />
                <label for="email">email</label>
                <input id="email" type="text" size="25" />
                <input type="submit" id="submit" value="Send" />
            </fieldset>
        </form>
    </body>
</html>

Expected output:

{"name":"something","email":"something"}

Solution

In Chrome: View > Developer > Developer Tools > Network > All > Name > Headers

harinsamaranayake
  • 751
  • 2
  • 12
  • 32
  • 1
    If you're using Chrome: https://stackoverflow.com/questions/15603561/how-can-i-debug-a-http-post-in-chrome – SteveK Apr 16 '20 at 09:46
  • 1
    Yea, you look at the HTML, if the inputs dont have `name` attributes then this is the visualisation of what will reach the Server code `""` – RiggsFolly Apr 16 '20 at 09:48
  • 1
    _Small Point_ JSON uses double quotes and not single quotes – RiggsFolly Apr 16 '20 at 09:48
  • Why is this tagged [tag:php] when you explicitly say you don't want to use a server-side script? If you don't want to use server-side code, what do you want to use? – Quentin Apr 16 '20 at 10:36
  • "Solution" — Why is there something marked "Solution" in a question? Solutions should go in answers. – Quentin Apr 16 '20 at 10:37

1 Answers1

-1

First, you need names for your fields. Add a name attribute with the same values as their ids have. Then use FormData:

var fd = new FormData(document.querySelector('form'))
console.log(Object.fromEntries(fd.entries()))
x1n13y84issmd42
  • 890
  • 9
  • 17