Created
March 13, 2024 09:11
-
-
Save noelruault/671345e974de6bba1036fa8a5112595f to your computer and use it in GitHub Desktop.
HTML Form debug setup
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <body> | |
| <form id="myForm" action="output.html" method="get"> | |
| <label for="method">Choose a method:</label> | |
| <select id="method" name="method"> | |
| <option value="GET">GET</option> | |
| <option value="POST">POST</option> | |
| </select><br> | |
| Name:<input type="text" name="name"><br> | |
| E-mail:<input type="text" name="mail"><br> | |
| Comment:<input type="text" name="comment" size="50"><br> | |
| <input type="submit" formenctype="text/plain" value="text/plain"> | |
| <input type="submit" formenctype="application/x-www-form-urlencoded" value="application/x-www-form-urlencoded"> | |
| <input type="submit" formenctype="multipart/form-data" value="multipart/form-data"> | |
| </form> | |
| <script> | |
| document.getElementById('myForm').addEventListener('submit', function (event) { | |
| var method = document.getElementById('method').value; | |
| this.method = method; | |
| if (method === 'GET') { | |
| this.setAttribute('method', 'get'); | |
| } else { | |
| this.setAttribute('method', 'post'); | |
| event.preventDefault(); // Prevent form submission | |
| var formData = new FormData(this); // Create FormData object with form data | |
| // Log the request payload for each encoding type | |
| // Determine the encoding type and log the corresponding request payload | |
| var formEnctype = event.submitter.getAttribute('formenctype'); | |
| switch (formEnctype) { | |
| case 'text/plain': | |
| logTextPlain(formData); | |
| break; | |
| case 'application/x-www-form-urlencoded': | |
| logUrlEncoded(formData); | |
| break; | |
| case 'multipart/form-data': | |
| logMultipart(formData); | |
| break; | |
| } | |
| } | |
| }); | |
| // Function to log the request payload for text/plain encoding | |
| function logTextPlain(formData) { | |
| var payload = ''; | |
| for (var pair of formData.entries()) { | |
| payload += pair[0] + ': ' + pair[1] + '\n'; | |
| } | |
| console.log('Text/Plain Request Payload:\n' + payload); | |
| } | |
| // Function to log the request payload for application/x-www-form-urlencoded encoding | |
| function logUrlEncoded(formData) { | |
| var payload = ''; | |
| for (var pair of formData.entries()) { | |
| if (payload !== '') { | |
| payload += '&'; | |
| } | |
| payload += encodeURIComponent(pair[0]) + '=' + encodeURIComponent(pair[1]); | |
| } | |
| console.log('UrlEncoded Request Payload:\n' + payload); | |
| } | |
| // Function to log the request payload for multipart/form-data encoding | |
| function logMultipart(formData) { | |
| var payload = ''; | |
| formData.forEach(function (value, key) { | |
| payload += 'Content-Disposition: form-data; name="' + key + '"\r\n\r\n' + value + '\r\n'; | |
| }); | |
| console.log('Multipart Request Payload:\n' + payload); | |
| } | |
| </script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Query String Values</title> | |
| </head> | |
| <body> | |
| <script> | |
| // Get the query string from the URL | |
| const queryString = window.location.search; | |
| // Create a URLSearchParams object from the query string | |
| const params = new URLSearchParams(queryString); | |
| // Iterate over the query string parameters | |
| params.forEach((value, key) => { | |
| // Print the parameter key and value | |
| document.write(`<p>${key}: ${value}</p>`); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment