This question already has answers here:
jQuery: get the file name selected from <input type="file" />
(8 answers)
Closed 5 years ago.
Below in the code the vanilla javascript version works fine but the jQuery one I tried to code does not produce the update to the input's text. What error is there in the jQuery one as I cannot seem to spot it.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Total Tutor </title>
<link type="text/css" rel="stylesheet" href="query.css">
<script src="../jquery.js"></script>
</head>
<body>
<div id="main">
<button class="fileUpload">
<input id="uploadBtn" type="file" class="upload">
</button>
<input id="uploadFile" placeholder="0 files selected" disabled="disabled">
</div>
</body>
</html>
<script>
$("#uploadBtn").change(function() {
var value = $(this).val();
$("#uploadFile").val(value);
});
//this works fine
// document.getElementById("uploadBtn").onchange = function () {
// document.getElementById("uploadFile").value = this.value;
// };
</script>
Please try this :
$(function() {
$("input:file").change(function (){
var fileName = $(this).val();
alert(fileName);
// do whatever you want to do with file name
});
});
Related
This question already has answers here:
Why is document.write considered a "bad practice"?
(17 answers)
Best way to output Javascript?
(3 answers)
Closed 29 days ago.
note new to JavaScript
when clicking the button to write out the text from my input box it prints out the text but deletes everything else
JavaScript code
let = Text
document.getElementById("Button7").onclick = function () {
Text = document.getElementById("myText").value;
document.write(Text)
}
HTML code
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<input type="text" id="myText" placeholder="enter text"> <br>
<button id="Button7">enter</button>
<script type="text/javascript" src="index.js"></script>
<h1>my first website test</h1>
</body>
</html>
You can display the value of the input in a <p> element by setting its textContent. Do not use document.write.
document.getElementById("Button7").addEventListener('click', function() {
document.getElementById("result").textContent = document.getElementById("myText").value;
});
<input type="text" id="myText" placeholder="enter text"> <br>
<button id="Button7">enter</button>
<p id="result"></p>
I want to know how you would go about getting a value from a color picker and returning it to a js script
Here is the HTML Code
<!DOCTYPE html>
<script type="text/javascript" src="Scripts/jquery-3.1.1.js"></script>
<script type="text/javascript" src="js/bootstrap-colorpicker.js"></script>
<link rel='stylesheet' href='css/bootstrap-colorpicker.css' />
<script type="text/javascript" src="js/bootstrap-colorpicker.min.js"></script>
<link rel='stylesheet' href='css/bootstrap-colorpicker.min.css' />
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
</head>
<body>
<p> test test test</p>
<div id="cp2" class="input-group colorpicker-component">
<input type="text" value="#00AABB" class="form-control" />
<span class="input-group-addon"><i></i></span>
</div>
<script>
$(function () {
$('#cp2').colorpicker({
color: '#AA3399',
format: 'rgb'
})
});
</script>
</body>
</html>
<script>document.getElementById("cp2").value = function () {
return rgb;
}
</script>
`
I am looking to return the value of the color picker which is in RGB format to a js script so that I will to able to assign vars like this
var 1 = rgb[1]
var 2 = rgb[2]
var 3 = rgb[3]
`
If you decide to help me I will be thankful and you could please explain so I can learn from it.
Check javascript function:
<script>
(function() {
var rgb = document.getElementById("cp2").value ;
return rgb;
})();
</script>
How to display 2 digits the last phone number when I input phone number to first text field and display automatic to second text field with AJAX or JavaScript or jQuery ?.
I want to get script about that for my website like this video.
I've searched everywhere in Google Search about that, I only found this JavaScript.
But that is not solution. Please help me to resolve solution and what should I do.
Where I can get AJAX or JavaScript or jQuery like that or are there soluton in this forum ?
In the code you found, changing
$('#output').text($('#txt').val());
to
$('#output').text($('#txt').val().substr(-2));
would be what you need
or
$('#output').value($('#txt').val().substr(-2));
if the output is an <input type="text" > element
I've combined this script from http://jsbin.com/oleto5/5/edit?html,js,output and http://jsfiddle.net/AEMLoviji/tABDr/
But there is a little problem in code : $('#numbers').val($('#tt').val()+String.fromCharCode(event.keyCode));
If I remove +String.fromCharCode(event.keyCode)); and script be replaced to .substr(-2)); does not work.
If I use +String.fromCharCode(event.keyCode)); is not perfect when I remove digits.
Example :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>berkelilingkesemua.info</title>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" class="jsbin" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js" type="text/javascript" class="jsbin"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.js" type="text/javascript" class="jsbin"></script>
</head>
<body>
<script type="text/javascript">
$(function(){
$('#txt').keydown(function(){
setTimeout(function() {
$('#output').text($('#txt').val().substr(-2));
}, 50);
});
});
</script>
<input id="txt" type="text" />
<div id="output"></div>
<hr>
Second script is combined by me from first script becomes like below.
<hr />
<script type="text/javascript">
$(document).ready(function() {
$("#tt").keydown(function (event) {
setTimeout(function() {
}, 50);
{
$('#numbers').val($('#tt').val()+String.fromCharCode(event.keyCode));
}
});
});
</script>
<input type="text" id="tt" />
<input type="text" id="numbers" />
</body>
</html>
Are there solution about this script ?.
What i want to do is that when i click on the button "1" it should display the number "1" in the textbox above it.
what is wrong with my jquery code?
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JQuery Tutorial</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<input id="textbox" type="text" />
<div>
<input id="1" type="button" value="1" />
<input id="2" type="button" value="2" />
<input id="3" type="button" value="3" />
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> </script>
<script type="text/javascript" src="js/ext.js"></script>
</body>
My jquery
$('#1').click(function)({
var txt = $('#textbox');
$('#1').html('txt');
});
Try this code
$('input[type="button"]').click(function() {
var txt = $(this).val();
$('#textbox').val(txt);
});
Will explain your problem with your jQuery code:
Line 1:
You registered with #1 button so this will be triggered on when button 1 is click, I made it generalised
Line 2:
You are getting value from textbox, whereas you are supposed to take value from button text.
Line 3:
You are assigning value in button, whereas you are supposed to assign to textbox and always use val() for input type of control and html() for other html container controls
The above were your errors explained.
Queries welcomed!
Fiddle demo
$(function(){
$('input[type="button"]').click(function(){
$('#textbox').val($(this).val());
});
});
You have to get the value using val() method. Also, you are passing variable txt as string to the html() function which is wrong. Try the below...
var txt = $('#textbox').val();
$('#input1').html(txt);
Try this
$('input[type="button"]').click(function() {
$('#textbox').val($(this).val());
});
You can try this one
$('div').on('click', 'input', function () {
$('#textbox').val(this.value);
});
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Addition is not working in JavaScript
In an attempt to learn some java script, I'm trying to build a simple system that adds values when buttons are clicked..
The following code works, but will only add the hardcoded value of +100, can anyone help me change this code so it adds the value nested in the id="add" button?
<html>
<head>
<title>Input tutorial</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script language="javascript">
$(function () {
$("#add").click(function() {
$("#total").val(parseInt($("#total").val()) + 100)
});
});
</script>
</head>
<body>
<input type="button" value="12" id="add">
<input type="button" value="14" id="total">
</body>
</html>
Any help would be great! Thank you.
Just replace the hardcoded value of 100 by the value you want:
$("#total").val(parseInt($("#total").val()) + parseInt($("#add").val()) )
<html>
<head>
<title>Input tutorial</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script language="javascript">
window.onload = function() {
$('#add').bind('click', function () {
$("#total").val(parseInt($("#total").val()) + parseInt($("#add").val()) + 100);
});
}
</script>
</head>
<body>
<input type="button" value="12" id="add">
<input type="button" value="0" id="total">
</body>
</html>