We Keep Coding

Save html form as html file with submitted values

First I'd like to say I read the answers to similar questions including this how to save the content of html form as .html page but that did not solve my problem.
I'm building a reporting system that allows users to use templates to create reports. These templates are html forms and can be developed my any external application or manually. What my application does is, it imports these templates and presents them to the user when he is creating his reports and I want to save the submitted report as as an html file with all the values the user selected, be it text fields or checkboxes.
The above answer suggests using $('#myForm').html(). What this does is get the html of the form but does not include any values entered by the user. How can I achieve this?
Update
I'd like to say this templates are developed by an external application and could have any structure depending on what the user is reporting. So I don't know of any id or name attribute of any of the form inputs used by the creator of the form. The only think I know of is that all the forms are always in a
<div id="reportTemplate"></div>
so that's the only thing I can access with javascript.

Javascript
function CreateHtml(){
var field1 = $("#field1").val();
var field2 = $("#field2").val();
var fieldn = $("#fieldn").val();
var form = $("#myForm").clone();
$(form).find("#field1").val(field1);
$(form).find("#field2").val(field2);
$(form).find("#fieldn").val(fieldn);
$('#btn_download').attr('download', 'sampleFile.html');
$('#btn_download').attr('href', 'data:text/html,' + form);
$('#btn_download').show();
}
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div>
<input placeholder="field1" id="field1" type="text" />
<br/>
<input placeholder="field2" id="field2" type="text" />
<br/>
<button type="button" onclick="CreateHtml();">Submit</button>
<br>
<a href="" id="btn_download" hidden>Download</a>
</div>

