How to show alert when / if input value live change using jquery? - javascript

I am trying to show alert if input value change. I am using jQuery, so here is a demo what i am trying to do but alert not showing / not working. Thanks
$(".d1, .d2").click( function (e) {
var $this = $(this);
$(".input").attr('value', $this.text());
});
$(".input").change( function() {
alert(this.value);
});
.d1, .d2 {cursor:pointer;border:1px solid black;margin-top:10px;padding:5px}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<input class="input" value="" /><p/>
<a class="d1">Demo 1</a>
<a class="d2">Demo 2</a>

You need to use .val() method to set value of inputelement, Since you are using the change event in input on programatically changing the value it will not execute. You need to use .trigger(event)
Execute all handlers and behaviors attached to the matched elements for the given event type.
$(".d1, .d2").click( function (e) {
var $this = $(this);
$(".input").val($this.text()).trigger('change');
});
$(".input").change( function() {
alert(this.value);
});
.d1, .d2 {cursor:pointer;border:1px solid black;margin-top:10px;padding:5px}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<input class="input" value="" /><p/>
<a class="d1">Demo 1</a>
<a class="d2">Demo 2</a>

Related

Jquery : Access data-link attribute

i want to get data-link attribute form an image click .
Following is my image tag
<a href="#" class="aclick">
<img data-link="petroliumjelly.php" src="productsimgs/petroliumjelly.png" class="img-responsive" id="2">
</a>
to get it on click this is what i am doing ,
<script type="text/javascript" language="javascript">
$(".aclick").click(function (e) {
e.preventDefault();
alert($(this).attr("data-link"));
var link = $(this).data("data-link");// tried both
console.log(link);
});
</script>
when i try to log or alert it, i get undefined
Please help me how can i fix it
Below is code snippet to help you. data-link attribute is in img tag and not in 'a' tag.
$(".aclick").click(function (e) {
e.preventDefault();
alert($(this).find('img').attr("data-link"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="aclick">
<img data-link="petroliumjelly.php" src="productsimgs/petroliumjelly.png" class="img-responsive" id="2">
</a>
The reason you're not getting a value is that you're getting the data-link attribute of the anchor tag as that is what represents this. If you find the child image you'll get the data-link. Here is a fiddle of it working.
<script type="text/javascript" language="javascript">
$(".aclick").click(function (e) {
e.preventDefault();
alert($(this).find('img').attr('data-link'));
var link = $(this).find('img').attr('data-link')
console.log(link);
});
</script>
You can try this,
<script type="text/javascript" language="javascript">
$(".aclick").click(function (e) {
e.preventDefault();
alert($(this).find('img').attr('data-link'));
var link = $(this).find('img').attr('data-link')
console.log(link);
});
</script>
In the context, $(this) refers to the link, not the image.
To get the image instead, use:
var link = $('img', $(this)).data('link');
That gets the img element inside the link (which is $(this)).
Read more about the .data()-method here: https://api.jquery.com/data/
In my opinion, it makes it a bit cleaner than using the .attr()-method.
You assign you data-link attribute in img tag,
so you have to write click event on img tag
$(".aclick img").click(function (e) {
e.preventDefault();
alert($(this).data("link"));
var link = $(this).data("link");
console.log(link);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="aclick">
<img data-link="petroliumjelly.php" src="productsimgs/petroliumjelly.png" class="img-responsive" id="2">
</a>
You click event must be on the image tag as well.
<script type="text/javascript" language="javascript">
$(".aclick img").click(function (e) {
e.preventDefault();
alert($(this).attr("data-link"));
var link = $(this).attr("data-link");// tried both
console.log(link);
});
</script>
working Fiddle
$(".aclick img").click(function (e) {
e.preventDefault();
alert($(this).attr("data-link"));
var link = $(this).attr("data-link");// tried both
console.log(link);
});
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<a href="#" class="aclick">
<img data-link="petroliumjelly.php" src="productsimgs/petroliumjelly.png" class="img-responsive" id="2">
</a>
Img is the child element of a.so try with $(this).children('img') .And use use with data('link') instead of data('data-link')
$(".aclick").click(function(e) {
e.preventDefault();
alert($(this).children('img').attr("data-link"));
var link = $(this).children('img').data("link"); // tried both
console.log(link);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="aclick">
<img data-link="petroliumjelly.php" src="productsimgs/petroliumjelly.png" class="img-responsive" id="2">
</a>
this refers to the anchor tag not the image tag.
use this
$('.aclick img').attr("data-link");
On (.aclick).click() data-link will return undefined, the data-link is on the image, get the image using .find()
The find() method returns descendant elements of the selected element.
To get the value of data* use .data()
The data-* attributes is used to store custom data private to the page or application.
.data() Store arbitrary data associated with the matched elements or return the value at the named data store for the first element in the set of matched elements.
$(".aclick").click(function (e) {
e.preventDefault();
var link = $(this).find('img').data('link');
console.log(link);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="aclick">
<img data-link="petroliumjelly.php" src="productsimgs/petroliumjelly.png" class="img-responsive" id="2">
</a>

How to pass <li>text without replace the text on textbox

I got school homework for today. I can pass the emoji to a textbox already but it will replace the previous emoji or text on the textbox if clicked. I want to know how to not replace the textbox text if I clicked and able to keep input emoji or text. Sorry for my bad english if you guys don't understand.
$(document).ready(function () {
$("ul").hide();
$("input.btnemoji").click(function () {
$("ul").toggle();
$("ul.emoji li").click(function () {
$("#ToSend").val($(this).text());
});
});
});
<asp:Textbox id="ToSend" runat="server" Width="300px"></asp:Textbox>
<input type="button" class="btnemoji" value="😀" />
<ul class="emoji">
<li>😀</li>
<li>😂</li>
<li>😎</li>
<li>😍</li>
<li>😁</li>
</ul>
To add to the existing value you need to append to the val() in the input instead of replacing it each time. To do this you can pass a function to the val() method which handles the appending for you, like this:
$(document).ready(function() {
$("ul").hide();
$("input.btnemoji").click(function() {
$("ul").toggle();
});
$("ul.emoji li").click(function() {
var $li = $(this);
$("#ToSend").val(function(i, v) {
return v + $li.text();
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="ToSend" width="300px">
<input type="button" class="btnemoji" value="😀" />
<ul class="emoji">
<li>😀</li>
<li>😂</li>
<li>😎</li>
<li>😍</li>
<li>😁</li>
</ul>
Also note that I moved the $("ul.emoji li").click() handler outside of the one for .btnemoji as you were repeatedly adding new event handlers each time the ul was toggled.
Here is the shortest method. All you need is to use this:
$("#ToSend").val($("#ToSend").val()+$(this).text());
$(document).ready(function () {
$("ul").hide();
$("input.btnemoji").click(function () {
$("ul").toggle();
});
$("ul.emoji li").click(function () {
$("#ToSend").val($("#ToSend").val()+$(this).text());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="ToSend"/>
<input type="button" class="btnemoji" value="😀" />
<ul class="emoji">
<li>😀</li>
<li>😂</li>
<li>😎</li>
<li>😍</li>
<li>😁</li>
</ul>
$("#ToSend").append($(this).text());
User append function without using

switch value with div

I want to make a div with value like a button then input it to submit value the code look like this.
<div id="btn" name="Dragon" style="width:20px; height:20px; border:1px solid black;"></div>
<input type="submit" id="submita" value="">
<script>
var btn = document.getElementById('btn');
btn.addEventListener('click', function( event ){
document.getElementById("submita").value = event.target.name;}, false);
}
</script>
the code take a value from div's name atribut then input it to submit value. if it with button element it work but div doesn't work.
how to this?
You need to use the getAttribute() DOM method as name is not a property of a div:
JSFiddle: http://jsfiddle.net/TrueBlueAussie/JM9nH/9/
var btn = document.getElementById('btn');
btn.addEventListener('click', function (event) {
document.getElementById("submita").value = event.target.getAttribute("name");
}, false);
Note: Your example code also has an extra closing } at the end which I removed.
Use attr in jquery to get the name of div
$("#btn").click(function () {
$("#submita").val($(this).attr("name"));
});
DEMO

jquery script to select previous brother

hi im using jquery mobile this is the code
<form class="ui-filterable">
<input id="filterBasic-input" data-type="search">
</form>
<div data-role="collapsible">
<h2><span>paris</span><span class="pays">france</span>
<a class="gene02"data-role="button" data-inline="true" data-mini="true">generique</a></h2>
<p>code:24</p>
</div>
</li>
<li>
<div data-role="collapsible">
<h2><span>marakeche</span>
<span class="pays">maroc</span>
<a class="gene02"data-role="button" data-inline="true" data-mini="true">generique</a>
</h2>
<p>code:3300</p>
</div>
</li>
i want wen i click on class="gene02" it will take a valu of a precedent span with class pays and put it on a form class="ui-filterable" i try to do this form class ui-filterable
$(document).ready(function () {
$(".gene02").click(function () {
$("#filterBasic-input").val($(".pays").html());
});
});
but it only select france not maroc in second div . thx for help
You can get it like:
$(".gene02").click(function()
{
var $brotha = $(this).parent().find(".pays");
//$brotha is your element
});
http://jsfiddle.net/p7ENh/
http://jsfiddle.net/p7ENh/1/
$(".gene02").click(function () {
$("#filterBasic-input").val($(this).prevAll(".pays").html());
});
If it's always the first previous sibling you can also use $(this).prev() instead.
Basically from a class selector or a collection of elements, if you access any of its properties/values, it will return the value of the first one in the collection only.
Try,
$(document).ready(function() {
$(".gene02").click(function() {
var xOutput = '';
$('.pays').each(function(){ xOutput += $(this).html(); });
$("#filterBasic-input").val(xOutput);
});
});
$(document).ready(function() {
$(".gene02").click(function() {
$("#filterBasic-input").val($(this).closest('div').find('.pays').html());
});
});

Jquery changing div text value upon clicking on li items

I am building a theme selector for maps and want to reflect the currently selected theme.
The code seems to work but never returns the value of the "li" item, it always returns "s-thumbs" for whatever "li" item I click on. I tried using the .closest() method but to no avail.
I'm following this article.
<script language="javascript">
$("ul.s-thumbs").live("click", function(event) {
$("#theme_title").text(
$(this).closest("ul.s-thumbs li").attr("class")
);
});
</script>
<div id="theme">You have selected the <div id="theme_title"></div> Theme</div>
<div class="container_16" id="themebg">
<!--<div class="grid_1"> <a href="" "img" src="/styles/image/leftarrow.png" id="leftarrow" alt=""/></div>-->
<div class="grid_16 slider-wrapper">
<ul class="s-thumbs">
<li class="Default"> <img src="/styles/image/thumbs/default.png" alt="" />Default</li>
<li class="Hatchery"> <img src="/styles/image/thumbs/hatchery.png" alt="" />Hatchery</li>
</ul>
</div>
$("ul.s-thumbs").on("click", "li", function() {
var myText = $(this).attr("class");
alert( myText );
$("#theme_title").text( myText );
});
Demo jsFiddle
Use the .on() metod: http://api.jquery.com/on/ adding the specific element after the event (click)
This is a new replacement for the (today) deprecated .live() method.
$('ul.s-thumbs li').on('click', function(){
var getClass = $(this).attr('class');
$("#theme_title").text(getClass);
});
Demo link: http://jsfiddle.net/ChaseWest/w2tCE/4/
$("ul.s-thumbs").on("click", "a", function(event) {
var txt = $(this).closest("ul.s-thumbs li").attr("class");
$("#theme_title").text(txt);
});
NOTE live() has been deprecated.
Add the event handler to the li instead of the ul. I also used on which is the preferred method in Jquery 1.7+
$("ul.s-thumbs li").on("click", function(event) {
$("#theme-title").html(
$(this).attr("class")
);
});
Demo: http://jsfiddle.net/euSye/1/
<script language="javascript">
$(document).ready(function() {
$(".s-thumbs").on("click", "a", function(e) {
$("#theme_title").text( $(e.target).parent("li").attr("class") );
});
});
</script>

Categories

Resources