So I have an input type file and textarea. I want to show the file name in textarea on input type file change. Here I have reached something, but this works only for the first time and when I write some text and want to select another file I don't get that file name in textarea.
<!DOCTYPE html>
<html>
<head>
<title>victory please</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style>
#list {
width: 500px;
height: 650px;
}
</style>
</head>
<body>
<input type="file" name="img[]" id="file">
<input type="submit" name="submit" id="submit">
<br><br>
<textarea id="list" name="list"></textarea>
<div id="demo"></div>
<script>
$('#file').change(function () {
var value = $('#file').val();
$('#list').append(value);
});
$('#submit').click(function() {
var a = getElementById('list').value;
getElementById('demo') = a;
});
</script>
</body>
</html>
You need to use .value or .innerHtml after write manually in textarea.
For example change this:
$('#list').append(value);
into:
$('#list').val($('#list').val()+value);
should works.
Related
When the default photo is clicked it should make a user to select a file from his computer other than making an input type = "file" that makes the user to first click on browse button than select a file. A user should directly click on default photo and a file selection window should appear.
<html lang = "en">
<head>
<title>
Profile Click
</title>
<style>
#file{
display: none;
}
</style>
</head>
<body>
<script>
function pro1(){
document.prolis.getElementById("image") = document.prolis.getElementById("file");
}
</script>
<form name = "prolis">
<img src = "index.jpg" id = "image" onclick = "pro1()";>
<input type = "file" id = "file">
</body>
</html>
Mozilla Firefox console shows "TypeError: document.prolis.getElementById is not a function".
How should I make this function work?
This is my default image:
To make the image behave like an input file element, you can just call the input file .click() method when you click on the img.
This is how should be your code:
function pro1(){
document.getElementById("file").click();
}
Demo:
<html lang = "en">
<head>
<title>
Profile Click
</title>
<style>
#file{
display: none;
}
</style>
</head>
<body>
<script>
function pro1(){
document.getElementById("file").click();
}
</script>
<form name = "prolis">
<img src = "index.jpg" id = "image" onclick = "pro1()";>
<input type = "file" id = "file">
</body>
</html>
Note:
You just need to use document.getElementById("file") to access an element by its id.
if you want to select element by id you should do it like this:
document.getElementById('element_id')
If you want to select form element you should do it like this:
document.form_name.element_id
Create a click event for #file in your function
function pro1(e){
e.preventDefault();
document.getElementById('file')[0].click();
});
}
You can replace image automatically with newly selected image.
<div class="image-upload">
<label for="file-input">
<img id="previewImg" src="https://icon-library.net/images/upload-photo-icon/upload-photo-icon-21.jpg" style="width: 100px; height: 100px;" />
</label>
<input id="file-input" type="file" onchange="previewFile(this);" style="display: none;" />
</div>
<script>
function previewFile(input){
var file = $("input[type=file]").get(0).files[0];
if(file){
var reader = new FileReader();
reader.onload = function(){
$("#previewImg").attr("src", reader.result);
}
reader.readAsDataURL(file);
}
}
</script>
Can anyone tell me how do you clone from a span element and append to input value by clicking the span element itself?
Here is the script.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("span#username").click(function() {
$("span#username").clone().appendTo("#test");
});
});
</script>
</head>
<body>
<span id="username"> User </span><br><br>
<input type="text" id="test" value="" />
</body>
</html>
You have to set the value of the input (jQuery.val()) to the text content of the span (jQuery.text()) like this:
// IDs are enough
$("#username").click(function() {
$("#test").val($(this).text()); // this is the span beign clicked
});
No jQuery:
document.getElementById("username").addEventListener("click", function() {
document.getElementById("test").value = this.textContent;
});
So I am trying to, when the button a is clicked, add the letter to the textfield. However, I cant seem to figure out why it isn't working. I got the code for it from here on stack exchange. Any help is as always appreciated.
<html>
<head>
<title>Test</title>
<style>
tab1 { padding-left: 8em; }
tab2 { padding-left: 12em; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
</head>
<body style="background-color:powderblue;">
<tab2><input id="bar a" style="height:20px;width:120px" type="button" value="a" onlick=buttonPress('a')/><br><br>
<tab1><input id ="stringInput" type="text" value=""/><br>
<script language="javascript" type="text/javascript">
var added;
function buttonPress(added)
{
document.getElementById("bar a").addEventListener('click', function () {
var text = document.getElementById('stringInput');
text.text = (text.text + added);
});
}
</script>
</body>
</html>
You don't need to attach event as you are already calling function onclick.
Aslo you need value property of textbox not text
function buttonPress(added)
{
var text = document.getElementById('stringInput');
text.value= (text.value + added);
}
Also your html for button in invalid.It should be
<input id="bar a" style="height:20px;width:120px" type="button" value="a" onclick="buttonPress('a')" />
<html>
<head>
<title>Test</title>
<style>
tab1 { padding-left: 8em; }
tab2 { padding-left: 12em; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
</head>
<body style="background-color:powderblue;">
<input type="text" value="" id="test1">
<input id ="test2" type="text" value="ram"/><br>
<input type="button" onclick="addInput()"/ value="click">
<span id="responce"></span>
<script>
function addInput()
{
var test1_value= document.getElementById('test1').value;
var test2_value= document.getElementById('test2').value;
document.getElementById('test2').value=''+test2_value+''+test1_value;
}
</script>
</body>
</html>
There are few issues in your code. Not sure if it is a typo in your code.
For example onlick=buttonPress('a') . It should be onclick and the handler function should be quotes. Refer to the below html.
There is also no need of adding addEventListener inside function. You have already added the listener in the html code. If you add the listener inside the function, then on first click it will again try to add the the event.
Refer to the below js. Hope this will be useful
var added = " New Text";
function buttonPress(added) {
var text = document.getElementById('stringInput');
text.value = (text.value + added);
}
HTML
<input id="bar" style="height:20px;width:120px" type="button" value="a" onclick='buttonPress("a")' />
DEMO
your onclick is mispelled as onlick. This will be read as a custom attribute.
put the buttonPress('a') inside "". It will become onclick="buttonPress('a')". It prompts an error when it's not inside "".
since you are using an input for the component with id "stringInput", text property does not work so you have to use the value property instead.
The following code does not work
<!DOCTYPE html>
<html>
<body>
<input type="text" id="searchTxt"/>
<input type="button" id="run"/>
<script>
$(document).ready(function() {
$("#run").click(function(){
var input = document.getElementById("searchTxt");
alert(input);
});
});
</script>
</body>
</html>
How can I get and print the value in the text box ?
You have to include the jQuery JS file inside your <head> tag.
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
.value on the element return by the getElementById function
i am trying to show a div only when the user selects and image by clicking the file upload browse button. can someone please show me where i am going wrong and how to get this to work, i am using this html code:
<input type="file" name="pic" accept="image/*" onClick="showSubmit(this);"/>
my js code:
<script>
function showSubmit(submit) {
document.getElementById("submit").style.display = submit.checked ? "block" : "none";
}
</script>
my div html:
<div id="submit">
<div id="content2">
<input type="submit" value="Submit">
</form>
</div>
</div>
my div css:
#submit{
display:none;
}
Try This :
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.submitClass {
display: none;
}
.displaySubmit{
display:block;
height:20px;
text-align:center;
padding:2px;
}
</style>
<script type="text/javascript">
function showSubmit(submit) {
document.getElementById("submit").className = "displaysubmit";
}
</script>
</head>
<body>
<input type="file" name="pic" accept="image/*" onclick="showSubmit(this);" />
<div id="submit" class="submitClass">
<div id="content2">
<input type="submit" value="Submit">
</div>
</div>
</body>
</html>
In case you're using jQuery:
$(function() {
$("input:file").change(function (){
var fileName = $(this).val();
$(".filename").html(fileName);
});
});
If you're using pure javascript, just use the onchange event of your input field.