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>
Related
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>
I've build a website that read barcode from the camera.
I can catch the barcode text and print it to the P element as you can see below.
But I want to see it in textbox. Is this possible? I can't see the barcode at value of the textbox.
After press the Scan Barcode button:(5901234123457 is scanned barcode. I want to see it in textbox)
<p id="code">I see the scanned value here</p>
<input class="form-control" type="text" id="code" value="Scanned barcode must be seen here...">
<button onclick="barkod()" type="submit" class="btn btn-primary btn-sm">Scan Barcode</button>
<script>
function barkod() {
var resultElement = document.getElementById("code");
setupLiveReader(resultElement)
}
</script
Item IDs must be unique within a single page.
function barkod() {
document.getElementById("code_copy").value = document.getElementById("code_src").textContent;
//setupLiveReader(resultElement);
}
<p id="code_src">5901234123457</p>
<input class="form-control" type="text" id="code_copy" value="Scanned barcode must be seen here...">
<button onclick="barkod()" type="submit" class="btn btn-primary btn-sm">Scan Barcode</button>
I guess the issue you are facing is because you have the same id attribute id="code" in both the elements, so the getElementById("code") returns the first element with the id "code" and thus only that value changes.
Just change the id of the <p> tag and add id="code" on the input tag
// whatever the value you want
const barcode = 12345566;
document.getElementById("code").value = barcode;
<p id = "para"></p>
<input class="form-control" type="text" id="code" value="Scanned barcode must be seen here..." />
How to clear textarea field onclick? the problem is I am using AJAX. it won't reload the page. can anyone help me to solve this problem.
<div class="write_comment" style="">
<textarea type="text" id="form_task_comment" name="form_task_comment" value="" placeholder="Write your comment here..."></textarea>
<div class="buttons" style="float:right">
<button id="btn_comment_submit" class="btn btn-default btn hoverable btn-sm btn_comment_submit" style="margin:0rem;" type="submit">Add Comment</button>
</div>
</div>
Try this. Click on button to clear Textarea
$('.clearText').click(function(){
$("#form_task_comment").val('');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="clearText">Click Here To Clear Textarea</button>
<br>
<textarea id="form_task_comment">This is textarea</textarea>
In case you do not want to use jQuery. And the other posts above do not mention how to reset your textarea ON send. When you bind onclick, it would clear the text BEFORE sending. Therefore you need to use form onsubmit
var textArea = document.getElementById("form_task_comment")
var form = document.getElementById("form-name")
form.addEventListener("submit", function(event) {
textArea.value = "";
event.preventDefault();
}, false)
<div class="write_comment" style="">
<form id="form-name" >
<textarea type="text" id="form_task_comment" name="form_task_comment" value="" placeholder="Write your comment here..."></textarea>
<div class="buttons" style="float:right">
<button id="btn_comment_submit" class="btn btn-default btn hoverable btn-sm btn_comment_submit" style="margin:0rem;" type="submit">Add Comment</button>
</div>
</form>
</div>
Simply just replace textarea.value with nothing when button is clicked??
html code:
<input type="button" value="Clear Text" onclick="eraseText();"></input>
Javascript:
function eraseText()
{
document.getElementById("form_task_comment").value = "";
}
You can simply clear the value of text area using .val() like this
$("#form_task_comment").val('');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="form_task_comment">This is textarea</textarea>
Add this line of code wherever you want to clear the text area
I have two textfields with different IDs as shown
<textarea id="textfield">Hello World</textarea>
This will be updated with the content of the first textarea
<input id="messageID">
This is my script
<script type=text/javascript>
function() {
var value = document.getElementById("textfield").value;
document.getElementById('#messageID').val(value);
alert(value);
}
</script>
This is the onclick button and nothing happens when I click it
<button onclick="myfunction()" type="button" class="btn btn-danger" id="button">Alert</button>
Kindly assist!
Three things I'm seeing wrong:
.val(value); is a jQuery' method, not javascript... you should change it to .value = value;
to call onclick="myfunction()" you should name it: var myfunction = function(){
The document.getElementById() method doesn't need sharp # before the name.
Hope it helps.
Try something like this:
function myfunction() {
var value = document.getElementById("textfield").value;
document.getElementById('messageID').value=value;
alert(value);
}
<input type="button" value="Alert" onclick="myfunction()" type="button" class="btn btn-danger" id="button"/>
<textarea id="textfield">Hello World</textarea>
<input id="messageID">
The most important catch is whenever you declare function on button click you should define that function inside javascript.
<script type=text/javascript>
function myfunction() {
var value = document.getElementById("textfield").value;
document.getElementById("messageID").value = value;
alert(value);
}
</script>
<textarea id="textfield">Hello World</textarea>
<input id="messageID">
<button onclick="myfunction()" type="button" class="btn btn-danger" id="button">Alert</button>
Here you go a working fiddle
https://jsfiddle.net/blazeeboy/fNPvf/
Its inner Html you are trying to get
<textarea id="textfield">Hello World</textarea>
<input id="messageID"/>
<button type="button" class="btn btn-danger" id="button" onclick="myfunction()">Alert</button>
function myfunction(){
alert(1);
var v = document.getElementById("textfield").innerHTML ;
document.getElementById('messageID').innerHTML = v;
alert(v);
}
In my code
<script>
$(document).ready(function(){
$("#btn").on('click', function() {
var caretPos = document.getElementById("txt").selectionStart;
var textAreaTxt = $("#txt").val();
var txtToAdd = $("#btn").val();
$("#txt").val(textAreaTxt.substring(0, caretPos) + txtToAdd + textAreaTxt.substring(caretPos) );
})
});
</script>
HTML
<textarea id="txt" rows="15" cols="70"></textarea>
<input type="button" id="btn" value="OK" />
<input type="button" id="btn" value="Bye" />
<input type="button" id="btn" value="TC" />
I want to give these values in textarea. But it is only giving value of Ok button. How I can give each button values in textarea
You have the same id on elements. ID's must be unique. You can use class and end to this:
$(".btn").on('click', function() {
$("#txt").val(this.value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="txt" rows="5" cols="10"></textarea>
<input type="button" class="btn" value="OK" />
<input type="button" class="btn" value="Bye" />
<input type="button" class="btn" value="TC" />
try this
html
<textarea id="txt" rows="15" cols="70"></textarea>
<input type="button" id="btn" value="OK" />
<input type="button" id="btn" value="Bye" />
<input type="button" id="btn" value="TC" />
javascript
$('input#btn').click(function()
{
$('#txt').val($('#txt').val()+this.value); // append the value of each button
})
Demo here
<textarea name="insert" rows="5" cols="30" id="insert" onblur="myFunction()"></textarea>
<button class="myvalue" id="myvalue">Ok</button>
<button class="myvalue" id="myvalue">Bye</button>
<button class="myvalue" id="myvalue">Tc</button>
<script>
function insertAt (myField, myValue, startSel, endSel)
{
if (startSel || startSel == '0') {
var startPos = startSel;
var endPos = endSel;
myField.val(myField.val().substring(0, startPos)+ myValue+ myField.val().substring(endPos, myField.val().length));
}` else {
myField.val() += myValue;
}`}var targetBox = $('textarea#insert'),
startSel,
endSel;`targetBox.bind('focusout', function() {
startSel = this.selectionStart;
endSel = this.selectionEnd;
});
$(".myvalue").click(function() {
var myValue = $(this).text();
insertAt(targetBox, myValue, startSel, endSel);
});
</script>
Finally It Works
All your buttons have the same 'id', and 'OK' is the first one, so that's the one that's being returned...
To get the value of the button that's clicked you'd need to give each one a unique id (which should be the case anyway).
I would put your buttons in a separate container, probably a div, and apply the click handler to that. In the handler function, see if the event target has a value attribute, and if it has, send it to your textbox.
Or you could give each button a handler, it depends on your circumstances...
Danny
My suggestion to you change button id to class because id is unique for each element so you have to use class instead of id.
$("input.btn").on('click', function() {
$("#txt").val($("#txt").val()+$(this).val());
})
Demo