We Keep Coding

How do i get an image link to change live based on textbox?

i'd like a textbox to change the url of an img
Image Code
<img src="http://url.com/ text the user types">
All i want to happen is the img url to changed based on a textbox and for it to change live. it has to be appended onto another url like https://google.com/ + text
An example is https://webcode.tools/html-generator/image

const textBox = document.getElementById('text-box');
const img = document.getElementById('image');
textBox.addEventListener('input', (e) => {
img.src = `https://google.com/${e.target.value}`
})
<input type="text" id="text-box" placeholder="Enter pic url" />
<img src="" alt="your image" id="image" />
there you go

getting css style property using javascript

I have a image draggable and would like to save it via PHP so I decided to get the inner style and put it as value in input field, so I can get it via $_POST, but I am unable to find like if it would be a inner HTML data I could have get it via calling innerHTML syntax, but like so is there any way of getting style for the image
<div class="scott_img">
<img id="uploadPreview" src="<?php echo (empty($data['profile_pic'])) ? "images/profile.jpg" : "uploads/" . $data['profile_pic']; ?>" style="style goes here">
<span class="scouttag"></span>
</div>
<form method="POST" action="profile.php?uid=<?php echo $uid; ?>" enctype="multipart/form-data" style="text-align:center;">
<input id="uploadImage" type="file" name="image" style="margin:auto;" />
<input type="hidden" id="x" name="x" />
<input type="hidden" id="y" name="y" />
<input type="hidden" id="w" name="w" />
<input type="hidden" id="h" name="h" />
<input type="hidden" id="uploadPreview1" value="need style here so i can save it to database" />
<button type="submit" name="update_picture" class="btn_form">Update Picture</button>
</form>
<img class="scott_line"src="images/line.png">
<script>
(function() {
var elem = document.getElementById('uploadPreview');
var val = getComputedStyle(elem);
document.getElementById('uploadPreview1').value = val;
var $section = $('.scott_img').first();
$section.find('#uploadPreview').panzoom({
$zoomRange: $section.find(".zoom-range"),
$reset: $section.find(".reset")
});
})();
</script>
Thank you

if you get element style tag (inline css)
var a = document.getElementById('uploadPreview');
var b= a.getAttribute('style');
alert(b);
if you get element css
var element = document.getElementById('uploadPreview'),
style = window.getComputedStyle(element),
top = style.getPropertyValue('top');

I'm not sure how and why you are going to use this server-side, but if you believe that's the right thing to do, just stringify the JSON object:
var val = JSON.stringify(getComputedStyle(elem));

You can get an element's CSS style in JS and transform it into JSON like so:
var elementCSS = JSON.stringify(document.getElementById('uploadPreview').style)

since the Css value is in an input you have to get it via:
Var x = Document.getElementById("").value
Then in your java script, append the Css rules by doing;
X.style.width = Y;
Or div.style.color = "#ccc";
Hope you get the point

Can't you use simple jQuery to get style value like below?
var imgstyle = $("#uploadPreview").attr("style"); //this will get your whole value of style attribute.
$("#uploadPreview1").val(imgstyle); //this will update hidden field's value.
also it seems that it is going to be different on each upload. So you can put this above code inside your draggable or file uplaod's change event.

Onclick image change the input value

Really stuck with this concept. IN my Old code have separate input fields for % input fields and $ input fields. its Working.
Old UI code :
<td>Estimate Property Tax</td>
<td>
<input name="propertytaxpc" type="text" size="8" maxlength="8" value="<?php echo $dproperty_tax; ?>" onChange="javascript:propertyTaxPcChanged(true)" />
%</td>
<td>Or $
<input name="propertytaxamt" type="text" size="8" maxlength="8" onChange="javascript:propertyTaxAmountChanged(true)" />
</td>
OLD UI i have used two separate input fields for % and $. its Working. Now i changed NEW UI code
using Single Input Fields
NEW UI CODE:
<div class="col-md-4 padding-rht bdy">
<label id="lblEstimatePropertyTax"class="pull-left"style="font-weight: 600">
Estimate Property Tax</label>
</div>
<div class="col-md-3 padding-rht">
<input name="propertytaxpc" class="txt" type="text" size="8" maxlength="8" value="<?php echo $dproperty_tax;?>" onChange="javascript:propertyTaxPcChanged(true)" />
</div>
<div class="col-md-1 padding-lft">
<img src="Content/Images/percent.png" onclick="changeColor(event,this.src)" style="cursor:pointer"/>
</div>
In My UI I'm Using IMAGE ICON FOR % AND $ . In My Previous Code I AM
Using Each Input Fields for % and$. Now i'm Using new UI using % AND
$ Image .when user change % to $ Image Icon values also changes.
i have tired many method really stuck with concept
already created ICON change script:
function changeColor(event, _src) {
var fname = _src;
var ImageName = fname.substring(fname.lastIndexOf('/') + 1);
//alert(ImageName);
if (ImageName == "percent.png") {
$(event.target).attr("src", "Content/Images/RedDoller.png");
}
else {
$(event.target).attr("src", "Content/Images/percent.png");
}
}
Now i want pass value for Onclick image change ? when user change image value need to change.
please help me any body really i am stuck with this concept ? thanks in advance

