I hide input type and show only image which is used to choose file and on change of input I call a function :
function showpreview(file) {
var previewImg = $(file).parent().find('img').eq(0);
if (file.files && file.files[0]) {
console.log(window.URL.createObjectURL(file.files[0]));
previewImg.src = window.URL.createObjectURL(file.files[0]);
} else {
previewImg.src = "blankpreview.png";
}
console.log(previewImg.src);
console.log(previewImg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col">
<label for="exampleFormControlFile2">
<img style="height:170px;" class="img-thumbnail" src="blankpreview.png" />
</label>
<input type="file" onchange="showpreview(this)" name="Screen_2" accept="image/jpeg, image/png" class="form-control-file d-none" id="exampleFormControlFile2" required />
</div>
This show correct source and element in console but image doesn't change
You can use .attr('src',yourimage) to set src of your image tag.
Demo Code :
function showpreview(file) {
var previewImg = $(file).parent().find('img') //no need of eq..
if (file.files && file.files[0]) {
console.log(window.URL.createObjectURL(file.files[0]));
previewImg.attr('src', window.URL.createObjectURL(file.files[0])); //use .attr here
} else {
previewImg.attr('src', "blankpreview.png");
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col">
<label for="exampleFormControlFile2">
<img style="height:170px;" class="img-thumbnail" src="blankpreview.png" />
</label>
<input type="file" onchange="showpreview(this)" name="Screen_2" accept="image/jpeg, image/png" class="form-control-file d-none" id="exampleFormControlFile2" required />
</div>
Because you want to work with the raw DOM element, you need to grab that in your selector...
var previewImg = $(file).parent().find('.img-thumbnail').eq(0)[0];
Note the additional [0] at the end. Let's deal with it in steps below...
$(file).parent()
.find('.img-thumbnail') // find the thumbnail image
.eq(0) // "I only want the first one you find"
[0]; // Give me the DOM element that's inside the jQuery object
function showpreview(file) {
var previewImg = $(file).parent().find('.img-thumbnail').eq(0)[0];
if (file.files && file.files[0]) {
previewImg.src = window.URL.createObjectURL(file.files[0]);
} else {
previewImg.src = "blankpreview.png";
}
console.log(previewImg.src);
console.log(previewImg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col">
<label for="exampleFormControlFile2">
<img style="height:170px;" class="img-thumbnail" src="blankpreview.png" />
</label>
<input type="file" onchange="showpreview(this)" name="Screen_2" accept="image/jpeg, image/png" class="form-control-file d-none" id="exampleFormControlFile2" required />
</div>
Related
When one image is selected ...
<div class="selectable">
<img src="https://glarza.com/imagens/tamanho-33.webp" class="ui-widget-content"value="SIZE-33"width="60"height="60">
<img src="https://glarza.com/imagens/tamanho-34.webp" class="ui-widget-content"value="SIZE-34"width="60"height="60">
</div>
this function select the size ...
<script>
$(function() {
$(".selectable").selectable({
selected: function() {
var selectedItemList = $("#medida-selecionada-dalista").empty();
$(".selectable img").each(function(index) {
if ($(this).hasClass("ui-selected")) {
selectedItemList.append(
$(this).attr("value") ); } });}});});
</script>
And show the selected size inside the id ...
<span id="medida-selecionada-dalista"></span>
My problem... I need to insert this value inside this input. I need only this. The others inputs are storeged in mysql.
<input type="size" class="form-control" id="size" name="size" value="">
Like so?
$(function() {
$(".selectable").selectable({
selected: function() {
var selectedItemList = $("#medida-selecionada-dalista").empty();
$(".selectable img").each(function(index) {
if ($(this).hasClass("ui-selected")) {
selectedItemList.append(
$(this).attr("value")
);
/* insert into input */
document.getElementById("size").value = this.getAttribute("value");
}
});
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<input type="size" class="form-control" id="size" name="size" value="">
<span id="medida-selecionada-dalista"></span>
<div class="selectable">
<img src="https://glarza.com/imagens/tamanho-33.webp" class="ui-widget-content" value="SIZE-33" width="60" height="60">
<img src="https://glarza.com/imagens/tamanho-34.webp" class="ui-widget-content" value="SIZE-34" width="60" height="60">
</div>
P.S. avoid jquery whenever you can...
So when I click the checkbox, the background colour changes. I want this function to work for all checkboxes, but it is currently only working for the first one.
function obtained() {
var obt = document.getElementsByClassName("obtained")[0];
var col = document.getElementsByClassName("entry")[0];
if (obt.checked == true) {
col.style.backgroundColor = "#2ab320";
} else {
col.style.backgroundColor = "#d3d5db";
}
}
<div class="entry">
<img class="class-name" src="image1.png">
<b>title1</b><br>content1
<input
type="checkbox"
class="obtained"
onclick="obtained()"
name="obtained"
>
</div><hr>
<div class="entry">
<img class="class-name" src="image2.png">
<b>title2</b><br>content2
<input
type="checkbox"
class="obtained"
onclick="obtained()"
name="obtained"
/>
</div><hr>
<div class="entry">
<img class="class-name" src="image3.png">
<b>title3</b><br>content3
<input
type="checkbox"
class="obtained"
onclick="obtained()"
name="obtained"
/>
</div><hr>
You could pass an instance of the checkbox to the function like so:
function obtained(element) {
var col = element.parentElement;
if (element.checked == true) {
col.style.backgroundColor = "#2ab320";
} else {
col.style.backgroundColor = "#d3d5db";
}
}
<div class="entry">
<img class="class-name" src="image1.png">
<b>title1</b><br>content1
<input
type="checkbox"
class="obtained"
onclick="obtained(this)"
name="obtained"
>
</div><hr>
<div class="entry">
<img class="class-name" src="image2.png">
<b>title2</b><br>content2
<input
type="checkbox"
class="obtained"
onclick="obtained(this)"
name="obtained"
/>
</div><hr>
<div class="entry">
<img class="class-name" src="image3.png">
<b>title3</b><br>content3
<input
type="checkbox"
class="obtained"
onclick="obtained(this)"
name="obtained"
/>
</div><hr>
In cases like this one you should declare a helper function:
function makeTogglable(element) {
const obt = element.querySelector(".obtained");
obt.addEventListener("click", () => {
if(obt.checked == true) {
element.style.backgroundColor = "#2ab320";
} else {
element.style.backgroundColor = "#d3d5db";
}
});
}
Then you can apply it your HTML elements, for example:
document.querySelectorAll('.entry').forEach(e => makeTogglable(e));
Edit: forgot about listeners
my page.php contains div id="container" with id="input" which default type is input type="text":
<div class="container">
<div class="row">
<div class="col-75">
<div id="container">
<input type="text" id="input" value="" name="password">
</div>
<input type="submit" value="OK" id="logBtn">
</div>
</div>
</div>
I want to change input type="text" to input type="password" for same input id="input" with receiving of value textToPassType(1):
function textToPassType(val1){
if (val1 == 1){
document.getElementById('input').type = 'password';
} else if (val1 == 0){
document.getElementById('input').type = 'text';
}
}
This way works only if I call this function included to page.php, but if use it in external document: <script type="text/javascript" src="myjs.js"></script> method does not works. So, I'm looking for some correct method to change input type dynamically and keep same id name from external myjs.js to my page.php
var is a keyword in JavaScript, used to declare a variable, you can't use it as a variable name, try naming your variable val or something:
function textToPassType(val) {
if (val == 1) {
document.getElementById('input').type = 'password';
} else if (val == 0) {
document.getElementById('input').type = 'text';
}
}
textToPassType(1);
<div class="container">
<div class="row">
<div class="col-75">
<div id="container">
<input type="text" id="input" value="" name="password">
</div>
<input type="submit" value="OK" id="logBtn">
</div>
</div>
</div>
I want the user to be able to display images by selecting the image that they want to display using a checkbox. I have tried to do that but the image doesn't seem to display when selected
function testdisplay() {
var image = document.getElementsByTagName("img")
var src2=image[2].getAttribute("src");
var img1 = document.getElementById("check-option8");
var bg = document.getElementById("container");
if (img1.checked) {
bg.src=src2
}
}
}
<div id="container">
<img id="dolphin1" class="dolphin" src="../images/dolphins/image1.png" alt="dolphin 1" title="dolphin 1">
<img id="dolphin2" class="dolphin" src="../images/dolphins/image2.png" alt="dolphin 2" title="dolphin 2">
<img id="dolphin3" class="dolphin" src="../images/dolphins/image3.png" alt="dolphin 3" title="dolphin 3">
</div>
<div id="toggle-components">
<fieldset>
<legend>Choose image to display</legend>
<input type="checkbox" id="check-option1" checked="checked"><label for="check-dolphin1">diving down</label>
<input type="checkbox" id="check-option8" onclick="if(this.checked){testdisplay()}" )><label for="check-dolphin8">jumping up</label>
<input type="checkbox" id="check-option5"><label for="check-dolphin5">take off</label>
<input type="checkbox" id="check-option3"><label for="check-dolphin3">jumping together</label>
</fieldset>
</div>
I try to update you code, so that you can understand easily:
Major changes in your code is:
make an array to keep the image source
make some changes testDisplay function too.
link of jsfiddle
var imgArray = [];
imgArray.push("http://reviewnepal.com/socialevents/thumb/google_photo.jpg");
imgArray.push("http://reviewnepal.com/socialevents/thumb/google_photo.jpg");
imgArray.push("http://reviewnepal.com/socialevents/thumb/google_photo.jpg");
function testdisplay() {
var src2 = imgArray[1];
var bg = document.getElementById("container");
if (document.getElementById("check-option8").checked)
bg.src = src2;
else
bg.src = "";
}
<img id="container" />
<div id="toggle-components">
<fieldset>
<legend>Choose image to display</legend>
<input type="checkbox" id="check-option1" checked="checked"><label for="check-dolphin1">diving down</label>
<input type="checkbox" id="check-option8" onclick="debugger; testdisplay();" )><label for="check-dolphin8">jumping up</label>
<input type="checkbox" id="check-option5"><label for="check-dolphin5">take off</label>
<input type="checkbox" id="check-option3"><label for="check-dolphin3">jumping together</label>
</fieldset>
</div>
I am attempting to toggle disabled = true|false on a <input type="text">, using a checkbox. I am able to get the value of the input, but I cannot set the input to disabled.
my jquery/js code
<script>
$(function () {
$('.date').datepicker();
$('body').on('change', '.housing', function () {
if ($(this).val() == 'dorms') {
$(this).parent().next(".dorms").show();
} else {
$(this).parent().siblings(".dorms").hide();
}
});
$('body').on('change', '.single', function () {
if ($(this).checked) {
$('#echo1').text($(this).prev(".roommate").val()); // this works
$(this).prev(".roommate").val(''); // does not empty the input
$(this).prev(".roommate").disabled = true; // does not set to disabled
$(this).prev(".roommate").prop('disabled', true); // does not set to disabled
$('#echo2').text($(this).prev(".roommate").prop('disabled')); // always says false
} else {
$('#echo1').text($(this).prev(".roommate").val()); // this works
$(this).prev(".roommate").disabled = false; // always stays false
$('#echo2').text($(this).prev(".roommate").prop('disabled')); // always says false
}
});
});
</script>
my html code
<div class="registration_housing particpant_0" data-sync="0">
<div>
<label class="particpant_0"></label>
</div>
<div>
<label>Off Campus (not included)</label>
<input type="radio" name="housing[0]" value="none" class="housing" />
</div>
<div>
<label>On Campus</label>
<input type="radio" name="housing[0]" value="dorms" class="housing" />
</div>
<div class="dorms" style="display:none;">
<div>
<label>Checkin:</label>
<input type="text" name="check_in[0]" class="date" />
</div>
<div>
<label>Checkout:</label>
<input type="text" name="check_out[0]" class="date" />
</div>
<div>
<label>Roommate:</label>
<input type="text" name="roommate[0]" class="roommate" />
<input type="checkbox" name="roommate_single[0]" value="single" class="single" />check for singe-occupancy</div>
</div>
<div class="line">
<hr size="1" />
</div>
</div>
<div>
<label id="echo1"></label>
</div>
<div>
<label id="echo2"></label>
</div>
you can see this at http://jsfiddle.net/78dQE/1/
Any idea why I can get the value of (".roommate") - ie. $(this).prev(".roommate").val()
but
$(this).prev(".roommate").disabled = true;
OR
$(this).prev(".roommate").prop('disabled', true);
will not set (".roommate") to disabled?
Your issue is mixing jquery with DOM element attributes
change if ($(this).checked) { to if (this.checked) {
With jquery you would do
$(this).is(':checked') // But you could just do this.checked
And
$(this).prev(".roommate").prop('disabled', false); // or $(this).prev(".roommate")[0].disabled = false;
instead of
$(this).prev(".roommate").disabled = false;
Fiddle
So you just probably need this:
$('body').on('change', '.single', function () {
$(this).prev(".roommate").prop('disabled', this.checked).val('');
});