How can i prevent double submission of <a href="">? - javascript

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

Related

Override inline click event in jQuery

I have links in a navigation that look similar to this
<a id="navform" href="#" tabindex="-1" onclick="mojarra.ab(this,event,'action','#form','content');return false" class="active"><span>Policy</span></a>
I am checking for form changes and trying to disable the onclick event for the links when there are changes and enable them if once the user saves the form.
$(':input').on('change', function() {
formChanged = true;
});
$('nav a').on('click', function(e){
if(formChanged){
e.preventDefault();
$(this)[0].onclick = null;
}
});
I have tried preventDefault and nulling the event according to some answers I found on here, but no luck. Could someone please tell me how to fix this?
UPDATE:
Thanks to all your answers, I got some ideas and figured how to fix it:
if($('.policy-form')){
$(':input').on('change', function() {
formChanged = true;
$('nav a').each(function(){
var handler = $(this).attr('onclick');
$(this).removeAttr('onclick');
$(this).on('click',function(){
if(formChanged){
invokeDialog("warning");
formChanged = false;
$(this).attr('onclick', handler);
}
});
});
});
Plain JavaScript one-liner
Use
document.getElementById('navform').onclick = null;
This is because only the last onclick defined will run and here we override it with null.
Note that it would be way better if you would just avoid onclick in your HTML, or if you would at least modify mojarra.ab() appropriately, so that it performs any actual actions only when you desire.
Demo:
document.getElementById('one').onclick = null;
<a id="one" href="#" onclick="alert(true)">Doesn't alerts</a>
<br/>
<a id="two" href="#" onclick="alert(true)">Does alerts</a>
EDIT
Vide comment, here is an example of toggling old onclick on and off:
var button = document.getElementById('button');
var oldOnclick = button.onclick;
document.getElementById('toggle').addEventListener('click', function() {
button.onclick = button.onclick !== null ? null : oldOnclick;
})
<input id="button" type="button" onclick="alert('Test')" value="Alert"/>
<br/>
<br/>
<input id="toggle" type="button" value="Toggle above button"/>
$('nav a').on('click', function(e){
$(this).removeAttr('onclick'); // add this line to remove inline onclick
if(formChanged){
e.preventDefault();
$(this)[0].onclick = null;
}
});
You can use the .off() method:
$('nav a').off('click');
One good practive is to add an namespace to your events.
$('nav a').on('click.somenamespacehere', function(e){
});
...
$('nav a').off('click.somenamespacehere');
In this case, you can specify later which events you want to remove (with the off method)
You can't do it that way because the on('click' event and the inline one are two different events and there's no way to tell which would happen first. But, you could replace the inline handlers with your own handler like so
on('click', function(e) {
if (formChanged) {
mojarra.ab(...);
}
});
With an inline click function there are many possibilities to control the logical flow or order of executing the functions attached to the same event.
One possibility is to change the inline code so that you can define a first function and based of the result of this you may decide if execute or not the next function.
My snippet:
// assuming the inline onclick function is like:
function mojarra_ab(_this, event, _action, _form, _content) {
$('<p>Executed function: mojarra_ab</p>').appendTo('body');
}
function myNewClick() {
$('<p>Executed function: myNewClick</p>').appendTo('body');
if ($('#yesNo option:selected').val() == 'true') {
return true; // return true to execute the mojarra_ab function
}
return false; // return false if you don't need to execute the mojarra_ab function
}
$(function () {
$('nav a').attr('onclick', function(index, attr) {
return 'if (myNewClick() == true) {' + attr + '}';
});
});
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
Choose if to run myNewClick and then mojarra_ab: <select id="yesNo">
<option value="true" selected>True</option>
<option value="false">False</option>
</select>
<nav>
<a id="navform" href="#" tabindex="-1" onclick="mojarra_ab(this,event,'action','#form','content');return false"
class="active"><span>Policy</span></a>
</nav>

How do I unobtrusivify this javascript?

I pulled this simple javascript function for showing or hiding a div from here. The function is:
function ReverseDisplay(d) {
if(document.getElementById(d).style.display == "none"){
document.getElementById(d).style.display = "block";
}else{
document.getElementById(d).style.display = "none";
}
}
This requires making a link like this:
<a href="javascript:ReverseDisplay('uniquename')">
Click to show/hide.
</a>
It's my understanding that having the link call javascript like that is bad practice. I'd like to make the javascript unobtrusive following https://stackoverflow.com/a/688228/2063292. But, that template provides a way to make some javascript execute for any link with a specified ID (e.g. all links with id="test" will call some function). I need to have a way to allow any link to pass the name of a specific div to the function, as in the original example, but I don't know how to do it.
I would prefer the ID of the div to be in the hash of the link:
Live JavaScript Demo
<a class="reversible" href="#arbitrarydivId">
Click to show/hide.
</a>
using
function ReverseDisplay() {
var divId=this.hash.substring(1), div=document.getElementById(divId);
div.style.display = div.style.display=="none"?"block":"none";
return false;
}
or
Live jQuery Demo
$(function() {
$(".reversible").on("click",function(e) {
e.preventDefault();
$(this.hash).toggle();
});
});
Older suggestions
window.onload=function() {
var links = document.querySelectorAll(".reversible");
for (var i=0;i<links.length;i++) {
links[i].onclick=ReverseDisplay;
}
}
using
<a class="reversible" href="#">
Click to show/hide.
</a>
To hide something else, try
function ReverseDisplay() {
var divId=this.getAttribute("data-div"), div=document.getElementById(divId);
div.style.display = div.style.display=="none"?"block":"none";
return false;
}
using
<a class="reversible" data-div="arbitrarydivId" href="#">
Click to show/hide.
</a>
In jQuery the whole thing would be
$(function() {
$(".reversible").on("click",function(e) {
e.preventDefault();
$("#"+$(this.data("div")).toggle();
});
});
Depends on how unobtrusive you want to be. You could do this (using jquery for shorthand purposes):
<a href="#" id="someUniqueId1">
Click to show/hide.
</a>
<a href="#" id="someUniqueId2">
Click to show/hide.
</a>
<script>
$("#someUniqueId1").click(function(){ReverseDisplay("#DivICareAbout");});
$("#someUniqueId2").click(function(){ReverseDisplay("#AnotherDivICareAbout");});
</script>
But then you need to specify each and every link in your javascript. So I would recommend being a little more obtrusive, not with JS but with the href. Like this:
HTML:
<div id="foo">I am foo</div>
<div id="bar">I am bar</div>
<a class="reverselink" href="foo">Click to show/hide.</a>
<a class="reverselink" href="bar">Click to show/hide.</a>
JS:
function ReverseDisplay(d) {
if (document.getElementById(d).style.display == "none") {
document.getElementById(d).style.display = "block";
} else {
document.getElementById(d).style.display = "none";
}
}
$(function () {
$(".reverselink").click(function(e){
ReverseDisplay($(this).attr("href"));
return false;
});
});
See this fiddle: http://jsfiddle.net/V73uw/ (again, using jquery for shorthand. It's trivial to do with vanilla js too).
Use this javascript to do all that.
function processName(aName){
//do work like hiding.
console.log(aName);
}
var body = document.getElementsByTagName('body')[0];
body.addEventListener("click", function(event){
if(event.target.nodeName === "A"){
//do work with anchor element
processName(event.target.dataset.div);
}
event.preventDefault();
});
Then use this html as your links.
some link
You can define your javascript for this once then all the links only need data-div to send a name to processName.
Only bad thing is data attributes are really new for html so it might, or might not be what you want.
By the way. This is actually similar to how KnockoutJS works. You might want to try that out.

how to call jquery function with different <a href="">

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;
});

