[Solved] How do I submit a <form></form> to localhost?

Question

[Current solution is attached for reference]

[Original question will be left here for reference]

...

I'm using the following line as part of sending (unsecured) practice form data:
...
<form action="http://localhost/" method="GET">
...

My goal is to have the data show up on a user's localhost browser window in order to get a better sense of the GET method versus the POST method.

So far, it isn't working out properly. Please refer to my Code Bit titled "HTML Overview" (https://code.sololearn.com/Wqaqg34YslEx/?ref=app) in order to peruse the source code.

Any advice on how to accomplish this goal?

...

[Solution titled: HTML Overview- featuring Kode Krasher]

https://code.sololearn.com/WvnV15mbJNxl/?ref=app

Answer 1

Lenny Atomz Is this what you need?
https://code.sololearn.com/WIqL2Vu2l7XH

Answer 2

When you throw a ball, you'll need someone to catch it.

Even if you use localhost, there should be something on your machine that keeps watching if something is thrown at it, and knows what to do with that data. This is called a webserver, and typically it listens to a specific port. You can use a multitude of programming languages to run web servers (php, python, node.js, java, or really anything). But this is the missing piece in your puzzle.

https://developer.mozilla.org/en-US/docs/Learn/Forms/Sending_and_retrieving_form_data#On_the_server_side_retrieving_the_data

Answer 3

Remove the action attribute and
click on the submit button. You should immediately see the input values appended to the URL in the browser.

Answer 4

Kode Krasher I don't think that will be possible. I can only think of the many security openings it will imply if it was possible.

But the OP only wanted to preview how a browser handles GET requests as URL query parameters. My suggestion should be enough for that.

Lenny Atomz Please, try it in a web browser not on the code playground.

Answer 5

Kode Krasher, I'm loving this new version!! I've went ahead and saved it under a modified name and made it public. Feel free to link new learners to it as you please. I look forward to collaborating again with you in the not-too-distant future! 😄👍🏻

https://code.sololearn.com/WvnV15mbJNxl/?ref=app

Answer 6

Kode Krasher I think I understand the OP request now.

To preview the details of a form's data, there is already a pre built object for that called FormData. There is no need to reinvent the wheel.

https://developer.mozilla.org/en-US/docs/Web/API/FormData

I will try to create a small demo using FormData

Answer 7

Thanks so much for the resources, Kode Krasher !! I'll definitely look them over and find a concise way to interweave the key concepts into the forms section.
Also, I'm happy to share the credit with you, bud-- no worries! In my opinion, this is the magic of Open Source 😄👍🏻

Happy Coding to you too!

Answer 8

Kode Krasher But passing data is very possible if there is an external intermediary like a firebase store.

Answer 9

Thank you all for your incredibly insightful feedback!! Ore , "form details" link is spot on! That definitely answers my original request for direction on how to get a better sense of how the GET and POST methods differ.

Answer 10

You need a php server
- Turn on the server
- Then add the php file address: localhost/form.php in the action attribute of your form
- Use $_GET[input_name] to display form datas

Answer 11

Great suggestions, Kode Krasher ! We should be all set with the logistics now. Now I'll finally chip away at adding my own edits to our collaboration. 😄👍🏻

Answer 12

Kode Krasher , it's an honor to have shared in this fun challenge with you, Ore , and everyone else who decided to hop in to check it out. I'm really impressed with how many Code Bits you've created/shared and I'm certain that I'll enjoy this code that you've shared here a moment ago. I'll go check it out right now! 😊👍🏻

Answer 13

Excellent work, Kode Krasher!! I like your implementation and how you've included Javascript to make it work. I've noticed that you're a fan of inline CSS and JS. Any particular reason for that or is it just a bit of a coincidence on my part for viewing code that you've preferred to implement in the inline fashion?

Answer 14

Use method="post" in the form tag 🌅

Answer 15

Kode Krasher _doPostback();🙄