Enable and disable form button

[PushCode]

I need help with my form. I want to disable the submit button when the user clicks it so they won't submit the form twice accidentally. However, I also do a bunch of error checking with javascript once the button is clicked. And if any required field is left blank the user gets a popup alert. The problem is that once they close the popup the form button is now disabled and they cannot submit the form without refreshing it. Is there a way to re-enable the form button if any error occurs?

Here's my form button:
<input type="image" src="pics/btn_submit.gif" width="80" height="19" name="submitit" onclick="this.disabled=true;dosubmit();">

And here's my script:

function dosubmit()
	{
	error = "";
	{
		if(document.frm_page.submitit.disabled == false)
			{
			document.frm_page.submitit.disabled=true;
			}
if(error != "")
		{
		
		alert("----------- Error! ------------" + error);
		}
	else
		{
		document.frm_page.submit();
		}
	}
	}

Any ideas?

 

[deputydoofy]

Yes.
Simply have your button call the function:

<input type="image" src="pics/btn_submit.gif" width="80" height="19" name="submitit" id="submitit" onclick="dosubmit();">

I also added an id attribute so I could access it with the DOM.

Then, in the actual verification, set the disabled value (if necessary).

function dosubmit()
    {
    // Set local variable to be the button.
    var myButton=documnet.getElementById("submitit");
    myButton.disabled=true;
    error = "";
    {
        if(document.frm_page.submitit.disabled == false)
            {
            document.frm_page.submitit.disabled=true;
            }
if(error != "")
        {
        myButton.disabled=false;
        alert("----------- Error! ------------" + error);
        }
    else
        {
        document.frm_page.submit();
        }
    }
    }

What I did was create a local variable (object) that represents your form button. Immediately after creating it, I set it to true - disabling the button.
However, in the same check where you do an alert("error"), I also ENABLE the button so it can be used since there is still a problem. Hope that makes sense.

http://mywebpages.comcast.net/doofymusic

 

[PushCode]

Thanks deputydoofy - That makes sense. I implemented your suggestions, and now the form submits on through to the next page, even if required fields are left blank...no popup errors occur now.

Any idea why that might be?

 

[PushCode]

Here's the form button now:
<input type="image" src="pics/btn_submit.gif" width="80" height="19" name="submitit" id="submitit" onclick="dosubmit();">

And here's the script now:

function dosubmit()
	{
	// Set local variable to be the button.
    var myButton=documnet.getElementById("submitit");
    myButton.disabled=true;
	error = "";
	{
		if(document.frm_page.submitit.disabled == false)
            {
            document.frm_page.submitit.disabled=true;
            }
		if(document.frm_page.f_name.value == "")
			{
			error = error + "\n" + "You must provide your First Name to continue.";
			}
if(error != "")
		{
		myButton.disabled=false;
		alert("----------- Error! ------------" + error);
		}
	else
		{
		document.frm_page.submit();
		}
	}
	}

 

[deputydoofy]

Hmmmmm. Let's try....

<input type="image" src="pics/btn_submit.gif" width="80" height="19" name="submitit" id="submitit" onclick="return dosubmit();">

Ok, what I did was change the onclick to: onclick="return dosubmit();"

In theory, if it returns false, I'm thinking the submit should not work.

Then, add 1 thing to the end of your function:

function dosubmit()
    {
    // Set local variable to be the button.
    var myButton=documnet.getElementById("submitit");
    myButton.disabled=true;
    error = "";
    {
        if(document.frm_page.submitit.disabled == false)
            {
            document.frm_page.submitit.disabled=true;
            }
        if(document.frm_page.f_name.value == "")
            {
            error = error + "\n" + "You must provide your First Name to continue.";
            }
if(error != "")
        {
        myButton.disabled=false;
        alert("----------- Error! ------------" + error);
        }
    else
        {
        document.frm_page.submit();
        }
    }
    [b]return (myButton.disabled);[/b]
    }

What I did was make this a (boolean) value returning function. If myButton.disabled==false, then the function returns false to the onclick event. The false value there should stop it from submitting.
If it's true (meaning no field was blank), it returns a true value and the onlick should process. See if that works.

http://mywebpages.comcast.net/doofymusic