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>

HTML input into Javascript variable

I've been attempting to grab text input from HTML and trying to output the text back into HTML but for some reason it does not seem to be working. Does putting input within a form alter the interaction with getElementById or is it possible that the second button usage of formaction is interrupting this?
$(document).ready(function(){
$("#submit").on("click",function(){
var test = document.getElementById("searchInput");
$("#text").html(test);
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type ="text" id ="searchInput"><br>
<button id = "submit">Search</button>
<button formaction="https://en.wikipedia.org/wiki/Special:Random" formtarget="_Blank">Random</button>
</form>
<div id = "text">
<h1>test</h1>
</div>
EDIT: I have attempted to change
var test = document.getElementById("searchInput");
to
var test = document.getElementById("searchInput").value;
previously and it is still not working. Is there an interaction that is failing that I am missing? Also I would like to be able to store the input as variable i.e thats why I am purposely putting it into a variable before outputting it.
EDIT2: There wasn't anything particularly wrong about the code other than retrieving the value. I am currently using codepen.io to code and did not load jquery into the pen.

Since you're using jQuery, it will make more sense to use jQuery to obtain the elements' value:
Use this to always replace #text element contents with #searchInput value:
$("#text").html($("#searchInput").val());
Use this to append #searchInput value to #text element:
$("#text").append($("#searchInput").val());
But the whole logic does not make any sense. You are changing an elements' value that it is outside the form you are submitting. Either you should prevent submit button click event from submitting the form, or have the #text element inside the form as an input, textarea or hidden field:
$(document).ready(function(){
$("#submit").on("click",function(e) {
e.preventDefault();
$("#text").html($("#searchInput").val());
})
});
or having the #text element inside the form for submitting:
<form>
<input type="hidden" id="text" name="text">
<input type ="text" id ="searchInput"><br>
<button id = "submit">Search</button>
<button formaction="https://en.wikipedia.org/wiki/Special:Random" formtarget="_Blank">Random</button>
</form>

You Using form element, so once you click the button , the form will be reloaded, if you want to display textbox value to the element , once remove the form element.
<input type ="text" id ="searchInput"><br>
<button id = "submit">Search</button>
<button formaction="https://en.wikipedia.org/wiki/Special:Random" formtarget="_Blank">Random</button>
<div id ="text">
<h1 id="welc"></h1>
</div>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("#submit").on("click",function(){
var test = $('#searchInput').val();
$("h1").html(test);
});
});
</script>
Just Remove tag, and check it.

You need to find the element's value and then set it as HTML.
$("#text").html(test.value);

I have updated your question mate check this one .
$(document).ready(function(){
$("#submit").on("click",function(){
var test = document.getElementById("searchInput").value;
$("#text").html(test);
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type ="text" id ="searchInput"><br>
<button id = "submit">Search</button>
<button formaction="https://en.wikipedia.org/wiki/Special:Random" formtarget="_Blank">Random</button>
</form>
<div id = "text">
<h1>test</h1>
</div>

I think this will work for you.
<! doctype HTML>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<form>
<input type="text" id="searchInput">
<br>
<button type="button" id="submit">Search</button>
<button formaction="https://en.wikipedia.org/wiki/Special:Random" formtarget="_Blank">Random</button>
</form>
<div id="text">
<h1>test</h1>
</div>
</body>
<script>
$(document).ready(function () {
$("#submit").on("click", function () {
$("#text").html($("#searchInput").val());
})
});
</script>
</html>

Edit your JS code please try:
EDIT:
$(document).ready(function(){
$("#submit").on("click",function(){
var test = $("#searchInput").val();
$("#text").html(test);
})
});

Input Text Box Returns Undefined in Javascript

Here is my HTML:
<form name='cred' class="panel-body2">
<div class="form-group">
<label for='addjidlbl'> Username (JID):</label>
<input type='text' id='addjid' />
</div>
<input type='button' id='add' value='add' />
</form>
Here is the JavaScript:
$('#add').bind('click', function() {
var jid = $('#addjid').value;
alert(jid);
//var jid=document.getElementById('addjid').value;
var jid2 =$('#addjid').get(0).value;
alert(jid2);
// //$('#addjid').get(0).value;
log('jid=>'+jid);
var data = document.getElementById("addjid").value; //$(".panel.panel-default2#addjid").value;
alert(data);
alert("type=>"+ typeof(jid));
addRoster(jid);
});
function addRoster(jid) {
log('addRoster=>' + jid);
}
What I get are two message boxes with "undefined" and third with "type=>undefined". Why can't I get the input text of the addjid text box?
If I change var jid = $('#addjid').get(0).value;, jid is just blank even when the textbox has value. Why?

Change .value to .val() like
$('#addjid').value
should be
$('#addjid').val()

Here you have it working using .val()
add some text to the text box and
click on the add button and the alert will popup
$('#add').on('click', function() {
alert($('#addjid').val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name='cred' class="panel-body2">
<div class="form-group">
<label for='addjidlbl'> Username (JID):</label>
<input type='text' id='addjid' />
</div>
<input type='button' id='add' value='add' />
</form>

If I understand correctly, you want:
$('#addjid').val()

Since you are using id's to get the value you will only have one element with the given id. When you do .get(0) or any index you are typically trying to get the value out of a given array of values. For Ex
<li>first</li> //0
<li>second</li> //1
Here in a structure like this you will do something like
$("li").get(0)
It will give you the first item with in li.
and to get the value you will need to use .val()
So you can use
$('#addjid').val()
Hope this helps you.
Happy Learning :)

How to get value from HTML textbox in Javascript

I simply want to have a textbox on my webpage, using the HTML form, and input tags, and be able to have the inputted value be used by the Javascript on the page. My HTML looks like this:
<div id="firstq">
<form id="firstbox">
Choice: <input id="firstinput" type="text" name="choice">
</form>
</div>
and the Javascript I'm trying to use looks like this:
var topMenuChoice = document.getElementById("firstinput");
document.write(topMenuChoice);
}
However, all I see on the webpage, underneath the textbox, is "[object HTMLInputElement]". What do I do to get this to work right?
Thanks

here's an example with change event listener for firing a function when there's a change in form
var div = document.querySelector('div');
var topMenuChoice = document.getElementById("firstinput");
topMenuChoice.addEventListener('change',function(e){
div.innerHTML = e.target.value/***e.target.value is your input***/
var divInner = div.innerHTML;
setTimeout(function(){
document.write(divInner);
},2000)
})
<form id="firstbox">Choice:
<input id="firstinput" type="text" name="choice" value=66>
</form>
<div>look here!!</div>

Check this !
document.write(document.forms['firstbox'].firstinput.value);
OR
var topMenuChoice = document.getElementById("firstinput");
document.write(topMenuChoice.value);
}

See http://www.w3schools.com/jsref/prop_text_value.asp
var htmlInputElementObjet = document.getElementById("firstinput");
document.write(htmlInputElementObjet.value);
<div id="firstq">
<form id="firstbox">
Choice: <input id="firstinput" type="text" name="choice" value="initial value">
</form>
</div>

If you want to get the text typed in your input you need to use the value property of the element. You can also use another HTML tag to show the results (avoid using document.write):
HTML
<div id="firstq">
<form id="firstbox">
Choice: <input id="firstinput" type="text" name="choice">
</form>
<div id="result"></div>
</div>
JS
var topMenuChoice = document.getElementById("firstinput");
document.getElementById("result").innerHTML = topMenuChoice.value;
You have to consider the usage of an event (click, keypress) to control the exactly moment to retrieve the input value.
JS
document.getElementById('firstinput').addEventListener('keypress', function(e) {
if(e.which == 13) { //detect enter key pressed
e.preventDefault();
document.getElementById('result').innerHTML = this.value;
}
});

use the value property
var topMenuChoice = document.getElementById("firstinput");
document.write(topMenuChoice).value;
}

Javascript to Jquery, add text in input onclick

How can I change this javascript code to JQuery.
<script type="text/javascript">
function addTextTag(text){
document.getElementById('text_tag_input').value += text;
}
</script>
When a user click the link text automaticaly is added in input.
This is the HTML:
<input id="text_tag_input" type="text" name="tags" />
<div class="tags_select">
text1
text2
text3
</div>
Here is the demo: http://jsfiddle.net/Smartik/j8qGT/

<script type="text/javascript">
$(function() {
$('.tags_select a').click(function() {
var value = $(this).text();
var input = $('#text_tag_input');
input.val(input.val() + value + ', ');
return false;
});
});
</script>
and your markup:
<input id="text_tag_input" type="text" name="tags" />
<div class="tags_select">
text1
text2
text3
</div>
and here's a live demo.

Without inline javascript, completely jQuery:
http://jsfiddle.net/j8qGT/3/
JavaScript:
$('a').click(function(){
$('#text_tag_input').val($('#text_tag_input').val()+$(this).html()+', ');
});
​
HTML:
<input id="text_tag_input" type="text" name="tags" />
<div class="tags_select">
text1
text2
text3
</div>​

Some notes on the steps:
select already the input where to set the value so you avoid the need to re-query for it all the time: var $tagsInput = $('#text_tag_input');. The hash tag selector if the ID selector in jQuery, replaces document.getElementById
bind a click event with .click() for links within element with class "tags_select": `$('.tags_select a').click(...);``
To append the value, instead of struggling with jquery methods to get and set the value of the input, get the native DOM element with [0] on $tagsInput and use the += notation of the property value.
Here's the code:
// select already you input element for re-use
var $tagsInput = $('#text_tag_input');
// bind a click event to links within ".tags-select" element
$('.tags_select a').click(function() {
// append link text to the input field value
$tagsInput[0].value += $(this).text();
return false;
});
DEMO
Further reading:
jQuery selectors
Bind a click event with .click()