You can wrap the html content in a variable and export it using anchor tag like below.
function CreateHtml() {
var htmlContent = "";
htmlContent = "<h1>Name - " + $('#name').val() + "</h1><br>" +
"<p>Email - " + $('#email').val() + "</p>";
$('#btn_download').attr('download', 'sampleFile.html');
$('#btn_download').attr('href', 'data:text/html,' + htmlContent);
$('#btn_download').show();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div>
<input placeholder="Name" id="name" type="text" />
<br/>
<input placeholder="Email" id="email" type="text" />
<br/>
<button type="button" onclick="CreateHtml();">Submit</button>
<br>
<a href="" id="btn_download" hidden>Download</a>
</div>
Updated:
function CreateHtml() {
var htmlContent = TraverseThroughReport();
$('#btn_download').attr('download', 'sampleFile.html');
$('#btn_download').attr('href', 'data:text/html,' + htmlContent);
$('#btn_download').show();
}
function TraverseThroughReport() {
var elements = document.getElementById("report").elements;
var htmlContent = "";
for (var i = 0, element; element = elements[i++];) {
if (element.type === "text")
//console.log("it's an empty textfield")
htmlContent = "<h1>" + element.value + "</h1>";
}
//You can add as many conditions for placeholder etc to detect the form element type
return htmlContent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="report">
<input placeholder="Name" id="name" type="text" />
<br/>
<input placeholder="Email" id="email" type="text" />
<br/>
<button type="button" onclick="CreateHtml();">Submit</button>
<br>
<a href="" id="btn_download" hidden>Download</a>
</div>

If I had asked my question properly or searched for existing questions using "innerHtml with form values" instead of "how to save html for as files" I would have been taken to this link jquery get all form elements: input, textarea & select with already good answers of which this particular one worked for me
$('input:text, input:hidden, input:password').each(function() {
var v=this.value;
$(this).attr("magicmagic_value",v).removeAttr("value").val(v);
});
$('input:checkbox,input:radio').each(function() {
var v=this.checked;
if(v) $(this).attr("magicmagic_checked","checked");
$(this).removeAttr("checked");
if(v) this.checked=true;
});
$('select option').each(function() {
var v=this.selected;
if(v) $(this).attr("magicmagic_selected","selected");
$(this).removeAttr("selected");
if(v) this.selected=true;
});
$('textarea').each(function() {
$(this).html(this.value);
});
var magic=$('form').html().replace(/magicmagic_/g,"");
$('[magicmagic_value]').removeAttr('magicmagic_value');
$('[magicmagic_checked]').attr("checked","checked").
removeAttr('magicmagic_checked');
$('[magicmagic_selected]').attr("selected","selected").
removeAttr('magicmagic_selected');
alert(magic);

How to insert html from a button click

I am trying to insert a form when a button is clicked but cannot find a way that does not make me put all of the HTML on one line with back slashes or many ugly lines of code. Something that does not include adding on something line jQuery or php.
In essence: How can I make this...(that is all on one line)
<script>
function newMsg() {
document.getElementById("add_message").innerHTML = "<div class=\"message\">Add Message<br>Title: <input type=\"text\" id=\"title\"><br>Text: <input type=\"text\" id=\"message\"><br><br></div>";
}
</script>
Look a little more something like this (that has good formatting and on multiple lines)
<script>function newMsg() {function newMsg() {
document.getElementById("add_message").innerHTML =
"<div class="message">Add Message<br>
Title: <input type="text" id="title"><br>
Text: <input type="text" id="message"><br><br>
</div>";
}
</script>

Simply replace the first and last " of the right hand side with ' and remove all \
like this :
document.getElementById("add_message").innerHTML = '<div class="message">Add Message<br>Title: <input type="text" id="title"><br>Text: <input type="text" id="message"><br><br></div>';

.innerHTML = '<div class="message">Add Message<br>'
+ 'Title: <input type="text" id="title"><br/>'
+ 'Text: <input type="text" id="message"><br/><br/></div>';
You can do what hamism suggested as well as concatenate if one line is too long, this way you can make your code look slightly cleaner.

You may check this fiddle:
http://jsfiddle.net/7sqha4ks/
function myFunction(){
document.getElementById("add_message").innerHTML =
'<div class="message">Add Message<br>Title: <input type="text" id="title">
<br>Text: <input type="text" id="message"><br><br></div>';
};

If you're issue is just with formatting, you can use an array of lines and the join array method like this:
var html = [
'<div class="message">Add Message<br>',
'Title: <input type="text" id="title"><br>',
'Text: <input type="text" id="message"><br><br>',
'</div>'
].join("\n");
Alternatively, you could use a templating language such as Handlebars or Jade and precompile your templates.
Alternatively, you could use a multiline string hack like this:
https://github.com/sindresorhus/multiline

If you wanna get it on separate lines like that for easier readability create your html as a variable and concatenate with the "+" symbol. Also use single quotes for any quotes inside of the main html. Something like:
var html = "<div class='message'>Add Message<br>"
+ "Title: <input type='text' id='title'><br>"
+ "Text: <input type='text' id='message'><br><br>"
+ "</div>";
document.getElementById("add_message").innerHTML = html

How to Remove last inserted div in javascript?

<div id="file">
<input type="file" name="txtImage" multiple="multiple" class="upload" />
<input type="text" name="txtImageDesc" class="desc" />
</div>
<input type="button" value="Add" name="addButton" onclick="javascript: add_more();" />
<input type="button" value="Remove" name="removeButton" onclick="javascript: remove();" />
The above is two button which add or remove div on its calls.I have a java script function which is adding a div in html on call which works perfect
function add_more()
{
var txt = " <p><label>Upload Image</label><input type=\"file\" name=\"txtImage[]\"></p> <p>
<label>Image Description</label><input type=\"text\" name=\"txtImageDesc[]\"> </p>";
document.getElementById("file").innerHTML += txt;
}
However i am using the same script(with modification) to remove the last inserted div in it but its removing the whole html in the div.Here is the code:
function remove() {
var txt = " <p><label>Upload Image</label><input type=\"file\" name=\"txtImage[]\"></p>
<p><label>Image Description</label><input type=\"text\" name=\"txtImageDesc[]\"> </p>";
document.getElementById("file").innerHTML -= txt;
}
The output it generate is.I want the last div inserted to be remove on button click
NaN

As already said in comments, you are adding p elements here, not div.
If you don’t want to use jQuery, you can do it in “pure JS” as well, like this:
function lastParagraphBeGone() { // brilliant function name :-)
var paragraphs = document.getElementById("file").getElementsByTagName("p");
var lastParagraph = paragraphs[paragraphs.length-1];
lastParagraph.parentNode.removeChild(lastParagraph);
}

$('#file p').slice(-2).remove(); will remove the last 2 P elements from your #file element:
LIVE DEMO
HTML:
<input type="button" value="Add" name="addButton" />
<input type="button" value="Remove" name="removeButton" />
<div id="file"></div>
jQ:
var html = " <p><label>Upload Image</label><input type=\"file\" name=\"txtImage[]\"></p><p><label>Image Description</label><input type=\"text\" name=\"txtImageDesc[]\"></p>";
$('[name=addButton]').click(function(){
$('#file').append( html );
});
$('[name=removeButton]').click(function(){
$('#file p').slice(-2).remove();
});
https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Array/slice

Javascript uses the same operator for concatenation and for addition; so adding works.
But the minus operator is only for subtraction. So you try to subtract text from text which aren't numbers, so it's a NaN.
You cannot remove by this way: Use some function to search the beginning of this string and extract it so or simply add an id attribute to your <p> tag, so you can simply hide it when not needed anymore.

This works for me. One thing that seems to break this kind of function is when the adding text is on separate lines. So, always put that kind of "txt" addition on a single line in javascript.
<script type="text/javascript" >
function add_more()
{
var txt = " <p><label>Upload Image</label><input type=\"file\" name=\"txtImage[]\"></p><p><label>Image Description</label><input type=\"text\" name=\"txtImageDesc[]\"> </p>";
document.getElementById("extra-text").innerHTML = txt;
}
function remove() {
document.getElementById("extra-text").innerHTML = '';
}
</script>
<input type="button" value="Add" name="addButton" onclick="javascript: add_more();" />
<input type="button" value="Remove" name="removeButton" onclick="javascript: remove();" />
<div id="file"><h1>Existing text</h1>
<div id="extra-text"></div>
</div>

Adding dynamic content to dynamic content. Is it possible?

I'm creating a quiz website for a class, and I am having trouble formatting the page where the user creates questions. I would like to have additional information pertaining a specific question type pop up when the user clicks a radio button. I would then like to have even more additional information pop up if the user clicks a button created in the initial additional information.
So it'd start off looking like this
then it'd look like this
then once the user clicked the Add Option button a few times, it'd look like this
To achieve this I am trying to use jquery to add the new content. However, I can't seem to get that content to display. Here's the current code
In jsp
<%# page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="QuestionsCreate.js"></script>
<meta charset="UTF-8">
<title>Quiz Creation</title>
</head>
<body>
<h1>Create Your Quiz</h1>
<form action="QuestionsCreateServlet" method="post">
<h2>Question Type</h2>
<input type="radio" name="type" class="type" id="multipleChoice"
value="multipleChoice" />
<label for="multipleChoice">Multiple Choice</label><br/>
<input type="radio" name="type" class="type" id="fillBlank"
value="fillBlank" />
<label for="fillBlank">Fill-in-the-Blank</label><br/>
<input type="radio" name="type" class="type" id="pictureResponse"
value="pictureResponse" />
<label for="pictureRsponse">Picture Response</label><br/>
<input type="radio" name="type" class="type" id="textResponse"
value="textResponse" />
<label for="textResponse">Text Response</label><hr/>
<div class="jspf"></div>
<input type="submit" name="button" id="button" value="Finish" />
</form>
</body>
</html>
In javascript
$(document).ready(function() {
$(".type").click(function(){
$(".jspf").html("<jsp:include page='WEB-INF/" +
$(".type").attr("value") + ".jspf' />");
$("#button").attr("value", "Add");
});
var nOptions = 1;
$("#add-option").click(function(){
++nOptions;
$(".options").append("<input type='checkbox' name='option" +
nOptions + "' value='" + nOptions + "' /> " +
"<input name='name" + nOptions + "' /><br />");
});
var nBlanks = 1;
$("#add-answer").click(function() {
++nBlanks;
$(".fill-blank-answer").append("<input name='answer" + nBlanks +
"' /><br/>");
});
});
Sample jspf
<h3>Question</h3>
<input name="prompt" />
<h3>Options</h3>
Check the options that denote the correct answer<br/>
<div class="options">
<input type='checkbox' name='option1' value='1' />
<input name='name1' /><br />
</div>
<input type="button" value="Add Option" id="add-option" /><hr/>
I've also tried to move the jspf code into the javascript, but that didn't work either.
Is there a way I can add content dynamically to my webpage based off of dynamically added content? Thanks in advanced!

The issue you're having is you're trying to inject server-side JSP tags into a client's browser. Take this line for example:
$(".jspf").html("<jsp:include page='WEB-INF/" +
$(".type").attr("value") + ".jspf' />");
Once that line of javascript has executed, the CLIENT's brower now has the markup:
<div class="jspf"><jsp:include page="wEB-INF/pictureResponse.jspf" /></div>
Broswers don't know what to do with <jsp:include> tags, so they just silently ignore them.
What you need to do is map the jspf you're trying to include to a url and use something like:
$(".jspf").load("/fragments/pictureResponse.jspf");
$.load sends an AJAX request to from the client browser back to the server, retrieves a bit of HTML from the server, then inserts that in to the elements that match the CSS selector ".jspf".
You also have an issue with your initial click handler.
$(".type").attr("value")
$.attr always returns the attribute value of the first matched element, so no matter what the user clicked, that line is going to evaluate to "multipleChoice". What you probably want to do is:
$(this).attr("value")
In the context of a click handler, "this" is going to refer to what the user just clicked.
UPDATE
Here's how I would add the "add option" click handler once the secondary content has been loaded:
$('jspf').load('/fragments/pictureResponse.jspf', function() {
$('#add-option').click(function() {
nOptions++;
$('.options').append('<input type="checkbox" name="option' + nOptions +
'" value="' + nOptions + '" /> <input name="name' + nOptions + '" /><br />");
});
});

$.get("${ctx}/store/terminalApply/applyTemplate?terminalType=${terminalType}&index="+num, function(data){
$("#contentDiv").append(data);
});
data was a page content

Find and replace a number using Javascript

I have a piece of HTML that gets repeated over and over using jQuery (when a user clicks 'add' it creates another block:
<p>
<label for="question[1][text]">Question: <span class="req">*</span></label>
<input name="question[1][text]" id="A_Question_1" value="" type="text" class="f_input" />
</p>
<p>
<label for="question[1][type]">Type: <span class="req">*</span></label>
<input name="question[1][type]" id="A_Type_1" type="text" class="f_input" />
</p>
I need to increment each number by 1 for each iteration of that block, so that the next block automatically creates:
<p>
<label for="question[2][text]">Question: <span class="req">*</span></label>
<input name="question[2][text]" id="A_Question_1" value="" type="text" class="f_input" />
</p>
<p>
<label for="question[2][type]">Type: <span class="req">*</span></label>
<input name="question[2][type]" id="A_Type_1" type="text" class="f_input" />
</p>
I'm sure it's simple enough but I'm not experienced enough with Regexs etc. to work out how to go about it. Thanks :)

JQote offers an HTML templating library for JQuery. It is invoked with an object containing its parameters.
<script type="text/html" id="template">
<![CDATA[
<p>
<label for="question[<%= this.iteration %>][text]">Question: <span class="req">*</span></label>
<input name="question[<%= this.iteration %>][text]" id="A_Question_<%= this.iteration %>" value="" type="text" class="f_input" />
</p>
<p>
<label for="question[<%= this.iteration %>][type]">Type: <span class="req">*</span></label>
<input name="question[<%= this.iteration %>][type]" id="A_Type_<%= this.iteration %>" type="text" class="f_input" />
</p>
]]>
</script>
Then as part of your add() function:
<script type="text/javascript">
var globalIteration = 0
function add() {
<...your code...>
globalIteration++;
var obj= {
iteration: globalIteration,
<...any other variables to insert into template...>
};
$('#template').jqote(obj).appendTo($('body'));
}
</script>

You can store template in some hidden div with placeholders for ids (something like #id#).
Then, you can replace placeholders with actual id in javascript. Something like
var html = $('#template').html().replace('#id#', id);
list.append(html);
The next id can be calculated from the current amount of children.
var id = list.children().length + 1;

Something like this should work:
$(document).ready(function() {
$container = $('#container');
$button = $('#button')
.data('clicked', 0)
.click(function() {
var clicked = $button.data('clicked');
$container.append('<p><label for="question[' + clicked + '][text]">Question: <span class="req">*</span></label><input name="question[' + clicked + '][text]" id="A_Question_' + clicked + '" value="" type="text" class="f_input" /></p>');
$button.data('clicked', clicked + 1);
});
});

It depends on how you are binding your function. If you are binding it in javascript I would probably use the number as a fake property of the add link.
Something like
'Add
Replace [1] with $(this).attr('question_number') in your javascript and at the end add $(this).attr('question_number', nextId)
A better solution might be to tack it on to the id of the link and change the id when the javascript finishes, not a good solution if you are binding by id though.
If you are binding the onclick directly in the html using something like
<a href="javascript:;" onclick="my_func();">Add</a/>
modify your function to take a parameter and change the paramter at the end of the javascript similar to above. I also like Andy's solution.

Here is how I have done it http://pintum.com.au/goCruising/details.html#tabs-2
Click the add button.
It uses jQuery, jtemplates plugin and JSON. Just look at the source for how it works.