dynamically create HTML page from Javascript

Question

Is there a way to create a new HTML page from Javascript based on user inputs?

I have a webpage that asks which input fields user wants, based on the selection it should create a new HTML page.

i.e. If i select 3 textboxes and 1 button then it should create new HTML page with 3 textboxes and 1 button.

how to do the same thing using PHP?

edit: my objective is newly created page should also be saved on the server at the time of creation

Answer 1

Update:

You've added a comment to your question:

my objective is newly created page should also be saved on the server at the time of creation

That completely changes your question. To create a file on the server, you'll have to involve a server-side language (which could be JavaScript, via NodeJS or Rhino or several other projects) as well as JavaScript on the client. You'll need to post the user's choice to the server and generate the file there.

---

Original answer: (Prior to the comment above)

Yes, you can do that. You can either show them a page where they make these choices and then replace that page's content with what they asked for, or you can open a new window and show their selection there.

In either case, you'd probably use the DOM:

• DOM2 Core spec
• DOM2 HTML spec
• DOM3 Core spec
• HTML5 Web Application APIs

...and/or a good JavaScript library like jQuery, Prototype, YUI, Closure, or any of several others to help smooth over browser differences and provide significant utility functionality.

Here's a really minimalist example using only DOM and JavaScript (no libraries, but I do strongly recommend using one, the code would be leaner and more robust):

Live copy | Live source

HTML:

<div id="question">
<label>How many text boxes would you like?
<select id="numboxes">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3" selected>Three</option>
</select></label>
<input type="button" id="btnGo" value="Go">
</div>

JavaScript:

(function() {

  document.getElementById("btnGo").onclick = genPage;

  function genPage() {
    var sel = document.getElementById("numboxes"),
        num = parseInt(sel.options[sel.selectedIndex].value, 10),
        counter,
        box;

    document.getElementById("btnGo").onclick = "";
    document.body.removeChild(document.getElementById("question"));
    for (counter = 0; counter < num; ++counter) {
      box = document.createElement('input');
      box.type = "text";
      document.body.appendChild(box);
    }
  }

})();

Answer 2

No, it's not possible using only browser-based code. The code in the browser runs on the client machine. It has no way to save a file on the server by itself. You will have to use some code on the server to achieve such thing.

You have two options:

1. Create new window with the new content - once closed it will be gone as you can't save it to the server but for all other matters it will act as real HTML page.

2. Using simple server side logic you can use AJAX to interact with it and create the pages.

Answer 3

There are several ways to achieve this. One way is simply creating the page dynamically from your server using whichever templating or page creation mechanisms you have in place. You could use e.g. jquery or zeptojs for an ajax request and then reload the current page with the new elements returned from the server. Another way would be to create a js (jquery and similar libraries are good for this stuff) function which changes the html elements after the submit button has been clicked.

Check out jquery

Answer 4

Below are some crude step by you can achieve this (only if your's is plain .html page)

1. Add a blank div to your html page e.g.<div id="page"></div> (all the controls will be added in this container).
2. Capture the user entered control info into some variables.
3. Run a for loop over (count can be calculated based on number of controls user wants) $('#page').html(\\plain html code to add controls)