noelruault/form.html

## form.html
<!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>

## output.html
<!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>
	<!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>
	<!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>