I have an input box that I am typing into and a submit button. I want to display whatever is typed into the input box in a blank pre-existing <p> tag. How can I do this?
I currently have this code:
<label for="moveData">Enter data</label>
<input type="text" id="moveData" name="moveData"><br>
<button id="btn" type="button">Move the data</button>
<script>
document.getElementById("btn").onclick = function()
{
var input = document.getElementById("btn").value;
document.getElementById("p1").innerHTML = input;
}
</script>
<p id="p1"></p>
I want the <p id="p1"></p> to be replaced with the user text input as so: <p id="p1">(USER INPUT GOES HERE)</p> after the submit button is clicked.
You are picking the value from the button instead of the input. You just need to change this line:
<label for="moveData">Enter data</label>
<input type="text" id="moveData" name="moveData"><br>
<button id="btn" type="button">Move the data</button>
<script>
document.getElementById("btn").onclick = function() {
var input = document.getElementById("moveData").value; // <-- this line
document.getElementById("p1").innerHTML = input;
}
</script>
<p id="p1"></p>
Related
i want any text like hello world to be appeared in a input field when i click the button. How can i do that?
enter code here
<button class='submit' onclick="myFunction()"> Click Me </button>
<input type= 'text' id='demo'>
Use eventListeners via addEventListener
window.addEventListener("load", onLoadHandler);
function onLoadHandler(){
let button = document.getElementById("myButton");
button.addEventListener("click",buttonClick);
}
function buttonClick(e){
let input = document.getElementById("textInput");
input.value = "Hello world!";
}
<div>
<input id="textInput">
</div>
<div>
<button id="myButton">
write in input
</button>
</div>
I can see the scanned value (id="code") on p element. How can I fill the textbox with this value?
Actually when I press the Scan Barcode button, camera is open and scan an EAN13 barcode, and the value is shown in P element (590123... is the barcode). Can be seen below. But I want to see this value in textbox.
function barcode() {
var resultElement = document.getElementById("code");
// setupLiveReader(resultElement)
}
<p id="code">code is appearing here</p>
<input class="form-control" type="text" id="code">
<button onclick="barcode()" type="submit" class="btn btn-primary btn-sm">Scan Barcode</button>
You can't have two elements with the same id. To get the content of the p tag just call innerHTML on it. After that set the value of your input with the new id.
<p id="code">code is appear here</p>
<input class="form-control" type="text" id="codeInput">
<button onclick="barcode()" type="submit" class="btn btn-primary btn-sm">Scan Barcode</button>
<script>
function barcode() {
var resultElement = document.getElementById("code").innerHTML;
//setupLiveReader(resultElement)
document.getElementById("codeInput").value = resultElement;
}
</script>
Change the id so that you only have one id="code", then update the script so resultElement has the id of the <input...
<p id="code">code is appear here</p>
<input class="form-control" type="text" id="code-input">
<button onclick="barcode()" type="submit" class="btn btn-primary btn-sm">Scan Barcode</button>
<script>
function barcode() {
const resultElement = document.getElementById("code-input");
setupLiveReader(resultElement);
}
</script>
function getValue() {
var resultInputValue = document.getElementById("inputValue").value;
document.getElementById("valueShow").innerHTML = resultInputValue;
}
<p id="valueShow">input value is appear here</p>
<input type="text" id="inputValue">
<button onclick="getValue()" type="submit">Get Value</button>
For a few reasons, I can't have a <form> tag on the page, but I do have <form> elements like <input>, <textarea>, and <button>. I have a reset button and I need to reset everything inside the input and textareas when I click the button. There's also quite a few input boxes.
Additionally, there is a php script that fills in <span> tags with requested information that I would also like to make blank again when pressing the button.
Some example code below
HTML
<button id="reset" onclick="resetFields()">Reset Fields</button>
<input id="myID" type="text">
<input id="myID2" type="text">
<span id="mySpan">Some text here</span>
<span id="mySpan2">Some text here</span>
I think that is what you want:
function resetFields(){
var inputArray = document.querySelectorAll('input');
inputArray.forEach(function (input){
input.value = "";
});
var textAreaArray = document.querySelectorAll('textArea');
textAreaArray.forEach(function (textArea){
textArea.innerHTML = "";
});
var spanArray = document.querySelectorAll('span');
spanArray.forEach(function (span){
span.innerHTML = "";
});
}
http://jsbin.com/gamubageke/edit?html,js,console,output
<script>
function resetFields() {
var x = document.querySelectorAll(".resettable");
x.forEach(el => {
el.value='';
el.innerHTML='';
})
}
</script>
<body>
<button id="reset" onclick="resetFields()">Reset Fields</button>
<input id="myID" type="text" class="resettable">
<input id="myID2" type="text" class="resettable">
<span id="mySpan" class="resettable">Some text here</span>
<span id="mySpan2" class="resettable">Some text here</span>
</body>
If you use jquery, you can do something along the lines of
$("input[type='text'],textarea").val('');
$("#mySpan,#mySpan2").text('');
This is the HTML code:
<body>
<form>
<input id="input" type="text" name="input" value="Enter Here">
<input type="submit" value="Submit">
</form>
<div id="display">
</div>
</body>
This is the JavaScript:
input = document.getElementById("input");
if (input.value == "Hello") {
display.innerHTML = "Hello";
} else {
display.innerHTML = "Type";
}
When I change the input value by clicking on the input field and typing "Hello", it does not display "Hello" in display.innerHTML. I would like it to display "Hello" when "Hello" is typed into the input field. That's a lot of "Hello"'s! Any help would be great! Thanks in advance.
var input = document.getElementById("input"),
display=document.getElementById("display");
input.oninput=function(){
if (input.value === "Hello") {
display.innerHTML = "Hello";
} else {
display.innerHTML = "Type";
}
};
<input id="input" type="text" name="input" value="Enter Here">
<div id="display">
</div>
Your javascript code only gets executed once before you have entered anything in the input field.
You need to either setup a change handler for the input field or a submit handler for the form and set display.innerHTML.
Also, did you miss a display = document.getElementById("display");?
If you want use your button for submit the value of your textbox (your input type text-field) use onclick event as follows:
function displayData() {
var div_display = document.getElementById('display');
/* This is your input, but you shoud use another Id for your fields. */
var textValue = document.getElementById('input').value;
/* Change the inner HTML of your div. */
div_display.innerHTML = textValue;
}
<input id="input" type="text" name="input" value="Enter Here" />
<input type="submit" value="Submit" onclick="displayData();" />
<div id="display">
</div>
Hope it helps.
I would like to take the text from two text areas and insert them concatenated into a following paragraph. I've made a calculator and odd/even validator, and had been able to draw the user input values just fine. Is there something different with text?
<p>
<textarea id="text1" rows="4" cols="50">Type here!</textarea>
<br>
<textarea id="text2" rows="4" cols="50">Now type something here!</textarea>
<br>
<button type="button" onclick="tafunc()">Click here to put text in paragraph below!</button>
</p>
<p id="result"></p>
<script>
function tafunc() {
var first, second, bothtextareas;
first = document.getElementById("text1").value;
second = doucment.getElementById("text2").value;
bothtextareas = first.concat(" ", second);
document.getElementById("result").innerHTML = bothtextareas;
}
</script>
document is misspelled in second assignment. and using value attribute for textarea is correct!
HTML:
<textarea id="text1" rows="4" cols="50">Type here!</textarea>
<br>
<textarea id="text2" rows="4" cols="50">Now type something here!</textarea>
<br>
<button id="btn1" type="button">Click here to put text in paragraph below!</button>
</p>
<p id="result"></p>
change your inline javascript to this:
var btn = document.getElementById("btn1");
btn.onclick = function () {
var first, second, bothtextareas;
first = document.getElementById("text1").value;
second = document.getElementById("text2").value;
bothtextareas = first.concat(" ", second);
document.getElementById("result").innerHTML = bothtextareas;
}
and here's a working jsFiddle