i have classic ASP form ,in that there is a hyperlink as follows.
<A href="javascript:ProcessForm()" >go here</A>
ProcessForm() submits the form to another page if validation is true.
function ProcessForm() {
if (validateform() == true) {
document.form1.action = "abc.asp";
document.form1.submit();
}
How can i disable the hyper link after a single click if validation is true? tried adding an id for the hyperlink and disabling it , then the text gets greyed out but on clicking the greyed text the page gets submitted multiple times. also tried with return false onclick.
Please suggest .
Set a global flag:
var hasSubmittedForm = false;
And then check that flag:
function ProcessForm() {
if (hasSubmittedForm) return false;
else hasSubmittedForm = true;
if (validateform() == true) {
document.form1.action = "abc.asp";
document.form1.submit();
}
}
Add an onclick event to your link:
<form name="form1" method="post" action="">
go here
</form>
<script type="text/javascript>
function validateform() {
return true;
}
function ProcessForm(link) {
if (validateform() == true) {
link.removeAttribute('href');
document.form1.action = 'abc.asp';
document.form1.submit();
}
}
</script>
You can make it with jQuery like this:
Here you go:
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function($){
$("#RemoveLink").click(function() {
var url = $(this).attr('href');
window.open(url);
$("#RemoveLink").removeAttr("href");
});
});
</script>
go here
Tested and working, tell me if this is not the functionality you want or mark my answer as answer for your question ;)
Related
I have a form that needs to get submitted. After clicking on submit I have a javascript alert/confirm that asks: Are you sure you want to submit the order?
If the user clicks "OK", I want to execute a JQuery method. But if they click "Cancel", I don't want to execute anything. Is there a way to do this?
Here's the JQuery I want to submit if they click "Ok":
<script>
$(document).ready(function() {
$('#saving').click(function() {
// do something
});
});
</script>
my button:
Save
The javascript popup:
function askUserIfTheyAreSure() {
var check = confirm("Are you sure you want to submit the order?");
if(check == true) {
document.forms["myform"].submit();
}
}
I suggest this way:
<script>
$(document).ready(function() {
$('#saving').click(function() {
if(confirm("Are you sure you want to submit the order?")){
document.forms["myform"].submit();
}else{
return false;
}
});
});
</script>
Do you mean, like this?
<script type='text/javascript'>
function askUserIfTheyAreSure(){
var check = confirm('Are you sure you want to submit the order?');
if(check == 1) {
// run you jQuery Function Here
}
else{
// do something else
return false;
}
}
$(document).ready(function(){
$('#saving').click(askUserIfTheyAreSure);
</script>
Really, I would use external JavaScript, so it's cached.
Just copy whatever you have inside "click" code into the "check==true" block.
It won't be executed if user clicks cancel.
function askUserIfTheyAreSure() {
var check = confirm("Are you sure you want to submit the order?");
if(check == true) {
// do something begin
// do something end
document.forms["myform"].submit();
}
}
Good Day Guys !
I have a problem here
I have 3
Prompt
Cert
Invoice
These 3 links load in the same page
if a click one link it will download.
but if i click it again i will not download
because i input a javascript like this
<script type="text/javascript">
{literal}
$(document).ready(function(){
var submitStatus = false;
$('a#promptButton').click(function(e){
if (!submitStatus) {
submitStatus = true;
} else {
e.preventDefault();
}
});
$('a#certButton').click(function(e){
if (!submitStatus) {
submitStatus = true;
} else {
e.preventDefault();
}
});
$('a#historyButton').click(function(e){
if (!submitStatus) {
submitStatus = true;
} else {
e.preventDefault();
}
});
$('a#invoiceButton').click(function(e){
if (!submitStatus) {
submitStatus = true;
} else {
e.preventDefault();
}
});
});
{/literal}
</script>
What will be my code if i want to download twice but i will prevent double submission?
Anybody can help me Please :(
This sample code may help to solve your issue.
HTML
<a href="http://www.google.com" target="_blank" >Google</a>
Yahoo
Stackoverflow
JS:
$('a').click(function(e){
$this = $(this);
if($this.data('disabled') == 'true'){
e.preventDefault();
setTimeout(function(){$this.data('disabled', 'false')}, 10); //Enable the anchor tag after 10 milliseconds
}else{
$this.data('disabled', 'true');
}
});
Demo: http://jsfiddle.net/rUrk4/6/
I have simple solution for you,
Just put this jQuery code after including JQuery ofcourse
<script type="text/javascript" src ="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script type="text/javascript">$('a:visited').click(function(){return false;});</script>
this will prevent click on all visited links in your page. :)
So first time the click will work second time will not..
I hope this much explaination will do :)
I want to make all my settings forms across my site confirm that changes are saved, kinda like facebook does if you make changes in a form and then try to navigate away without saving. So I'm disabling the submit button on the forms only enabling if the values change. I then prompt the user to hit save before they leave the page in the case that they do have changes pending.
var form = $('form.edit');
if(form.length > 0) {
var orig_str = form.serialize();
$(':submit',form).attr('disabled','disabled');
form.on('change keyup', function(){
if(form.serialize() == orig_str) {
setConfirmUnload(false);
$(':submit',form).attr('disabled','disabled');
} else {
setConfirmUnload(true);
$(':submit',form).removeAttr('disabled')
}
});
$('input[type=submit]').click(function(){ setConfirmUnload(false); });
}
function setConfirmUnload(on) {
window.onbeforeunload = (on) ? unloadMessage : null;
}
function unloadMessage() {
return 'If you navigate away from this page without saving your changes, they will be lost.';
}
One of these forms needs some additional validation which I do using jQuery.validate library. e.g. if i wanted to ensure the user can't double submit the form on accident by double clicking on submit or somesuch (the actual validation in question is for a credit-card form and not this simple):
$('form').validate({
submitHandler: function(form) {
$(':submit', form).attr('disabled','disabled');
form.submit();
}
});
Unfortunately both bits are trying to bind to submit button and they're interfering with each other such that the submit button remains disabled no matter what I do and it is impossible to submit the form at all.
Is there some way to chain the validations together or something? Or some other way to avoid re-writing the validation code to repeat the "did you change anything in the form" business?
Not sure what's wrong with your solution, but here's one that seems to work:
<!doctype html><!-- HTML5 ROCKS -->
<html>
<head>
<title>Usable Forms</title>
</head>
<body>
<form id="my_form" action="http://www.google.com/search">
<input type="text" name="query">
<input type="submit" disabled>
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js">
</script>
<script>
var my_form = $('#my_form');
var original_form_values = my_form.serialize();
// Returns true if the contents of #my_form have changed since the page was
// loaded.
function MyFormChanged() {
return my_form.serialize() != original_form_values;
}
var submitting = false;
// Warn of unsaved changes if the user tries to navigate away.
window.onbeforeunload = function() {
// Don't stop the submission.
if (submitting) {
return;
}
if (MyFormChanged()) {
return 'You have unsaved changes.';
}
// Not submitting, nor has form changed;
// therefore, it is safe for the user to navigate away.
}
$('#my_form').on('submit', function() {
// Just in case submit button isn't disabled for some reason.
$('#my_form input[type=submit]').attr('disabled', '');
if (!MyFormChanged()) {
return false;
}
if (submitting) {
return false;
}
submitting = true;
return true;
});
// Toggle submit button, depending on whether there are any changes to submit.
$('#my_form input').on('change keyup', function() {
if (!submitting && MyFormChanged()) {
// Enable submit button.
$('#my_form input[type=submit]').removeAttr('disabled');
} else {
// Disable submit button.
$('#my_form input[type=submit]').attr('disabled', '');
}
});
</script>
</body>
</html>
My Requirement is to hide a tag initially, if user clicks forwardbutton without checking any radio or checkbutton we have show the tag and have to prevent page refresh. But it is permanently not submitting on click, Plese someone help me.
$(document).ready(function()
{
var y=$('input').filter(':checked').length;
alert(y);
if(y == 0 )
{
$('#Q1_7_label').parents('TR').hide();
}
$('#forwardbutton').live('click',function(event)
{
var x=$('input').filter(':checked').length;
if(x==0)
{
$('#Q1_7_label').parents('TR').show();
return false;
}
});
});
$('#forwardbutton').live('click',function(event)
{
var x=$('input').filter(':checked').length;
if(x==0)
{
$('#Q1_7_label').parents('TR').show();
return false;
}
return true;
});
Just add return true at the end of the function
Try to replace
return false;
with
event.preventDefault();
I have a web page where i have 2 forms when i click the enter key, I am calling a javascript function to force the page to load another page.My code is
function SearchUser()
{
var text = document.getElementById("searchItem").value;
text = text == "" ? -1 : text;
var by = document.getElementById("listBy").value;
var on="";
if(by==1)
{
on="USERNAME";
}
else if(by==2)
{
on="FIRSTNAME";
}
else if(by==3)
{
on="EMAIL_ID";
}
gotoUrl="userlist.php?searchItem="+text+"&onSearch="+on;
alert(gotoUrl);
window.navigate=gotoUrl;
}
and
$(document).ready(function()
{
$("#frmUserListSearch").keyup(function(event)
{
if(event.keyCode == 13)
{
SearchUser();
}
});
});
But the page is doing a form submit when the SearchUSer function being called.I am getting the correct url in the alert.But The page is not loading in the brower
Any Ideas ???
Thanks in advance
if (document.addEventListener) {
document.getElementById('strip').addEventListener('keypress',HandleKeyPress,false);
} else {
document.getElementById('strip').onkeypress = HandleKeyPress;
}
function HandleKeyPress(e) {
switch (e.keyCode) {
case e.DOM_VK_ENTER:
if (e.preventDefault)
e.preventDefault();
else e.returnValue = false;
}
}
EDIT due to original Question edit:
all you need is:
$(document).ready(function()
{
$("#frmUserListSearch").keyup(function(event)
{
if(event.keyCode == 13)
{
SearchUser();
if (e.preventDefault)
e.preventDefault();
else e.returnValue = false;
}
});
});
edited to reflect comment
Returning false often does the trick.
http://javascript.about.com/library/bldisdef.htm
I have two recommendations. First, use the keydown event instead of keyup (it catches "enter" before submit better). Second, in your SearchUser() function, use window.location instead of window.navigate to go to the other page.
$(document).ready(function() {
$("#frmUserListSearch").keydown(function(event) {
if(event.keyCode == 13){
SearchUser();
return false;
}
});
});
NOTE: Don't forget to remove the "alert()" inside the SearchUser() function as it causes the form to submit before navigating away from the page.
You can do this by using the action attribute of the form, without having to deal with key events, granted that you will later need javascript to take action on the control that submits the form.
<html>
<head>
<script type="text/javascript">
function donothing() {}
</script>
<body>
<form action='javascript:donothing()'>
...
</form>
</body>
</html>