Develop Reference

How can I take live input from a form, and print it?

I have seen similar questions answered, but they are being printed to an input attribute as seen Here
<input type="text" id="field1">
<input type="text" id="field2">
<script>
document.getElementById("field1").onkeyup = function() {
document.getElementById("field2").value = this.value;
}
</script>
but I want to print to text for a live demo of an email.

Here you are, just change the input for a span and ".value" for "innerHTML"
<input type="text" id="field1">
<span id="span"></span>
<script>
document.getElementById("field1").onkeyup = function() {
document.getElementById("span").innerHTML= this.value;
}
</script>

You'll want to set an event listener. 'change' is the event you'll want to listen for: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event
document.getElementById("field1").addEventListener('change', ({target: {value}}) => {
document.getElementById("some-element").innerHTML = value;
});

You can just show the text field contents in a div.
<input id="input" type="text"/>
<div id="output"></div>
<script>
document.getElementById("output").innerHTML = document.getElementById("input").value;
</script>

Submit button with textbox and JS

I want to create a textbox with a submitt button, and then store the data in the textbox into a js variable. How can I do that?

You can do this using HTML forms and then take the value attribute using JavaScript:
var myValue;
function submit() {
myValue = document.getElementById("myTextArea").value;
console.log(myValue);
}
<form action="javascript:submit()">
<textarea id="myTextArea"></textarea>
<input type="submit">
</form>
The final value is contained in the myValue variable.

//get value in console log
var a = document.getElementsByTagName('textarea')[0];
document.getElementsByTagName('input')[0].addEventListener('click',function(e){
e.preventDefault()
console.log(a.value)
})
//or get value in specific div
document.getElementsByTagName('input')[0].addEventListener('click',function(e){
e.preventDefault()
document.getElementById('val').innerHTML = a.value;
})
<form>
<textarea></textarea>
<input type="submit">
<br/>
</form>
<div id='val'></div>

JS duplicating the value of the input

How can I write the h1 with whatever I write on the input field?
Something like this:
<input id="inputtxt" type="text" value="Insert text here..">
<h1 id="newtxt"></h1>
<script>
var txtelement
txtelement = document.getElementById("inputtxt").value;
document.getElementById("newtxt").innerHTML=txtelement;
</script>
It duplicates when the page loads but not when I write

You could use .oninput event :
document.getElementById("inputtxt").oninput = function(e){
document.getElementById("newtxt").innerHTML=e.target.value;
};
Note : You could use placeholder instead of value to show default msg to users inside input field.
Hope this helps.
document.getElementById("inputtxt").oninput = function(e){
document.getElementById("newtxt").innerHTML=e.target.value;
};
<input id="inputtxt" type="text" placeholder="Insert text here..">
<h1 id="newtxt"></h1>

You can write a javascript function, then call that function when an event happens like onchange, onclick, etc.
Example:
HTML
<input id="inputtxt" type="text" value="Insert text here.." onkeyup="updateText()" />
<h1 id="newtxt"></h1>
JavaScript
var txtelement
var h1 = document.getElementById("newtxt");
var input = document.getElementById("inputtxt");
function updateText() {
txtelement = input.value;
h1.innerHTML=txtelement;
}
You can see it working in this JS Fiddle: https://jsfiddle.net/igor_9000/e82jahq2/
Hope that helps!

You can add onkeyup event:
var txtelement;
var input = document.getElementById("inputtxt");
var newtxt = document.getElementById("newtxt");
input.onkeyup = function() {
txtelement = input.value;
newtxt.innerHTML=txtelement;
};
input.onkeyup()
<input id="inputtxt" type="text" value="Insert text here..">
<h1 id="newtxt"></h1>

make placeholder text reappear when no text is in the input field

I have an input text field with a placeholder attribute. The placeholder disappears when I enter text, but I would like the the placeholder text to reappear after I click the button, "clear," or when the text field is empty. What are some ways I can achieve this?
Below is the code I have below. I tried
document.text.value = "hello";
but the text "hello" stays in the box when I start typing.
HTML
<input type="text" placeholder="hello">
<input type="button" value="clear" onclick(clearText)>
Javascript
function(clearText) {
document.text.value = " ";
}

When the text field is empty, the placeholder will reappear automatically.
When the clear button is clicked, you can use onclick attribute on the button and define the function like this:
Implementation with pure JS:
<script>
function clearText() {
// we use getElementById method to select the text input and than change its value to an empty string
document.getElementById("my_text").value = "";
}
</script>
<!-- we add an id to the text input so we can select it from clearText method -->
<input id="my_text" type="text" placeholder="hello">
<!-- we use onclick attribute to call the clearText method -->
<input type="button" value="clear" onclick="clearText();">
JSFiddle Demo
Or you can use jQuery:
<script>
function clearText() {
$("#my_text").val("");
}
</script>
<input id="my_text" type="text" placeholder="hello">
<input type="button" value="clear" onclick="clearText();">
JSFiddle Demo

The easiest way to do it:
<input placeholder="hello" onchange="if (this.value == '') {this.placeholder = 'hello';}"
/>

You were very close
HTML :
<input type="text" id='theText' placeholder="hello">
<input type="button" value="clear" onclick='clearText()'>
JavaScript :
clearText = function(){
document.getElementById('theText').value = "";
}
Demo : http://jsfiddle.net/trex005/7z957rh2/

There are multiple problems with your javascript syntax, starting from function declarations and ending with onclick event specification.
However, you were on the right way, and code below does the trick:
<input type="text" placeholder="hello">
<input type="button" value="clear" onclick="document.querySelector('input').value=''">
However, it will only work if this is the only input box in your document. To make it work with more than one input, you should assign it an id:
<input type="text" id="text1" placeholder="hello">
<input type="button" value="clear" onclick="document.querySelector('#text1').value=''">
and use "text2" and so on for other fields.

You should not forget to set "return false;"
document.getElementById('chatinput').onkeypress = function(){
var key = window.event.keyCode;
if (key === 13) {
var text = this.value;
var object = document.getElementById('username_interface');
email = object.email;
username = object.username;
empty = /^\s+$/;
// function Send Message
this.value = "";
return false;
}else{
return true;
}}

Javascript onClick function - copy text to input value

I need to change the value displayed in a form. For example:
<span id="copy" onClick="addValue()">**Text1**</span>
<span id="copy" onClick="addValue()">Text2</span>
Based from what I click, I want to move it to the input value like this:
<input id="paste" class="text" type="input" name="select" value="**Text1**"/>
Function
<script language="javascript" type="text/javascript">
<!--Hide Javascript
function addValue(){
document.getElementById('paste').value = this.innerText;
}
--> </script>
When I click on Text1 in value fild I get "undefined" instead of "Text1" ...

Give this a go.
You need to pass the element into your function so you can access it's properties to assign them to your form input.
HTML:
<form name="myForm">
<span onclick="copyText(this)" >Text1</span>, <span onclick="copyText(this)" >Text2</span>
<br>
<input name="myField"></input>
</form>
Javascript:
function copyText(element) {
document.myForm.myField.value = element.innerHTML;
}

I'd use:
function addValue(el) {
document.getElementById('paste').value = el.innerText || el.textContent || el.outerText;
}
And set the HTML tag like so:
<span id="copy" onClick="addValue(this)">**Text1**</span>

document.myForm.myField.value = "I'm a different value now!";
Is this what you're looking for?
Form and input should have a "name" property, like:
<form name="myForm">
<input name="myField" />
in the case above.