...

View Full Version : disabling submit after the user clicks once



geet40
06-05-2007, 06:06 PM
Hi all

New to js
couldnt figure out how to disable the submit and change the color once clicked

code is

<td ><a href="javascript:document.application.submit();" onclick="this.disabled=true;" class="red12">Submit</a></td>

<td><a href="javascript:document.application.submit();" onclick = "this.disabled=true;"><img src="/img/submit_red.gif" width="21" height="17" border="0" hspace="5" alt="Submit" title="Submit"></a></td>

I used onclick but i dont think its working

Thanks for help

glenngv
06-05-2007, 06:35 PM
Links don't have disabled property.


<style type="text/css">
.disabled {
color: gray;
text-decoration:none;
}
</style>


function submitFormWithLink(frm, link){
if (link.className=="red12"){
link.className = "disabled";
frm.submit();
}
return false;
}

function submitFormWithImage(frm, imgId){
var img = document.getElementById(imgId);
if (img.src.indexOf("submit_red")!=-1){
img.src = "/img/submit_gray.gif"; //disabled image button
frm.submit();
}
return false;
}

<td ><a href="#" onclick="return submitFormWithLink(document.application, this);" class="red12">Submit</a></td>

<td><a href="#" onclick="return submitFormWithImage(document.application, 'imgSubmit');"><img id="imgSubmit" src="/img/submit_red.gif" width="21" height="17" border="0" hspace="5" alt="Submit" title="Submit"></a></td>

geet40
06-05-2007, 07:06 PM
Thank you

I could make the submit into gray
but not able to work the image
I do have the image in gray (submit_gray.gif)

is there anything i should chk?

glenngv
06-05-2007, 07:17 PM
Did you set the id of the img tag?

<a href="#" onclick="return submitFormWithImage(document.application, 'imgSubmit');"><img id="imgSubmit" src="/img/submit_red.gif" width="21" height="17" border="0" hspace="5" alt="Submit" title="Submit">

geet40
06-05-2007, 07:25 PM
Its not working
do i have to set a separate img tag

I enclosed the id="imgSubmit" in the present img tag.

Thank you

glenngv
06-05-2007, 07:32 PM
No. Can you post your code?

geet40
06-05-2007, 07:35 PM
Its two files
can i email you, too big to post

Thanks

glenngv
06-05-2007, 07:37 PM
Do you have the page online? You don't have to post everything. Just the related parts.

geet40
06-05-2007, 07:41 PM
In the main asp in the <head> i am having

<!-- #include virtual="/inc/configContextualContent.asp" -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=ISO-8859-1">
<!--<meta http-equiv="expires" content="0">
<meta http-equiv="Pragma" content="no-cache">-->
<title>Sovereign Bank | Mortgage Pre Qualification</title>
<meta name="description" content="Overview. Thank you for choosing Sovereign Bank.">
<meta name="keywords" content="Soverign Bank, Soveregn Bank, Sovereign Bank online, Sovereign National Bank online, pre-qualification application, pre qual app, pre qualification application, let's get started, what to expect, purchase, refinance, new construction">
<meta name="distribution" content="global">
<script language="javascript" src="/inc/all.js"></script>
<link rel="stylesheet" href="/inc/all.css" type="text/css">
<script language="javascript">
</script>
<script language="javascript">
<!-- //


function submit_form() {
var form = document.application;
var htmlState = '<font color="#F29A15">Please indicate the state in which<br>the property is located.&nbsp;*</font>';
var htmlCounty = '<font color="#F29A15">Please indicate the county in which<br>the property is located.&nbsp;*</font>';

if (form.curStep.value == '0') {
if (form.property_location.value == '') {
document.getElementById('state_err').innerHTML = htmlState;
alert('Please select the state in which\nthe property is located .');
form.property_location.focus();
} else if (form.property_location.value == 'Other') {
document.getElementById('state_err').innerHTML = htmlState;
alert('Currently, we do not issue loans in any other states.\nPlease contact a Mortgage Loan Specialist for more information.');
form.property_location.focus();
} else if (form.property_location.value == 'PA' && form.county_location.value == '') {
document.getElementById('county_err').innerHTML = htmlCounty;
alert('Please select the county in which\nthe PA property is located .');
form.county_location.focus();
} else if (form.property_location.value == 'NJ' && form.county_location.value == '') {
document.getElementById('county_err').innerHTML = htmlCounty;
alert('Please select the county in which\nthe NJ property is located .');
form.county_location.focus();
} else if (form.property_location.value == 'NY' && form.county_location.value == '') {
document.getElementById('county_err').innerHTML = htmlCounty;
alert('Please select the county in which\nthe NY property is located .');
form.county_location.focus();
} else {
form.submit();
}
} else {
form.submit();
}

}
/*
function check_state() {
var form = document.application;
if (form.property_location.value == 'PA') {
document.getElementById('select_county').style.display = '';
else if (form.property_location.value == 'NJ') {
document.getElementById('select_NJcounty').style.display = '';
else if (form.property_location.value == 'NY') {
document.getElementById('select_NYcounty').style.display = '';
} else {
document.getElementById('select_county').style.display = 'none';
}
}
*/

function check_state() {
var form = document.application;
var loc1 = form.property_location.value;

document.getElementById('table_county').style.display = 'none';
document.getElementById('select_county').style.display = 'none';
document.getElementById('select_NJcounty').style.display = 'none';
document.getElementById('select_NYcounty').style.display = 'none';

if((loc1=='PA') || (loc1=='NY') || (loc1=='NJ')) {
document.getElementById('table_county').style.display = '';

if (loc1=='PA')
document.getElementById('select_county').style.display = '';
else if (loc1 == 'NJ')
document.getElementById('select_NJcounty').style.display = '';
else if (loc1 == 'NY')
document.getElementById('select_NYcounty').style.display = '';
}
}