Disable image link on click

I have a image that links to a page. This is a process button which can take up to 20 seconds to run.
I want to prevent the user from pushing it more than once.
How would I write a Javascript that when the button is pushed, it would follow the hyperlink, but the link for the button would disable, and the image would change?
<script>
function buttonClicked()
{
document.getElementById('buttonImage').src = 'new-image.jpg';
document.getElementById('buttonId').disabled = true;
}
</script>
<a id="buttonId" href="next-page.html" onclick="return buttonClicked()"><img id="buttonImage" src="image1.jpg"></a>
From your question, it sounds like your "button" is the image that you click on...if that's true then you can use the following:
<a id="my_link" href="/page_to_vist_onclick"><img id="my_image"></a>
Then your javascript would be:
document.getElementById('my_link').onclick = function() {
document.getElementById('my_link').disabled = true;
document.getElementById("my_image").src='the_path_to_another_image';
};
On click, remove the href attribute from the a element.
I ended up going with the following:
$(document).ready(function() {
var isSubmitted = false;
$("#submit").click(function(e) {
if ( ! isSubmitted ) {
isSubmitted = true;
var src = $(this).attr("src").replace("gold","red");
$(this).attr("src", src);
} else {
e.preventDefault();
}
});
});
Here is a really simple one for you
in your JS
function Create(){
document.write('<INPUT disabled TYPE="button" value="Click Me!">');
}
in your HTML
<INPUT TYPE="button" value="Click Me!" onclick="Create()">
If you are ready to use jQuery, then here is another solution.
$("selectorbyclassorbyIDorbyName").click(function () {
$("selectorbyclassorbyIDorbyName").attr("disabled", true).delay(2000).attr("disabled", false);
});
select the button and by its id or text or class ... it just disables after 1st click and enables after 20 Milli sec
Works very well for post backs n place it in Master page, applies to all buttons without calling implicitly like onclientClick
you can use this.
<script>
function hideme()
{
$("#buttonImage").hide();
}
</script>
<a id="buttonId" href="next-page.html" onclick="return hideme()"><img id="buttonImage" src="image1.jpg"></a>
if you don't want to hide image please use this..
$('#buttonImage').click(function(e) {
e.preventDefault();
//do other stuff when a click happens
});
That will prevent the default behaviour of a hyperlink, which is to visit the specified href.
Let's make a jquery plugin :
$.fn.onlyoneclick=function(o){
var options=$.extend({src:"#"},o);
$(this).click(function(evt){
var $elf=$(this);
if( $elf.data("submitted") ){
evt.preventDefault();
return false;
}
$elf.attr("src", typeof(options.src) == 'function' ?
options.src($elf.attr("src"))
: options.src
).data("submitted",true);
});
}
$(".onlyoneclick").onlyoneclick({
src : function( src ){
return src.replace("gold","red");
}
})
on any button that should trigger only once :
<button ... class="onlyoneclick">tatatata... </button>
its simple...just one line of code :)
Onclick return false.

Javascript link click detector with alert window

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?

Categories