Develop Reference

Realtime input value make auto percentage

I'm trying to make the input value will show auto percentage value. If I type any input value that will show an auto-generate percentage. Is it an appropriate way to solution? But I do not confirm it's right or wrong.
var on_input_value = parseFloat($("input#input_value").val());
var percentage_value = (on_input_value/100).toFixed(2);
$('#oninput_value_make_auto_percentage').text('£' + percentage_value);
$('input#input_value').keyup(function(){
var on_input_value = parseFloat($("input#input_value").val());
var percentage_value = (on_input_value/100).toFixed(2);
$('#oninput_value_make_auto_percentage').text('£' + percentage_value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<input type="text" id="input_value" value="12">% =
<span id="oninput_value_make_auto_percentage"></span>

Only show one image when displaying image with javascript

I am using this code to show a preview of an image URL.
<input name="input_19" id="input_2_19" type="text" value="" class="medium" placeholder="http://" aria-invalid="false">
<script>
jQuery('#input_2_19').blur(function() {
var src = jQuery(this).val();
var previews = jQuery(".previewImage");
var drawPreview = true;
var PreviousSource = jQuery(this).data('previousSource');
if(!src.match("^https?://(?:[a-z\-]+\.)+[a-z]{2,6}(?:/[^/#?]+)+\.(?:jpg|gif|png|jpeg)$") && src != "")
{
jQuery("#warning").html("Must be an image");
return false;
} else {
jQuery("#warning").html("");
}
jQuery.each(previews , function(index, value) {
if (src == "" && PreviousSource == $(value).attr('src'))
{
jQuery(value).remove();
drawPreview = false;
return false;
}
if( jQuery(value).attr('src') == src)
{
drawPreview = false;
return false;
}
});
if(drawPreview) {
jQuery('#prev').append('<img class="previewImage" style="max-width:500px;" src="' + src + '">');
}
var previousSource = jQuery(this).data('previousSource', src);
});
</script>
<div id="warning"></div>
<div id="prev"></div>
It works well, but if I change the image URL then the second image will show up too and the first will stay.
How do I make it so only one image preview is shown?
https://jsfiddle.net/LucyTech/qohxryL4/4/
Also why doesn't it work with some images eg
https://ae01.alicdn.com/kf/HTB1q0ucSYrpK1RjSZTEq6AWAVXap/Mifa-Portable-Bluetooth-speaker-Portable-Wireless-Loudspeaker-Sound-System-10W-stereo-Music-surround-Waterproof-Outdoor-Speaker.jpg
what is wrong with this url? In the browser it shows an image so why does the code give an error?

Please use this javascript. That will give you result as per your expectation.
$('#input_2_19').blur(function() {
console.log(jQuery(this).val());
var src = jQuery(this).val();
var previews = $(".previewImage");
var drawPreview = true;
var PreviousSource = $(this).data('previousSource');
if(src.match("/\.(jpeg|jpg|gif|png)$/") != null && src != "")
{
$("#warning").html("Must be an image");
return false;
} else {
$("#warning").html("");
$('#prev').html('<img class="previewImage" style="max-width:50px;" src="' + src + '">');
}
});

Using append() will always add a new element. Maybe you should include the img tag in the initial html with its own id property and change its src property with attr(). You can use show() and hide() on an image element or you can wrap it in a div/span and hide this one.

Before appending the
below code should work.
jQuery('#prev').html('');
After this add your img tag
jQuery('#prev').html('<img class="previewImage" style="max-width:500px;" src="' + src + '">');

The problem of the image not previewing for some the links I think is related to the regular expression that you wrote in the str.math I am not very good in so I can not help you with it but I took a look at your post's first comment "Jinesh", his/her regular expression seems to work. For the other problem, I wrote some piece of code for with comments to fix the the multiple image
// When you release the keyboard key
$("#urlInput").keyup(function(){
$("#warning").text(""); // Clear message div
var url = $("#urlInput").val(); // get url in the input box
if(isValidImageUrl(url)) // Validate the url
$("#prevImg").attr("src", url).show(); // Change src of th eimg tag and Show it
else
$("#prevImg").attr("src", "").hide(); // If the url is not valid, hide the img tag in the html
});
// When you get out the side the input box such as clicking outside or pressing tab key
$("#urlInput").blur(function(){
var url = $("#urlInput").val(); // Get the url in the input box
if(!isValidImageUrl(url)) // Validate the url
$("#warning").text("Must be an image"); // if the url is invalid show warning
});
// Valdiate url fucntion
function isValidImageUrl(checkUrl){
return checkUrl.match("^https?://(?:[a-z\-]+\.)+[a-z]{2,10000}(?:/[^/#?]+)+\.(?:jpg|gif|png|jpeg)$");
}
img{
width: 100px;
height: 100px;
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="warning"></div>
<input id="urlInput">
<div id="prev">
<img id="prevImg">
</div>

File upload value change?

I wish to change the file upload value when the file name (uploaded file) is too long. For example, if the file name is "This_file_has_a_long_name.txt", I wish to display it with limited characters like "This_file..name.txt".
So I tried the following but it is not working. Please advise.
$("#file_browser").change(function()
{
var filename = this.value;
filename = filename.substr(0,10);
alert(filename);
document.getElementById("file_browse").value = filename;
});

you cant change a property name in js cause of security normaly you will have
a msg SecurityError: The operation is insecure.
if you want you do that you need its to hide the default input file css go to google for that you have tuto
and add your filname custom in a <p></p> for exemple and place where you want
if you really need to change name do that on server side
good day

Try this :
Note:if length of name be 14 and greater , change it.
$(document).ready(function() {
$("#file_browser").change(function() {
var filename = $(this).val().replace(/C:\\fakepath\\/i, '');
//Or for full path use, var filename = $(this).val();
var len = filename.length;
if (len <= 13 ) {
$("#file_browse").text(filename);
}
else {
var part1 = filename.substr(0,5);
var part2 = filename.substr(len - 8);
$("#file_browse").text(part1 + "..." + part2);
}
})
})
<input type="file" id="file_browser">
<p id="file_browse"></p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

What about some trick.
JS
$("#file_browse").change(function()
{
var data = $(this).val();
$(this).val();
data = data.replace(/(.{1,10}).{1,}(.{6})/,"$1..$2");
$("#file_browse").after("<div style='position:absolute; top:4px; margin-left:230px;'>"+data+"</div>");
});
The add the following css
input[type=file]
{
color:transparent;
}
Adjust the margin-left and top position.
Store the filename into the variable data.
Then make an empty field by using $(this).val(); So your input type file label contain like No file choose are some thing like, this is because of to avoid your input file name is so long means scroll will appear.
Use the pattern replace for include dots.
Then make the div tag for write the filename.
Don't forgot to add the css for transparent file text color.

You better use the name property to get just the file name and hide the default file input because you can't change its value.
$("#fileInput").change(function () {
if (this.files.length === 0) {
return;
}
var name = this.files[0].name;
if (name.length > 14) {
name = name.substr(0, 7) + "..." + name.substr(-7);
}
$("#fileNameText").text(name);
});
$("#chooseButton").click(function () {
$("#fileInput").click();
});
<form>
<input type="file" id="fileInput" style="display: none" />
<button type="button" id="chooseButton">Choose file</button>
<span id="fileNameText">Select a file</span>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

JavaScript cannot insert images into HTML

I'm making a prototype for a program that lets you insert an image URL and you can add to it with animated GIFs (Canvas is not used because animated GIFs cannot be shown). However, when I try to do this, it doesn't work.
<center>
<input type="text" id="tb" placeholder="Image URL" />
<button onClick="ipt()">Import</button>
<button onClick="edit()">Add Effects</button>
<div id="lyr">
</div>
</center>
<script>
function ipt() {
var c = document.getElementById('tb').value;
alert(c);
document.getElementById('lyr').style.background = "url(" + c + ")";
}
</script>

Here's a simple vanilla script that'll do what you want.
It first creates variables for each of the items you want to handle, then creates a click handler for the button.
Feel free to swap out the class selectors for IDs.
https://jsfiddle.net/chxd6bnb/2/
var holder = document.getElementsByClassName('holder');
var image = document.getElementsByClassName('image');
var button = document.getElementsByClassName('showIt');
console.log(button);
button[0].addEventListener('click', function(e) {
e.preventDefault();
var img = image[0].value;
holder[0].style.backgroundImage = 'url(' + img + ')';
});

jquery removing string parts from two areas

I'm looking to expand on a recent script i've coded using jquery.
I have this following code
<script type='text/javascript'>
added_departments = new Array();
$("#departments_submit").click(function(){
var depo = $("#depo_list").val();
if(jQuery.inArray(depo, added_departments) != -1)
{
return false;
}
else
{
added_departments.push(depo);
$("#depo_added_list").append("<li>" + depo + "<a href='#' title='"+ depo +"' class='remove_depo'> [X] </a></li>");
var current_value = $("#departments").val();
if(current_value)
{
$("#departments").val(current_value + "," + depo);
}
else
{
$("#departments").val(depo);
}
return false;
}
});
</script>
The above code takes information selected in a select drop down box, adds it to a div to display publicly and also into a hidden form field that processes the data.
i've tried to create now something that will reverse this effect and remove certain selections from the div and the field. which is where i have this code
<script type='text/javascript'>
$(".remove_depo").click(function(){
var removing = $(this).title();
var current_val = $("#deparments").val();
if(current_val == removing) {
$("departments").replace(removing, "");
}
else {
$("departments").replace("," + removing, "");
}
});
</script>
It doesn't cause any errors, but it doesn't do anything either? So I'm really stuck. Any ideas?
EDIT: Updated code
$(".remove_depo").click(function(){
var removing = $(this).attr('title');
var current_val = $("#deparments").val();
if(current_val == removing) {
$("#departments").replace(removing, "");
}
else {
$("#departments").replace("," + removing, "");
}
});
Here is the html
<form method="post" action="javascript:void(0);">Select Departments To Be Added:
<div class="depo_adder">
<select id="depo_list"><option value="">--- INDIVIDUAL TAGS ---</option><option value="blah">blah</option></select>
<button id="departments_submit">Go!</button>
</div></form><form method="post" action="briefings/addbriefing.php">
<div class="form">
<strong>Departments: </strong>
<ul id="depo_added_list"><li>blah [X] </li></ul>
<input name="departments" id="departments" value="blah" type="hidden">
</div>

you're referring to $('departments') - this won't work. You need to specify either an identifierm eg $('#departments') or a class, eg $('.departments)
ah - other answer is also correct, .title() is not a function. You want
$('#foo').attr('title') to get the title.