My client needs some decaf

I have a form that updates a mysql table and results in a PDF.  Works fine.

It takes a few seconds between the time a user submits the form and for all the "magic" to happen.

My client, the twitch that he is, keeps pounding on the submit button. I have the validateat set to submitonce. is there something I can easily display to show something akin to  "processing" that doesn't increase server load?
Short-Order-CoderAsked:
Who is Participating?
 
azadisaryevConnect With a Mentor Commented:
yes, since you have not posted any code, it's hard to give you any detailed help...

but see if this works for you:

1) add this js function to the HEAD section of your page:
<script type="text/javascript>
checkForm = function(objForm) {
      objForm.submitbtn.disabled=true;
      document.getElementById('loading').style.display='';
      var formname = objForm.name;
      var fn = eval('_CF_check'+formname);
      //var formValid = ColdFusion.Ajax.checkForm(objForm, eval('_CF_check'+formname));
      var formValid = fn.call(null, objForm);
      if (formValid) {
            return true;
      } else {
            objForm.submitbtn.disabled=false;
            document.getElementById('loading').style.display='none';
            return false;
      }
}
</script>

2) this is your new submit button code. my button has ID and NAME as 'submitbtn' - change as necessary, but don;t forget to change it in the above javascript as well then!

<cfinput type="submit" name="submitbtm" id="submitbtn" value="update" onclick="return checkForm(this.form);" /><span id="loading" style="padding-left:10px; color:red; font-weight:bold; display:none;">PROCESSING... Please wait...</span>

the above code will run cf's built-in form validation (if you are using one) first, and submit the form if it validates.

if you are submitting your form via ajax post/get, then there may be a few changes need to be made to this code...

post your code and we'll help you more.

Azadi
0
 
ddayx10Commented:
I take it you are sending off a request, and when it returns then you are displaying some results in an element somewhere?

Usually what is done is that just before you send the request you fill an element on the page with some img/text indicating a waiting state. Then when your request is returned the 1st thing you do is change that waiting state back to a default.

Maybe some code will help...

<input type="submit" onclick="sendRequest();return false;" value="Click Me" />
<div id="results"></div>


<script type="text/javascript">

function sendRequest()
{
   document.getElementById('results').innerHTML = "Please Wait, ya twitchy bastard!";
}

function firedWhenAjaxReturnsResponse(rObj)
{
   document.getElementById('results').innerHTML = rObj;
}
</script>

You could disable the button until a response returns, or put a background image in the button showing a wait state. The possibilities are unlimited. I can't be much more specific since I cant see your code, and I don't know exactly what it is you're doing with the button click. With the information I have I can just give you a general idea....

good luck,

dday





0
 
eejonesConnect With a Mentor Commented:
You could make a <div> that is initially empty, and when the user hits Submit some Javascript puts a "waiting.gif" type of animated GIF image in that div. You can Google to find free animated GIFs that would work - a bouncing ball, a spinning circle, etc. Google "loading.gif" or "waiting.gif"

The property you want is "innerhtml" - e.g.

onClick = "document.getElementById('mydiv').innerHTML='<img src=waiting.gif>' " 

This will put the animated image in the 'mydiv' div so the user can see something is happening.

Depending on the language, you can use ob_flush();flush(); (php) or <cfflush> (ColdFusion) to force some content to be written to the page right away, if it does not appear right away.
0
Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

 
Short-Order-CoderAuthor Commented:
would I need any additional javascript?
0
 
azadisaryevCommented:
did you try the code i posted for you?

Azadi
0
 
Short-Order-CoderAuthor Commented:
No.  I just got back into town.  I didn't even notice other answer.  my bad.  I'll go through this tomorrow.
0
 
eejonesCommented:
You could paste this snippet of code after the <body> tag in any .html test document and see how this works.

Also you can make your own animated gif at this url: http://www.ajaxload.info/ - and put that image into the divMessage div.

---------------------------------------------------

<form action="" method="post">
<input type="submit" name="submitbutton" value="Submit"
onClick="
this.disabled='true';
document.getElementById('divMessage').innerHTML='The form is being processed. Please be patient and do not click the Submit button again. You cannot, anyway, becauase it is disabled!';
 "
>
<div id="divMessage"></div>
</form>

0
 
azadisaryevCommented:
@eejones:

while your code will work in a simple environment with a simple form, it will not when used with a cfform and built-in cf form validation - your code will not enable the submit button if form validation fails, leaving user in a state when he can't make cjanges and submit the form again.

Azadi
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.