<!DOCTYPE HTML> <html> <head> <title>Example</title> <style> .table {display:table;} .row {display:table-row;} .cell {display: table-cell; padding: 5px;} .label {text-align: right;} </style> </head> <body> <form id="fruitform" method="post" action="upload.php"> <div class="table"> <div class="row"> <div class="cell label">Bananas:</div> <div class="cell"><input name="bananas" value="2"/></div> </div> <div class="row"> <div class="cell label">Apples:</div> <div class="cell"><input name="apples" value="5"/></div> </div> <div class="row"> <div class="cell label">Cherries:</div> <div class="cell"><input name="cherries" value="20"/></div> </div> <div class="row"> <div class="cell label">File:</div> <div class="cell"><input type="file" name="file"/></div> </div> <div class="row"> <div class="cell label">Total:</div> <div id="results" class="cell">0 items</div> </div> </div> <button id="submit" type="submit">Submit Form</button> </form> <script> document.getElementById("submit").onclick = handleButtonPress; var httpRequest; function handleButtonPress(e) { e.preventDefault(); var form = document.getElementById("fruitform"); var formData = new FormData(form); httpRequest = new XMLHttpRequest(); httpRequest.onreadystatechange = handleResponse; httpRequest.open("POST", form.action);alert('ready'); httpRequest.send(formData);alert('sent'); } function handleResponse() { if (httpRequest.readyState == 4 && httpRequest.status == 200) { document.getElementById("results").innerHTML = httpRequest.responseText; } } </script> </body> </html>
var
This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)