I am trying to have an image as value in a hidden input field which I want to use in my javascript.
<input type="hidden" class="anything" value="i need an image here" />
then I want to use it in a javascript file like
$(".anything").val()
How can I accomplish this ? Any help'll be great.
you can make a div with a class img and give it a property display:none and can call it using jquery.
<html>
<head></head>
<body>
<div class="img" style="display:none";><img src="adress"> </div>
<script>
$(document).ready(function(){
$(.img).fadeIn(1000);
});
</script>
</body>
$(".anything").val() cannot be an image because .val() return a String and an image is an DOM object.
You will need at least a conversion from string to a DOM event.
The two main ways to do are :
the value contains the url of the image instead of the image then you can get the image with : $("<img>").attr("src", $(".anything").val())
you can user base64 data but as Dave Salomon say it's probably not a good ideal
You could possibly write the imagesrc as a string in the value like:
$(".anything").val("/path/to/image.png")
Or which part of the image do you want as value in the input field?
Related
In my code, I am showing an image to the user by changing the src to
$("#" + img_tag_id).attr('src', image.toDataURL());
how can I take the value of this file to input tag below:
HTML code:
<input type="file" name="uploadNewImage">
I am using finecrop plugin
Something like $('input[name='uploadNewImage']').attr('src', image.toDataURL());
You should get the src attribute of the input element, since it should contain the URL that it displays:
$('input[name='uploadNewImage']').attr('src', image.toDataURL());
I've an AngularJS page and I want it to change ng-src value of an element when clicking on another element. I intialized variable src:
data-ng-init="src='assets/img/projects/1'
Then I made this element:
<img data-ng-src="{{src}}/1.jpg" id="img1">
And finally I want when someone clicks on my link, It change that src to {{src}}/1a.jpg, So I tried this:
(Don't care about my empty link, I know how to click on it...), My problem is, The value of src doesn't change and My page is still the first image, How can I improve my code to change value {{src}}/1.jpg to {{src}}/1a.jpg?
Very very wrong code, You combine standard DOM modification with angular. Choose only one solution not combine in this way. Check my example code:
var app=angular.module("image",[]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="image" ng-init="src='https://www.gravatar.com/avatar/161dac2e231b0f6b4340000328e18bcf?s=328&d=identicon&r=PG&f=1'">
<img data-ng-src="{{src}}" id="img1">
<button ng-click="src='https://www.gravatar.com/avatar/a5af44879d481c3c15a4b2dd55007322?s=328&d=identicon&r=PG'" >Change image src to different</button>
</div>
So only set src scope variable to different src and it works like a charm.
ng-click="src='different src'"
Create new varibale image
data-ng-init="src='assets/img/projects/1'; image='1.jpg'"
Then HTML Element
<img data-ng-src="{{src}}/{{image}}" id="img1">
If someone clicks on you link the change the image value
Hope this helps ! Thanks.
Set ng-click to function in your controller, that changes "src" variable in your scope.
The jsp form contents are already formatted as such:
<form id="textpage"
<textarea name="textbox" id="text">
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfQAAABkCAYAAABwx8J9AAAcC0lEQVR4nO3dd1SUZ.....
</textarea></form>
I want to click a button on another html page
<button>Load Image!!</button>
and replace an existing image placeholder src="putImageHere.png" with
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfQAAABkCAYAAABwx8J9AAAcC0lEQVR4nO3dd1SUZ..."
ALSO !!! The src above must be a variable as it will be different each time its loaded so it cant be hard coded.
So basically I ended up loading an element with jquery and in the end it was as simple as
$('#elementId').load(URL,data,function(){
$('#myImage').attr("src", $('#elementId').innerHTML);
});
This question already has answers here:
Append text to textarea with javascript
(3 answers)
Closed 8 years ago.
How can we pass a string from js file to HTML? Assume I have declared a string in privacy.js and I need to get in to my html text area.
I have imputed the script file:
<script type="text/javascript" src="js/privacy.js"></script>
I am assinging string value in to a div
document.getElementById("privacy_text").innerHTML = privacy_string;
I need the Sting value in text area
<textarea class="terms" readonly="readonly">
<div id="privacy_text"></div>
</textarea>
Don't embed a div in a textarea and rather assign it it's own id:
<textarea id="privacy_textarea"></textarea>
And then try to assign a value to it:
document.getElementById("privacy_textarea").value = privacy_string;
Here is a working example.
You could as well use innerHTML but textarea is a form element so I'd recommend to use value.
Give your textarea an ID like, this
<textarea class="terms" readonly="readonly" id="theTextarea">
</textarea>
and then use the following JavaScript to select it and change the value:
document.getElementById("theTextarea").value = "theValue";
If you have access to jQuery, you can use:
$("#theTextarea").val("theValue");
Fiddle
Either way, a div can't go inside a textarea.
If you can assign an ID to your textarea...
<textarea id="myTextArea"></textarea>
Then this should work:
document.getElementById("myTextArea").value = privacy_string;
Give that textarea an ID , then set value to text area like document.getElementById('your text area id').value=privacy_text; from javascript file.
eg:
<script>
var privacy_text="your string";
document.getElementById(textId).value=privacy_text;
</script>
<textarea id="textId"></textarea>
Try this:
document.querySelector(".terms").value = 'someValue';
You can find HTML elements from javascript using document.querySelector by using different type of "query filters" in the above example it is finding the text area by CSS class using .cssClass.
Regarding the div inside your textarea object please note that is not possible. You can only non-HTML text.
<html>
<head>
<script type="text/javascript">
function printValue()
{
var name="Anand";
document.getElementById("textbox1").innerHTML=name;
}
</script>
</head>
<body>
<input type="text" id="textbox1"/>
<input type="button" value="GetText" onclick="PrintValue()"/>
</body>
</html>
Instead of .innerHtml, use this:
document.getElementById("privacy_text").value= "Hello";
i have a form in which I want to display a loader image only if the file upload field has any path in it, for that i thought of creating the image element in java script along with attributes: src, id and alt..
i am not aware of how to create elements using javascript. please help me.
This page has a good tutorial on dynamically creating DOM elements using javascript.
The standard way to do it is with the document.createElement function.
Small example which adds html code to a placeholder.
<script>
function example()
{
placeholder.innerHTML = "<img src='imagehere'/>";
}
</script>
<input type="button" value="Click" onclick="example();"/>
<div id="placeholder"/>
Using Jquery makes this nice and easy:
Javascript:
$('#MyElementID').html('<img alt="" src="Images/myimage.jpg" />');
HTML:
<div id="MyElementID"></div>
Renders as:
<div id="MyElementID"><img alt="" src="Images/myimage.jpg" /></div>