Js Change Image
<img id="myImage" onclick="changeImage()" src="D:\\Images\\Img1.jpg" width="100" height="100">
<p id="myImageText">10</p>
</image>
script
<script type="text/javascript">
function changeImage() {
var image = document.getElementById('myImage');
var txt = document.getElementById('myImageText');
if (image.src.match("Img1")) {
image.src = "D:\\Images\\Img2.jpg";
txt.innerHTML = '20';
} else {
image.src = "D:\\Images\\Img1.jpg";
txt.innerHTML = 10;
}
}
</script>
place all script tag data at the end so that the page loads fast.

Use label to select image file but have attribute displayed input

I am looking to have the label be used for the selection of the item (so Choose File) is gone.
Here is my HTMl:
<div class="form-group">
<label class="btn btn-primary trigger" for="broker_image">Upload Image</label>
<input style="display:none;" class="uploadBtn" type="file" name="broker[image]" id="broker_image">
</div>
It works, although I do not have the image to actually have the name shown (which is part of the input tag)
Here is the js to try to make it show (which is 100% editable):
document.getElementsByClassName("trigger").onClick = function () {
document.getElementsByClassName("uploadFile").style.display = 'block';
document.getElementsByClassName("uploadFile").value = this.value;
};
Tried:
document.getElementsByClassName("trigger").onClick = function () {
document.getElementsByClassName("uploadFile")[0].style.display = 'block';
document.getElementsByClassName("uploadFile")[0].value = this.value;
};
With no luck.
JSFiddle:
http://jsfiddle.net/07zw6h3q/
I am lost on to make just the file name show, without some crazy javascript add in. Something simple. Using Rails 4.2 and Bootstrap.

You need to use the change event.
$('.uploadBtn').change(function(){
var a = $(this).val().split('\\');
$('.trigger').html(a[a.length - 1]);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<label class="btn btn-primary trigger" for="broker_image">Upload Image</label>
<input style="display:none;" class="uploadBtn" type="file" name="broker[image]" id="broker_image">
</div>
Also you can show a preview of the file (if it's image of course) Preview an image before it is uploaded

JSFiddle
HTML
<div class="form-group">
<label class="btn btn-primary trigger" for="broker_image" style="border : solid 1px lightgrey; padding : 5px">Upload Image</label>
<input style="display:none"; class="uploadBtn" type="file" name="broker[image]" id="broker_image" />
<label id="broker_image_name">no selected file</label>
</div>
JavaScript
var upload_button = document.getElementById("broker_image");
upload_button.addEventListener("change", function() {
var file_name = upload_button.value;
/*
the file come like this : C:\fakepath\file.htm
so we only need the file name
*/
file_name = file_name.split("\\"); // preventing \ to be escaped himself
var file_name_length = file_name.length;
file_name = file_name[file_name_length - 1];
var broker_image_name = document.getElementById("broker_image_name");
broker_image_name.innerHTML = file_name;
});
I used the event change to change the file name, which is an additional label I put right after your button (that I stylized a bit by the way) and that is updated with the file name.
You see a commented part for the file name value because when getting back the file name after the user select one, it comes with the pattern C:\fakepath\myFile.htm so I extracted only the file by splitting the string.

According to input field value echo image?

Have the following codes
function SetImageProperties(control)
{
// Populate hidden fields with properties of the control
document.getElementById("ImageName").value = control.name;
document.getElementById("ImageSource").value = control.src;
}
<form>
<div id="dhtmlgoodies_slideshow">
<div id="galleryContainer">
<div id="arrow_left"><img src="images/arrow_left.gif"></div>
<div id="arrow_right"><img src="images/arrow_right.gif"></div>
<div id="theImages">
<img src="http://www.fastflowers.com.au/Skin/FastFlowers/Images/Products/210,210/Australiana.jpg" name="image1.jpg" onclick="SetImageProperties(this)"/></a>
<div id="slideEnd"></div>
</div>
</div>
</div><input type="text" value="" id="ImageName" name="ImageName"/>
<input type="text" value="" id="ImageSource" name="ImageSource"/></form>
Getting the image src and image name into the input field. In "ImageSource" getting the src of image. Again How I display the image using the "ImageSource"? Means according to input field want to echo the image again.

Add a new <div id="selectedImage"> that stores the result. Then create an <img> element according to the inputs and append the results.
function SetImageProperties(control)
{
// Populate hidden fields with properties of the control
document.getElementById("ImageName").value = control.name;
document.getElementById("ImageSource").value = control.src;
// Create new image
var img = document.createElement("img");
img.src = control.src;
img.setAttribute("name", control.name);
// Output results
var target = document.getElementById("selectedImage");
target.innerHTML = "You selected the image:<br/>";
target.appendChild(img);
}
See DEMO.