I'm trying to set up a javascript click detector.
If the person clicks part 2 without clicking 'link1' or 'link2' an alert will pop up telling him to click one of the links.
If the person clicks a link he should be allowed to the thankyou page.
My problem is it doesn't ever let the user pass even if he clicked one of the links.
<a id="postos" href="http://link1.com">Link1</a><br>
<a id="postos" href="http://link2.com">Link2</a><br>
<script src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
<script>
$("#postos").click(function () {
$("#linkos").attr('href', 'http://example.com');
});
</script>
Part 2 Click <a id="linkos" href='javascript:window.alert("please click a link");'> Here </a>
You can't have two elements with the same id.
Change it to a class:
<a class="postos" href="http://link1.com">Link1</a><br>
<a class="postos" href="http://link2.com">Link2</a><br>
$(".postos").click(function () {
$("#linkos").attr('href', 'http://example.com');
});
It is invalid to have multiple times the same ID.
Add a class to your first links and select them using the class:
<a class="link" href="http://link1.com">Link1</a><br>
<a class="link" href="http://link2.com">Link2</a><br>
$(".link").click(function (e) {
$("#linkos").attr('href', 'http://example.com');
});
DEMO
Id should be unique, so better user classes:
<a class="postos" href="http://link1.com">Link1</a><br>
<a class="postos" href="http://link2.com">Link2</a><br>
JS
$(".postos").click(function () {
$("#linkos").attr('href', 'http://example.com');
});
id must be unique, change from id to class:
HTML:
<a class="postos" href="http://link1.com">Link1</a><br>
<a class="postos" href="http://link2.com">Link2</a><br>
<a id="linkos" href='http://example.com'> Here </a>
jQuery:
$('.postos').click(function(){
$(this).data('clicked', 'yes');
})
$('#linkos').click(function(){
if ($('.postos[data-clicked="yes"]').length == 0)
{
alert("please click a link");
return false;
}
});
Use this:
<script>
var next = function () {
var confirmWindow = confirm("You want to go to a_website.");
if (confirmWindow) {
return true;
}
return false;
};
</script>
Text here...
Once the button is clicked (onclick attribute), it'll call a function.
Then the function will just ask the user if they want to go there.
The true or false will be returned depending on what button it clicks.
Then the if statement will just see if it's true or false.
Then the correct code will be ran.
Is this what you wanted?
Related
<script>
$(document).on('click','a',function() {
$.get('updateusers', function(data) {
$('#div1').html(data);
});
});
</script>
This script works great for updating particular div, but the problem is that it can be activated by every link on the page. This script even affected by <input type="submit"> tag.
For example, let page contains two link
<a id="link1" href="#">Update the link1 div</a>
<a id="link2" href="#">Update the link2 div</a>
So how to change the script to be affected only by specific link, for example only by link1 ?
Try something like this:
$(document).on('click','a',function(e) {
if ($(e.target).attr('id') == 'link1') {
$.get('updateusers', function(data) {
$('#div1').html(data);
});
}
if ($(e.target).attr('id') == 'link2') {
$.get('updateusers', function(data) {
$('#div1').html(data);
});
}
});
This will do a check to see if the clicked element has the ID you want.
this is my markup, from my sublayout:
<div class="main-nav">
<a id="tabmovies" href="#" class="main-nav-tab active">Movies</a>
<a id="tabtheatres" href="#" class="main-nav-tab">Theatres</a>
</div>
</div>
and this is my .js ... which the alert indicates the click function is working
// Toggle between movies and theatres
$("#tabmovies").click(function () {
alert("you have clicked movies");
$("tabmovies").addClass("active");
$("tabtheatres").removeClass("active");
});
$("#tabtheatres").click(function () {
alert("you have clicked theatres");
$("tabmovies").removeClass("active");
$("tabtheatres").addClass("active");
});
but the class "active" is not being added or removed. Am I missing something?
To select an element by ID in jquery use "#theID" as selector.
Change
$("tabtheatres").addClass("active");
to
$("#tabtheatres").addClass("active");
Try this,
$("#tabmovies").click(function() {
alert("you have clicked movies");
$("#tabmovies").addClass("active");
$("#tabtheatres").removeClass("active");
});
$("#tabtheatres").click(function() {
alert("you have clicked theatres");
$("#tabmovies").removeClass("active");
$("#tabtheatres").addClass("active");
});
You need to add # before the id selector.
FIDDLE DEMO
Change your code as following:
// Toggle between movies and theatres
var $tabmovies = $("#tabmovies"),
$tabtheatres = ("#tabtheatres")
$tabmovies.click(function () {
alert("you have clicked movies");
$tabmovies.addClass("active");
$tabtheatres.removeClass("active");
});
$tabtheatres.click(function () {
alert("you have clicked theatres");
$tabmovies.removeClass("active");
$tabtheatres.addClass("active");
});
DEMO
You are not selecting anything because you should specify selector correctly. In case of id selector use # symbol. For class selector use . Learn about jquery selectors here. And avoid multiple queries in your code. Select once and use reference many time. It will give you performance gain.
I want to call 2 different jquery functions to hide links
<a href="">.zip file, first link
</a>
<script>
$("a").click(function() {
location.href="first.location";
return false;
});
</script>
<a href="">.tar.gz file, second link
</a>
<script>
$("a").click(function() {
location.href=="second.location";
return false;
});
</script>
How can I call the 2 functions so that I call the first one clicking the first link and the second one clicking the second link?
Thanks a lo
This is not the best solution. For best results you might want to restructure your html and add some sort of classes and IDs to the links or their parent to identify them. But this will work
For the first link
$("a:eq(0)").click(function() {
location.href="first.location";
return false;
});
and for the second link
$("a:eq(1)").click(function() {
location.href=="second.location";
return false;
});
If you set the href in the markup there is no need for JQuery or Javascript.
<a href="first.location">.zip file, first link
</a>
<a href="second.location">.tar.gz file, second link
</a>
You can use the :eq() Selector here like:
// Clicking the first link
$("a:eq(0)").click(function () {
location.href = "first.location";
return false;
});
// Clicking the second link
$("a:eq(1)").click(function () {
location.href = "second.location";
return false;
});
Like it has already been suggested the best way to do it is to have different id's for these a tags. But if for some reason you don't want to assign ids(why on earth would you do that?) you could do the following:
Wrap the anchor tags in a div and give it an id like this
<div id="myDiv">
First Link
Second Div
</div >
Then use jQuery to do the linking:
<script>
$(function(){
$("myDiv").children(a:first-child).click(function(){
// Do stuff here
});
$("myDiv").children(a:last-child).click(function(){
// Do stuff here
});
});
</script>
you can introduce an id attribute to your links. and then trigger the events based on the id of the element.
<a href="" id='link1'>.zip file, first link
</a>
<script>
$("#link1").click(function() {
location.href="first.location";
return false;
});
</script>
<a href="" id='link2'>.tar.gz file, second link
</a>
<script>
$("#link2").click(function() {
location.href=="second.location";
return false;
});
</script>
Give link in html(href)
$("a").click(function()
{
location.href = $(this).attr('href');
return false;
});
I think this might help:
<a id="first" href="">.zip file, first link</a>
<script>
$("first").click(function() {
location.href="first.location";
return false;
});
</script>
<a id="second" href="">.tar.gz file, second link </a>
<script>
$("second").click(function() {
location.href=="second.location";
return false;
});
</script>
$("a:eq(0)").click(function() {
location.href="first.location";
return false;
});
$("a:eq(1)").click(function() {
location.href=="second.location";
return false;
});
I have a question regarding the double submission.
I have a multiple <a href = "">.
I want to disables all the <a href=""> if i click in one of the <a href= "">
Code:
<a href="dashboard.php" id ="submitID" class="submit" >Dashboard </a>
<a href="orderList.php" id ="submitID" class="submit" >Order List</a>
New Order
First, please fix your ids to be unique.
If you're using jQuery versions 1.4.3+:
$("a.submit").click(function() {
$("a.submit").bind('click', false);
});
If not, bind function() { return false; }. Then you can also
$("a.submit").unbind('click')
when you want them to work again.
Welcome to Stack Overflow.
First of all, you should never have multiple DOM elements with the same ID.
Second of all, set a variable in a bind to the submit class (the bind is using jquery), and flip it if you submit.
Include jquery with a script tag and then wrap your javascript in document ready
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript>
$(document).ready(function () {
$('.submit').bind('click', function () {
var isSubmitted = false;
if (isSubmitted === false) {
$.get($(this).attr('href'), function () {
isSubmitted = true;
});
}
});
});
</script>
This is of course assuming you want some ajax style functionality. If not, you shouldn't really be worried if you have a link since you'd be posting to a new page
Jquery:
var count=0;
$(".submit").click(function(){
if(count>0){
return false
}
++count;
});
HTML
<a href="dashboard.php" id ="submitID1" class="submit" >Dashboard </a>
<a href="orderList.php" id ="submitID2" class="submit" >Order List</a>
New Order
var submitStatus = false;
$('a.submit').click(function(e){
if (!submitStatus) {
alert('clicked');
submitStatus = true;
} else {
e.preventDefault();
}
});
You can try it here: http://jsfiddle.net/p8a5s/
And dont use the same IDs for different DOM elements, of course
I have two buttons on my page:
<a class="button accessLink"
id="loginLink"
data-disabled="false"
data-href="/MyAccount/Access/Login"
title="Login">Login</a>
<a class="button accessLink"
id="registerLink"
data-disabled="false"
data-href="/MyAccount/Access/Register"
title="Register">Register</a>
How can I use jQuery to make it so that if one of the buttons is clicked and if data-disabled is set to false then it:
Sets the data-disabled of both to "true"
Calls a function called dialog like this: dialog(this).
I also don't want the click to event to work.
$('a[data-disabled]').click(function(e) {
if (!$(this).data('disabled')) {
e.preventDefault();
$(this).attr('data-disabled', 'true');
dialog(this);
}
});
This should work:
$("a.accessLink").click(function(e){
e.preventDefault();
if($(this).data("disabled") == false) {
$("a.accessLink").data("disabled", true);
dialog(this);
}
});