function submitFormWithLink(frm, link){
if (link.className=="red12"){
link.className = "gray12";
frm.submit();
}
return false;
}

function submitFormWithImage(frm, imgId){
var img = document.getElementById(imgId);
if (img.src.indexOf("submit_red")!=-1){
img.src = "/img/submit_gray.gif"; //disabled image button
frm.submit();
}
return false;
}
// -->
</script>

</head>



This asp is included in the main.asp to get the form summary
(this part is just the submit )

<table summary="" cellpadding="0" cellspacing="0" border="0" width="580">
<!--<caption></caption>-->
<tr>
<td width="10"><img src="/img/c.gif" width="10" height="1" border="0" alt="" title=""></td>
<td width="280" valign="top" class="util">
<div><img src="/img/c.gif" width="1" height="5" border="0" alt="" title=""></div>
<a href="javascript:history.go(-1);" class="util"><img src="/img/double_arrow1_left.gif" width="7" height="5" border="0" vspace="1" alt="" title=""> Back</a>
<div><img src="/img/c.gif" width="1" height="10" border="0" alt="" title=""></div>
</td>
<td align="right" width="239"><a href="javascript:document.application.submit();" onclick="return submitFormWithLink(document.application, this);" class="red12">Submit</a></td>
<td width="41"><a href="javascript:document.application.submit();" onclick="return submitFormWithImage(document.application, 'imgSubmit');"><img id="imgSubmit" src="/img/submit_red.gif" width="21" height="17" border="0" hspace="5" alt="Submit" title="Submit"></a><img src="/img/c.gif" width="10" height="1" border="0" alt="" title=""></td>
<td width="10"><img src="/img/c.gif" width="10" height="1" border="0" alt="" title=""></td>
</tr>
</table>

glenngv
06-05-2007, 07:48 PM
I said you don't have to post everything. Anyway, remove the javascript in the href in both links and change it to "#" as I did in my previous post. Run the page again and then post any error message you will encounter if any.

geet40
06-05-2007, 08:00 PM
It doesnt work

Thank you

geet40
06-05-2007, 08:02 PM
this is the code i am using

function submitFormWithLink(frm, link){
if (link.className=="red12"){
link.className = "gray12";
frm.submit();
}
return false;
}

function submitFormWithImage(frm, imgId){
var img = document.getElementById(imgId);
if (img.src.indexOf("submit_red")!=-1){
img.src = "/img/submit_gray.gif"; //disabled image button
frm.submit();
}
return false;
}



<td align="right" width="239"><a href="#" onclick="return submitFormWithLink(document.application, this);" class="red12">Submit</a></td>
<td width="41"><a href="#" onclick="return submitFormWithImage(document.application, 'imgSubmit');"><img id="imgSubmit" src="/img/submit_red.gif" width="21" height="17" border="0" hspace="5" alt="Submit" title="Submit"></a><img src="/img/c.gif" width="10" height="1" border="0" alt="" title=""></td>

glenngv
06-05-2007, 08:08 PM
As I said, please post any error msg if any. That will help us know what to fix. Run the page in Firefox and open the Javascript Console. If you are using IE, double-click the yellow ! icon in the status bar if the error dialog doesn't appear.

geet40
06-05-2007, 09:27 PM
Hi again

I am not getting any errors

in firefox the submit is becoming gray when clicked on
but the image when clicked stays the same red

in IE the submit becomes gray when clicked on
and the image when clicked is completely disappearing

glenngv
06-05-2007, 09:54 PM
Can you post a link to the page?

geet40
06-05-2007, 10:00 PM
But its not live.
its still in my work area

glenngv
06-05-2007, 10:04 PM
Does the form still submit even if the image doesn't change?

geet40
06-05-2007, 10:07 PM
yes it does
The field values are inserted in the db

Thank you

glenngv
06-06-2007, 08:43 PM
Can you put these alerts to the submitFormWithImage function to debug.

function submitFormWithImage(frm, imgId){
var img = document.getElementById(imgId);
alert("orig src:"+img.src);
if (img.src.indexOf("submit_red")!=-1){
alert("loading new image...");
img.onload = function(){alert("img successfully loaded!\n\nnew src:"+this.src)};
img.onerror = function(){alert("error loading img!\n\nnew src:"+this.src)};
img.src = "/img/submit_gray.gif"; //disabled image button
//frm.submit(); //comment this out for debugging
}
return false;
}
Post here what alert messages were displayed.

geet40
06-07-2007, 02:20 PM
Hi Glenn

Thank you soooooooo much for your help
I really appreciate the time.
You gave me a good lead on the project.

I got it working
this is what i did
and i added a function lock() to disable all the links on the page
and i dont know y but its not taking the variable when passed thru javascript so i used the id as it is (imgSubmit)
and it works...

Thanks again
YOU WERE A GREAT HELP!



/*function to disable submit image after one click*/
function submitFormWithImage(frm){
var img=document.getElementById("imgSubmit");
img.src="/img/submit_gray.gif"; /*disabled image button*/
img.width="21";
img.height="17";
img.border="0";
img.hspace="5";
img.alt="Submit";
img.title="Processing";
/* alert("this is after submit_gray did it change ?");*/
lock();
frm.submit();
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum