how to create static html page with form data?

Question

I have html form where i can enter the data in the form of text . once the submit button iis pressed, should get option to save it as html page. and it should create static html page. what is the best possible way to do this?

html form cade can be some thing like this.

<form  method="post">
<textarea name="name" rows="2" cols="20"> </textarea >
<input type="submit" value="Submit" />
</form>

How do you want to save the data? In a file? Database? Download? Can you execute a server script, such as PHP, Perl? — bloodyKnuckles, Jun 19 '14 at 23:04
you can use jQuery and just grab the inputs and populate this same page (remove form if you dont need it) — OutFall, Jun 19 '14 at 23:08
This may be related: "create a file in memory for user to download not through server" http://stackoverflow.com/questions/3665115/create-a-file-in-memory-for-user-to-download-not-through-server — bloodyKnuckles, Jun 19 '14 at 23:11
I don't think you can create a file without implementing serverside scripting. The easiest way would be to use php. PHP has a buildin function called file_put_contents(). The first parameter in the function is the file the second parameter is the string-data you wish to store in the file (which you can submit via your form with post or get method) — Nillervision, Jun 19 '14 at 23:14

score 1 · Answer 1 · answered Jun 19 '14 at 23:11

1

Check out this library! https://github.com/eligrey/FileSaver.js It allows you to generate files client-side (an html file in this case) and allow the client to download it, without interacting with a server

answered Jun 19 '14 at 23:11

ejramire

156
1
6

score 0 · Answer 2 · edited May 23 '17 at 12:05

Here's a solution based loosely on this answer. When you click the button, it opens the entered html in the browser, which the user can save.

Sample HTML: Get HTML page

Javascript:

var textInput = document.getElementById("textInput");
var getHtml = document.getElementById("getHtml");

getHtml.addEventListener("click", function () {
    var htmlBlob = new Blob([textInput.value], {type: "text/html"});
    window.location.href = window.URL.createObjectURL(htmlBlob);
});

Here's a jsfiddle version

how to create static html page with form data?

2 Answers2