Copying INPUT FILE value to INPUT TEXT with click in jQuery - javascript

I would like to copy the value of a input:file to input:text. I can do it with plan JavaScript but I will like to know how to do it with jQuery.
----JavaScript
// This what the script would look like with plain JavaScript
// It works fine. I just woulld like to know who to do it with jQuery.
function fakeScript() {
var filepath;
filepath = document.adminForm.tumb.value;
filepath = filepath.substring(filepath.lastIndexOf('\\')+1, filepath.length);
document.adminForm.tumbFake.value = filepath;
}

If you have something that works in "plain Javascript", it'll work with jQuery too : jQUery is just a library, that adds functions -- it doesn't prevent anything from working (or there is some kind of bug in it ^^ )

var fileValue=$("input[type='file']").val();
var inputValue=$("input[type='text']").val(fileValue);
cheers

You probably cannot use the value attribute of a file input with JQuery.
"The value attribute cannot be used with <input type="file">." - http://www.w3schools.com/tags/att_input_value.asp

To get the text value of a file from an <input type="file"/> element, use yourFileInputElement.files[0].getAsText("utf-8").

Related

set text of input value with javascript

I know this is probably a piece of cake for all, but im really not any good with javascript.
I would like to set the value of html input with javascript.
I have an input like this:
<input id="input-data" value=""/>
I would like to set the text of the value with javascript, meaning that if id pass value like "CocaCola" to input, it should display "CocaCola" in input
This is how i try
document.getElementById("input-data").value = "CocaCola";
But no data gets displayed in input. When i run debugger and put value as my watch, the "CocaCola" is stored in value.
What on earth am i missing?
Make sure your code is under HTML tag, like this:
<input id="input-data" value=""/>
<script>
document.getElementById("input-data").value = "CocaCola";
</script>
Or you can use:
window.onload = function(){
document.getElementById("input-data").value = "CocaCola";
}
It works any time and anywhere.
Your JavaScript code to set value is right.
You can also try jQuery to set value like this,
$('#input-data').value = 'CocaCola';

javascript set variable from .text method

I'm new in javascript development and I want to ask how to set variable from text method.
Example: in this code have a text method
$('.phone').text(theRestaurant.phone);
$('.location').text(theRestaurant.location);
$('.info').text(theRestaurant.info);
in the Html file, when I create any class from these will print the value from JSON file.
Example :
<div class='phone'></div>
Output: (000)000-9999
source code:
<div class='phone'>(000)000-9999</div>
I try to set this in variable but it doesn't work.
My try:
var phone = theRestaurant.phone
I want to set it in variable because I need to put it inside href value like so:
<script>
var phone = 'tel:' + phone
document.getElementById("phone").href = phone;
</script>
I hope everything clear. and If have an other solution please tell about it.
Thanks
Have you wrapped your jQuery code in a document.ready() wrapper?
If not, then the javascript might run before the page has had time to create the elements in the DOM, and nothing will work.
<script>
$(document).ready(function(){
//all javascript/jQuery code goes in here
});
</script>
Also, see my comment above about mixing up "ByClassName" and "ByID"
Answer came from #itsgoingdown
this code in main javascript file:
var phone=document.getElementById('phone').innerHTML; document.getElementsByClassName("phone")[0].href = phone;

How to remove/change an input value using javascript

How do I remove the value 'Anonymous' in this input that I have and replace it with a placeholder text 'Your name' using javascript/jquery? I don't have access to the HTML code.
This is what I have so far, but don't really know where to go from there.
document.getElementById('txtYourName').placeholder =' Your Name ';
HTML
<input id="txtYourName" type="text" value="Anonymous" name="txtYourName"></input>
Add this second line here...
A placeholder is only seen when the value happens to be blank. With the code below, you can set the placeholder, as well as erase the default value in your field.
document.getElementById('txtYourName').placeholder =' Your Name ';
document.getElementById('txtYourName').value = "";
Demo: http://jsfiddle.net/723vL/
You can use .val():
$('#txtYourName').val('');
or pure javascript using:
document.getElementById('txtYourName').value = ""
If you want to set new value then just put your value inside "", like:
$('#txtYourName').val('new value');
With jQuery, your final code should look like:
$('#txtYourName').attr('placeholder','Your name');
$('#txtYourName').val('');
Fiddle Demo
With pure JS, you final code should look like:
document.getElementById('txtYourName').placeholder ='Your name';
document.getElementById('txtYourName').value = "";
Fiddle Demo
That should do it, so long as you are running that script either on an onload event, jquery's ready event or at the very bottom of the page, once the DOM has been rendered.
Are you getting an error in your console?
try this
returns value:
$('#txtYourName').attr("value");
sets value
$('#txtYourName').attr("value", "");
use
document.getElementById('txtYourName').value ='some vaue';
if you are using jQuery then you can use
$("#txtYourName").val('some value');

jQuery: return string as html

I have a "Label" control on my form which is being populated via jquery. My problem however, is I need to return my string with html tags, but my label doesn't seem to recognize html. Here's my control:
<label id="comment"></label>
And here's how I'm working with it in javascript:
var comment;
comment = $("#comment");
comment.text("<b>Please scan an <br/>item!</b>");
In the above code, the html in my string is ignored. Is there any way I can get my form to recognize the returned html tags?
Thanks
Use the html function :
comment.html("<b>Please scan an <br/>item!</b>");
try comment.html("<b>Please scan an <br/>item!</b>");
You could also use document.getElementById("comment").innerHTML = "<b>Please scan an <br/>item!</b>";
comment.html("<b>Please scan an <br/>item!</b>");

display image file name after choose file(web)

I need to display the file name after choose the file from file input on a HTML page(<input type=file>).I am using Ruby on rails(Probably it doesn't matter).Pls give me some hint
$('input[type="file"]').change(function(){
var file_name = $(this).val();
});
check the fiddle : http://jsfiddle.net/cGVCB/
I don't know Ruby, but i'm shure you can use Javascript / jQuery:
alert($('#idOfYourUploadField').val());
Combine it with a change listener, or something, to get it on every change.

Categories

Resources