In below code i am trying to get button href attribute value and show it in alert box using jquery.
When i click on button because of href value(i.e. $value['3']) it will redirect to our retailer link,But by using jquery when i get button link without page refresh by using href attribute it only take first link on any button link.
Actually i wan't that particular button link without page refresh.
<html><head>
<script src="jquery-1.11.3.js"></script></head>
<script>
$(document).ready(function(){
$('.button').click(function(){
var href = $('a').attr('href');
alert(href);
})
});
</script><body>
<?php
$data=array(
array("HTC desire 210 black","Flipkart",20000,"http://www.flipkart.com"),
array("HTC desire 326 white","Snapdeal",22000,"http://www.snapdeal.com"),
array("HTC desire 516","Amazon",23000,"http://www.amazon.in")
);
foreach($data as $value)
{
?>
<input type="button" value="Get link's href value" class="button" /><br/><br/>
<?php
}
?></body></html>
Try:
$('.button').click(function(){
var href = $(this).parent('a').attr('href');
alert(href);
})
change in script
<script>
$(document).ready(function(){
$(document).on('click','.button',function(){
var href = $(this).attr('data-link');
alert(href);
})
});
</script>
change in html
<input type="button" value="Get link's href value" class="button" data-link="<?php echo $value['3']; ?>"/><br/><br/>
Try This this is work fine for me.
$(document).ready(function(){
$('.button').click(function(){
var href = $(this).closest('a').attr('href');
alert(href);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<button class="button">Google</button>
<button class="button">Yahoo</button>
<button class="button">Bing</button>
So you want to alert the href value of a link when you click on it? use preventDefault();
$(document).ready(function(){
$('a').click(function(e){
alert( $(this).attr('href') );
e.preventDefault();
return false;
})
});
Or if you want to click on a button only then
$(document).ready(function(){
$('.button').click(function(e){
alert( $(this).parent('a').attr('href') );
e.preventDefault();
return false;
})
});
Related
code:
<a class='link' href='javascript:void(0)' id='".str_replace(" ",'-',$sub_head)."'>
<i class='fa fa-angle-double-right'></i> ".$sub_head."
</a>
<input type='text' name='tag' class='tag' value='' />
<script>
$(document).ready(function(){
$(".link").bind("click", function() {
link = $(this).attr( 'id' );
tag = $(".tag").val(link);
alert(tag);
});
});
</script>
In this code I have create a link where class has to be define as link and inside id having dynamic value. Now what I want when I click on link then id of tag go to input field i.e tag. Now what happen When I click on link it show me [object Object] in alert box but I want value. So, How can I do this?Please help me.
Thank You
Because $(".tag").val(link) set value for $(".tag") and it return object you should use .val() to get value of $(".tag") or you can alert value directly with alert(link); it return same value as $(".tag").val()
$(document).ready(function() {
$(".link").bind("click", function() {
var link = $(this).attr('id');
$(".tag").val(link);
val = $(".tag").val();
alert(val);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class='link' href='javascript:void(0)' id='5678'>
<i class='fa fa-angle-double-right'></i> Click
</a>
<input type='text' name='tag' class='tag' value='' />
You can use this code, it's working fine for your requirements.
$(document).ready(function(){
$(".link").on("click", function() {
var link = $(this).attr( 'id' );
var tag = $(".tag").val(link);
alert($(".tag").val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class='link' href='javascript:void(0)' id='id_1'>
<i class='fa fa-angle-double-right'></i> Sub Heading
</a>
<input type='text' name='tag' class='tag' value='' />
This line makes the input tag get a new value, but also returns just the input element:
tag = $(".tag").val(link);
Then the next line is actually alerting the entire input element object:
alert(tag);
To only alert the value of the input element, write:
tag = $(".tag")
tag.val(link);
alert(tag.val());
You can see the difference between val(arg) and val() in jquery's documentation at http://api.jquery.com/val/.
The problem is when I press left-nav "a" element it should show() me the div element, but its going to hide() it automatically. The "a" element is created with php and it has href of ?id=$product, when I press class closebtn "a" element in side my navbar it show()'s me the div.
JavaScript:
$(document).ready( function() {
$(".sisu").hide();
$('.vasaknav a').click( function() {
$(".sisu").show();
});
});
PHP:
<?php
$kask=$yhendus->prepare("SELECT id,Product from store GROUP BY Product");
$kask->bind_result($id, $Product);
$kask->execute();
while($kask->fetch()){
echo "<a href='?id=$Product' style='color:red;'>".htmlspecialchars($Product)."</a>";
}
?>
HTML:
<div id="Myvasaknav" class="vasaknav">
×
<?php require('php/navlist.php'); ?>
<a href=# >test</a>
</div>
<span style="font-size:30px;cursor:pointer" onclick="openNav()" id="click">☰</span>
To prevent default action when clicking <a> (which is reloading page / redirecting elsewhere) you should change your code like:
$(document).ready( function() {
$(".sisu").hide();
$('.vasaknav a').click( function() {
$(".sisu").show();
return false; // prevent default action
});
});
With this you will stay on the same page and .sisu element will be shown.
Let's say I have this inner link which is positioned inside a hidden div (display:none) - the div toggles when a button is clicked:
<a name="here">Show me!</a>
How can I make the element visible when somebody enters the url: mypageurl#here, without clicking the toggle button (make it visible by default when this specific link is entered)?
$().ready(function () {
var hash = $.trim(window.location.hash);
if (hash != '') {
var prt = $('[name="' + hash.substr(1) + '"]').parent();
prt.show();
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="display:none;"><a name="here">Show me!</a></div>
Full code!
You could use the CSS "visibility:hidden", then use JavaScript to change that to "visibility:visible" when someone enters a certain phrase.
Alternatively, you could just use display: ""; or display:block on the "display:none" div when the same action occurs, again using some JavaScript.
You can use the below script.
<script>
$(document).ready(function(){
var loc = document.location.hash;
if(loc == "#test")
{
$('#test').show();
}
});
</script>
Here is the source code of a simple page that I made:
<html>
<script src="http://code.jquery.com/jquery-latest.min.js "></script>
<body>
<div id="hide" style="display:none">
<a name="here">Show me!</a>
</div>
</body>
<script>
$(document).ready(function(){
if(document.location.href.search("#hide")>0){
$("#hide").toggle();
}
});
</script>
</html>
It will show the div with the id hide if the page has the text "#hide", else it remains hidden.
how do i use a html check box to toggle two different links in a html button?
(IE) a button contains two links. with the use of a check box, if set to true, on click of button should go to xyz site and when check box false, on click of same button should go to abc site ?
Please help as i am new to j query. using this on a share point site.
This may help you,
$('button').on('click',function(){
var url=$('input:checked').length ? 'abc.com' : 'xyz.com';
alert(url);// use window.location.href=url; to open that url
});
Try Demo
On checkbox change switch link href:
HTML
<input type="checkbox">
<a href="#" data-url1='lala' data-url2='lolo'>button</a>
JQUERY
$(function(){
$('a').attr('href',$('a').data('url1'));
$('input').on('change',function(){
if($(this).is(':checked')){
$('a').attr('href',$('a').data('url2'));
}else{
$('a').attr('href',$('a').data('url1'));
}
})
})
This is the proper code try and run it in your browser, you can even try this in jsfiddle
Two concepts here used is how to check the checkbox checked or not in jquery, there are many ways i illustrate the one way by using is(':checked')
and other is binding the click event of a button, which is quite simple. I hope you like it.
<html>
<head>
<title></title>
</head>
<body>
<input type="checkbox" id="myCheckbox" />
<button id="myButton">Click</button>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#myButton').click(function(){
if($('#myCheckbox').is(':checked')){
window.location.href = "http://www.google.co.in";
}else{
window.location.href = "http://jforjs.com";
}
})
})
</script>
</body>
</html>
Demo
HTML
<input id="choice" name="choice" type="checkbox" data-yes="http://www.xyz.com" data-no="http://www.abc.com"/>
<button id="submit">submit</button>
jQuery
$('#submit').on('click',function(){
var url ='';
if($('#choice').is(':checked')){
url = $('#choice').data('yes');
}
else{
url = $('#choice').data('no');
}
alert(url);
//Uncomment below for redirecting automatically to the desired url
//location.href = url;
});
I am building a form which will be loaded in popup by clicking on a text/image. This is my code and it is not working! Any ideas
<div>
Remind me
</div>
<div class="map-popup" id="remindme" style="display:none;">
<form>
<label for="remind_me_email" class="required"><em>*</em>E-Mail Address</label>
<div class="input-box">
<input type="text" id="remind_me_email" title="E-Mail Address" />
</div>
</form>
<div>
<button type="submit" class="button" id="remind_me_submit"><span>Submit</span> </button>
</div>
</div>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#remindmelink').click(function(){
e.preventDefault();
jQuery('#remindme').dialog('open');
return false;
});
});
</script>
$(document).ready(function(){
//open popup
var myPoplink = document.getElementById('remindmelink');
$(myPoplink).on('click',function(){
alert('Hello!'); // to be replaced with $('#remindme').dialog('open');
});
});
invalid $('.myPoplink') selector. i.e there is no class .myPoplink found in the HTML. Try using $('#remindmelink')
$(document).ready(function(){
//open popup
$("#remindmelink").on('click',function(event){
event.preventDefault();
alert('Hello!'); // to be replaced with $('#remindme').dialog('open');
});
});
Just in case put href="#" here is the
jsfiddle
$(document).ready(function(){
//open popup
$(document).on('click','#remindmelink',function(){
alert('Hello!'); // to be replaced with $('#remindme').dialog('open');
return false;
});
});
It was jQuery conflict as some javascript was copied inline in some other pages! Solved by removing the inline scripts and using
var j = jQuery.noConlifct();
j(document).ready(function(){
j('#remindmelink').click(function(){
j('#remindme').fancybox();
});
});
You can try this:
$(document).on('click','#remindmelink',function(e){
e.preventDefault();
alert('Hello!'); // to be replaced with $('#remindme').dialog('open');
});
UPDATE:
jQuery(document).ready(function(){
jQuery('#remindmelink').click(function(){
e.preventDefault();
jQuery('#remindme').show();
jQuery('#remindme').dialog('open');
return false;
});
});
DEMO