This question already has answers here:
How to reach the element itself inside jQuery’s `val`?
(4 answers)
Closed last year.
I have an image inside a div and an input outside of the div, I'm trying to take each image source and put it inside the input's value, I want the image as a variable, how can I take the source of this variable and put it in the input's value?
var image = "img"
console.log('image');
$("input").val(image.attr('src'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<img src="http://via.placeholder.com/350x150">
</div>
<input type="text">
<div>
<img src="http://via.placeholder.com/300x150">
</div>
<input type="text">
<div>
<img src="http://via.placeholder.com/250x150">
</div>
<input type="text">
You could loop through them and get the source of everyone then affect it to the next input :
$('img').each(function() {
var image = $(this);
//Using the variable 'image'
image.closest("div").next("input").val( image.attr('src') );
//Or just like
$(this).closest("div").next("input").val( this.src );
});
$('img').each(function() {
var image = $(this);
image.closest("div").next("input").val(image.attr('src'));
})
input {
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<img src="http://via.placeholder.com/350x150">
</div>
<input type="text">
<div>
<img src="http://via.placeholder.com/300x150">
</div>
<input type="text">
<div>
<img src="http://via.placeholder.com/250x150">
</div>
<input type="text">
It's really good practice to pack your logical component into a single DOM node. The way you have it structured, there's no logical connection between the image and the input, other than the fact that one is beside the other. Simply because Sheila sits in the cubicle beside mine doesn't mean we're functioning together.
Instead, see what I've got below -- each image/input is contained in a div. The only image that an input should see is right in its same container. Now Sheila is in the same cubicle as me, we're now working on the same thing and can reference each other.
And, rather than the image and the input needing to know about each other, I'm asking the container itself to set those values. By doing this, the pieces are a little more loosely coupled.
var containerEls = $(".container");
containerEls.each(function(){
var imgEl = $(this).find("img");
var inputEl = $(this).find("input[type=text]");
inputEl.val(imgEl.attr("src") );
});
input {
width: 400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div>
<img src="http://via.placeholder.com/350x150">
</div>
<input type="text">
</div>
<div class="container">
<div>
<img src="http://via.placeholder.com/300x150">
</div>
<input type="text">
</div>
<div class="container">
<div>
<img src="http://via.placeholder.com/250x150">
</div>
<input type="text">
</div>
Use val(function) to loop through all the inputs individually Then traverse to the instance specific image to return the value
$("input").val(function() {
return $(this).prev().find('img').attr('src');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<img src="http://via.placeholder.com/350x150">
</div>
<input type="text">
<div>
<img src="http://via.placeholder.com/300x150">
</div>
<input type="text">
<div>
<img src="http://via.placeholder.com/250x150">
</div>
<input type="text">
Related
I'm making a web application. First see this image:
Now, you can see the area outlined by yellow line. The list with white background is dynamic (It is displayed when something is typed in search bar). Now what I want is when I click anywhere out of this area (Search input field + List), the list should be display: none. I've tried a few things but for that I had to write a lot of code as I did this for different divs separately.
Also, I don't want to paste the whole code here as it is too long. So I'm just providing you HTML to get an idea of this picture.
<header>
<div id="headerdiv">
<div class="headerlogo"><img src="#" alt="Passwords"></div>
<div class="quit"><img src="#" alt="Quit"></div>
</div>
</header>
<div id="functions">
<div id="funcLeft">
<div id="addbuttonwrap"><input class="addbutton" type="button" value=" + ADD"></div>
<div class="heading1">Your saved passwords</div>
<input class="funcbutton" type="button" value="EMAIL">
<input class="funcbutton" type="button" value="CAREER">
<input class="funcbutton" type="button" value="SOCIAL">
<input class="funcbutton" type="button" value="OTHER">
</div>
<div id="funcRight">
<div id="search">
<form name="searchform" method="post" action="">
<input type="text" name="searchinput" placeholder="Enter any keyword">
</form>
</div>
<div class="heading1 heading2">GUIDELINES</div>
<div class="slides">
<!--CONTENT-->
</div>
</div>
</div>
<footer>
<div id="footer">
Copyright: Protected
</div>
</footer>
NOTE: While writing answer, you can assume any TAG Name/class/ID etc. for any element as code is not sufficient. I just want to know what to do.
You want to hide the search when someone clicks away, you can do this with Javascript with a onclick event.
var elementToHide = document.getElementById("searchElement");
window.onclick = function(e){
if(e.target != elementToHide){
elementToHide.style.display = "none";
}
}
This will hide the element contained in elementToHide (can be any element in the DOM) when the user clicks on an element which is not this one.
The variable e contains the click event of which we check the target element in the if
Hope it helps
$(document).on("click", function(e) {
if(e.target.className != "search_element"){
$("#element_list").hide();
}
});
you can try this.
i think you are looking for a js free solution (or easiest approach). I would personally recommend using + and :focus operator from css
.search-with-submenu{
.submenu{
display: none;
}
input[type=search]:focus + .submenu{
display: block;
}
}
I have made a search bar that I want to show when user will click on search image that is list item as
<li class="item" onclick="showSearch()"><img id="search" src="images/search.png" ></li>
I set the visibility to hidden in HTML as
<div id="bar_search" style="visibility:hidden;">
have a function as
function showSearch () {
document.getElementById("bar_search").style.visibility = "visible";
}
but when i click on list item it does not show however hidden property working fine.
where I'm making mistake please tell me, thanks
Update:
content in the div
<div id="bar_search" style="visibility:hidden;">
<img id="searchbar" src="images/searchBar.png">
<div id="searchDec">
<input type="text">
<button ><b>Search</b></button>
</div>
</div>
Try setting the property through your style sheet and see if you can't get it to change with the event-handler.
<node class="hidden" onclick=toggleVisibilty()"></node>
Or if your not opposed to using jQuery, then you could always use the toggle method, so as to toggle the class that way.
http://api.jquery.com/toggle/
your code is fine maybe you have syntax error in the same page
function showSearch() {
document.getElementById("bar_search").style.visibility = "visible";
}
<li class="item" onclick="showSearch()">
<img id="search" src="https://wiki.ubuntu.com/IconsPage?action=AttachFile&do=get&target=search.png">
</li>
<div id="bar_search" style="visibility: hidden;">
<img id="search" src="http://i.stack.imgur.com/X6BXa.png">
</div>
<form id="jtable-edit-form" class="jtable-dialog-form jtable-edit-form">
<div class="jtable-input-field-container">
<div class="jtable-input-label">Type</div>
<div class="jtable-input jtable-text-input">
<input class="" id="Edit-configType" type="text" name="configType">
</div>
</div>
<div class="jtable-input-field-container">
<div class="jtable-input-label">Key</div>
<div class="jtable-input jtable-text-input">
<input class="" id="Edit-configKey" type="text" name="configKey">
</div>
</div>
<div class="jtable-input-field-container">
<div class="jtable-input-label">Value</div>
<div class="jtable-input jtable-text-input">
<input class="" id="Edit-configValue" type="text" name="configValue">
</div>
</div>
<div class="jtable-input-field-container">
<div class="jtable-input-label">Description</div>
<div class="jtable-input jtable-text-input">
<input class="" id="Edit-description" type="text" name="description">
</div>
</div>
I need to hide 1 div out of 4 div. I want to hide only div which has inner div as value 'Key'.
Please note that I am not allowed to changed HTML content. I can just write Jquery for it.
You can try this:
$( "div.jtable-input-label:contains('Key')" )
.closest( "div.jtable-input-field-container" )
.css( "display", "none" );
try this,
$("#jtable-edit-form .jtable-input-label:contains('Key')" ).parent().hide();
See this jsfiddle https://jsfiddle.net/cL4wsL3q/1/
Because IDs must be unique on document context, you should target specific parent element containing #Edit-configKey DIV instead:
$('#Edit-configKey').closest('.jtable-input-field-container').hide();
Try this code
$(document).ready(function(){
$( "div.jtable-input-label:contains('Key')" ).parent().hide();
});
Hope this will help you.
It seemed like nothing special but...
I'm trying to add and remove div, add element function working as expected, but if I delete element, nothing else are working - I cannot add nor delete. And one more problem there - selectors using css class that are same for all elements, but event triggering only on first element.
Here is JS:
//Here i want to clone element and insert its after last element
$("div.addnewitem").on('click', function () {
var $d = $("div.item:first").clone();
$($d).insertAfter("div.item:last");
});
//Here i'm deleting element
$("div.deleteitem").on('click', function (event) {
$(event.target).closest("div.item").remove();
});
And HTML markup:
<div class="item">
<div class="itemphoto">
<img alt="" src="../img/woolrich.png">
</div>
<div class="bigshadow">
<img alt="" src="../img/bigshadow.png">
</div>
<!--This must add new element after last one-->
<div class="addnewitem">
<img alt="" src="../img/addnewitem.png">
</div>
<!--This must delete current div-->
<div class="deleteitem">
<img alt="" src="../img/deleteitem.png">
</div>
<div class="about">
<input type="text" class="link" placeholder="Ссылка на вещь..." name="item_url">
<input type="text" class="link" placeholder="Ссылка на изображение" name="item_image" />
<input type="text" class="name" placeholder="Вещь и бренд..." name="item_name">
<textarea class="review" placeholder="Короткое описание (около 120 символов)..." name="item_desc"></textarea>
<input type="text" class="pricestylist" placeholder="Цена (xxx руб/$)" name="item_price">
</div>
</div>
try the fiddle demo
first").clone(true); , the true was missing, it is withDataAndEvents attribute,
for more details, check clone()
I wish to display certain divs inside a main div dependent on which image is clicked. With out any decent knoweldge of Js or Jquery, I fail to do this without some assistance.
<form>
<input type="hidden" name="prod">
<div id="images">
<img id="one" src="http://lorempixel.com/200/200/">
<img id="two" src="http://lorempixel.com/201/200/ ">
<img id="three" src="http://lorempixel.com/203/200/ ">
<img id="four" src="http://lorempixel.com/204/200/ ">
</div>
</form>
<div id="description">
</div>
<div class="one">Brilliant</div>
<div class="two">Super</div>
<div class="tree">Amazing</div>
<div class="four">Excellent</div>
If the image which has id="one" is clicked, then display <div class="one">Brilliant</div> inside of the description div. Then ofcause if the second image is clicked, then display the the 'super' div inside the description div. I'd like to not have the descriptions visible until clicked, and only one div at a time to be shown.
The images are apart of a form because I need to forward the value of the id on the images to a variable.
Here is the script that does that.
$('#images').delegate('img', 'click', function () {
var $this = $(this);
// Clear formatting
$('#images img').removeClass('border-highlight');
// Highlight with coloured border
$this.addClass('border-highlight');
// Changes the value of the form field prod to the file name shown in the image.
$('[name="prod"]').val($this.attr('id').substring($this.attr('id').lastIndexOf('-') + 1));
//Alert for debugging simplicity
alert($('[name="prod"]').val());
});
Perhaps a function can be implemented into the current script?
Here is a fiddle, and it will all make sense of what I have as a whole currently.
Check out this fidde
You just need to add:
$('#description').html($('.' + $this.attr('id')).html());
At the bottom of your onclick function.
** You have a typo on the 3rd div with text(tree instead of three).
You can make it bit simple by adding the divs for description in div as I see no need to put the divs for description outside the description div and later adding it. You will need to hide all the divs we have in description div and show the one that is related to img being clicked.
Live Demo
Html
<input type="hidden" name="prod">
<div id="images">
<img id="imgone" src="http://lorempixel.com/200/200" />
<img id="imgtwo" src="http://lorempixel.com/201/200" />
<img id="imgthree" src="http://lorempixel.com/203/200" />
<img id="imgfour" src="http://lorempixel.com/204/200" />
</div>
<div id="description">
<div id="one">Brilliant</div>
<div id="two">Super</div>
<div id="three">Amazing</div>
<div id="four">Excellent</div>
</div>
Javascript
$('#images').delegate('img', 'click', function () {
$('#description div').hide();
$('#' + this.id.replace('img', '')).show();
});