Basic JavaScript Question

[Grant Merwitz]

hi

I am using Javascript to do my validation
This is so i can display a loading message after a form is submitted.

Now, currently i do so like this.

I have a button, textbox and label like so:

<asp:textbox id="tb" runat="server"/>
<asp:Button id="btn" runat="server" text="Submit" />
<asp:Label id="lbl" runat="server" />

I then have a javascript function like so:

function validate()
{
if(document.getElementById('tb').value == '')
{
document.getElementById('lbl').innerHTML = "please fill in
textbox";
return false;
}
else
{
document.getElementById('lbl').innerHTML = "Loading...";
return true;
}
}

And i attach this to the button in the code behind like so:

btn.Attributes.Add("onclick", "JavaScript: return validate();");


now, this works perfectly.
but what i would like to do, is disable the button if the value returned is
true.
Like this:
else
{
document.getElementById('lbl').innerHTML = "Loading...";
document.getElementbyId('btn').enables = false;
return true;
}

But when i try this, the form will not submit.
How can i achieve what i'm trying to do here?

Submit a form only if validated, and disable the button if so?

TIA

Grant

 

[S. Justin Gengo [MCP]]

Grant,

I have a free javascript component on my website (comes with all source
code) that has as one of its methods a disable submit script. The code
hasn't been updated for .net 2.0 yet, but it's an easy conversion from 1.1
to 2.0. I just haven't had time to do it yet. If you take that code and add
your javascript for displaying your message to it you'll have what you need.
Another nice feature of the script is that before it disables the submit
button it first calls the microsoft javascripts that handle page validation
so that the button won't be disabled if the page isn't valid.

If you have any questions about converting the script or adding your bit of
javascript for your load message to it feel free to email me.

You may see a demo of the script (#3) and download the entire component as a
..net 1.1 project from here:
http://www.aboutfortunate.com?page=javascriptdemo


--
Sincerely,

S. Justin Gengo, MCP
Web Developer / Programmer

www.aboutfortunate.com

"Out of chaos comes order."
Nietzsche

 

[slagomite]

Hrm, interesting. I was able to replicate this -- apparently if the
calling object gets disabled, the browser cancels any subsequent
actions once control leaves the validate() function.

I was able to work around this by explicitly calling the
"__doPostBack()" method in the validate() function -- making an
explicit call to this should be identical to the form itself being
posted (if you create a LinkButton control and look at the page source,
you'll see that ASP.NET just does the same thing -- the LinkButton's
"onclick" event makes an explicit call to __doPostBack(), with its ID
as the argument).

So try this (note you'll have to create this script from the
server-side -- i.e., in the Page.PreRender handler -- in order to get
the reference to the postback method):

StringBuilder sb = new StringBuilder();
sb.Append("<script language='javascript'>\r\n");
sb.Append("function validate()\r\n");
sb.Append("{\r\n");
sb.Append(" if(document.getElementById('tb').value == '')\r\n");
sb.Append(" {\r\n");
sb.Append(" document.getElementById('lbl').innerHTML = 'Try
again...';\r\n");
sb.Append(" return false;\r\n");
sb.Append(" }\r\n");
sb.Append(" else\r\n");
sb.Append(" {\r\n");
sb.Append(" document.getElementById('lbl').innerHTML =
'Loading...';\r\n");
sb.Append(" ");
sb.Append(this.GetPostBackEventReference(btn); sb.Append(";\r\n");
sb.Append(" return true;\r\n");
sb.Append(" }\r\n");
sb.Append("}\r\n");
sb.Append("</script>\r\n");
this.RegisterClientScriptBlock("_PageScripts", sb.ToString());
btn.Attributes["onclick"] = "return validate();";

HTH,
Luke

 

[Edwin Knoppert]

Postback is desired at that time so why not disable from the server in the
page_load?

 

[Grant Merwitz]

Thanks thats great.

Nice to see you giving back to the community, I strive to do so myself.
If only i could find the time between work, eat and sleep

This looks like what i need, i have downloaded it and will try integrate it
into my code

Thanks Again!

 

[Grant Merwitz]

Thanks this sounds like what i need.

I've used the form.submit before, but then everything has to be in the
page_load method.
This sounds like a smarter option!

Thanks!

 

[Grant Merwitz]

because the process takes a while to run, and that causes users to click the
submit button again.

Anyway, after the button is submitted, they are redirected to a success page

 

[S. Justin Gengo [MCP]]

Grant,

You're Welcome.

You get to sleep huh? Lucky dog.

--
Sincerely,

S. Justin Gengo, MCP
Web Developer / Programmer

www.aboutfortunate.com

"Out of chaos comes order."
Nietzsche

 

[Grant Merwitz]

Worked perfectly!!!!

Thanks this sounds like what i need.

I've used the form.submit before, but then everything has to be in the
page_load method.
This sounds like a smarter option!

Thanks!

Hrm, interesting. I was able to replicate this -- apparently if the
calling object gets disabled, the browser cancels any subsequent
actions once control leaves the validate() function.

I was able to work around this by explicitly calling the
"__doPostBack()" method in the validate() function -- making an
explicit call to this should be identical to the form itself being
posted (if you create a LinkButton control and look at the page source,
you'll see that ASP.NET just does the same thing -- the LinkButton's
"onclick" event makes an explicit call to __doPostBack(), with its ID
as the argument).

So try this (note you'll have to create this script from the
server-side -- i.e., in the Page.PreRender handler -- in order to get
the reference to the postback method):

StringBuilder sb = new StringBuilder();
sb.Append("<script language='javascript'>\r\n");
sb.Append("function validate()\r\n");
sb.Append("{\r\n");
sb.Append(" if(document.getElementById('tb').value == '')\r\n");
sb.Append(" {\r\n");
sb.Append(" document.getElementById('lbl').innerHTML = 'Try
again...';\r\n");
sb.Append(" return false;\r\n");
sb.Append(" }\r\n");
sb.Append(" else\r\n");
sb.Append(" {\r\n");
sb.Append(" document.getElementById('lbl').innerHTML =
'Loading...';\r\n");
sb.Append(" ");
sb.Append(this.GetPostBackEventReference(btn); sb.Append(";\r\n");
sb.Append(" return true;\r\n");
sb.Append(" }\r\n");
sb.Append("}\r\n");
sb.Append("</script>\r\n");
this.RegisterClientScriptBlock("_PageScripts", sb.ToString());
btn.Attributes["onclick"] = "return validate();";

HTH,
Luke