Is this a double submit problem?

K

Konrad Ciborowski

Hi guys,

It is my first time on this group and I'm hoping
some good people will help me overcome my problem.
JavaScript veterans have probably seen it before
but I am kind puzzled by this one. Perhaps more surfing
through the net might be enough to find a solution but it this
can of worms occurred to me in a complex framework and it took
me a few hours merely to isolate the problem.

Here is my problem in a nutshell. Below is
my tiny web page. Please copy and paste its contents
and save as test.html and then open it in IE 6
(I don't know about other browsers but for me
it has to work under IE 6).
You will see a very simple site. Then
please do the following

Scenario #1

1. Press Submit.
2. The Submit button will turn grey.
3. An alert window will pop-up, please press
space to close it.
4. Wait patiently until the page reappears
with the Submit button looking normally.

Looking at the source code it is
obvious what happened. When Submit was clicked
the submitForm() function was called which deactivated
the button and displayed the alert.
The for loop does nothing interesting,
it is there simply to make the execution of the
function last a while (a few seconds - this the key
component of the equation). Then the form
is submitted and as its action points to the form itself
the page reappears all right.

Scenario #2

1. Press Submit.
2. The Submit button will turn grey.
3. An alert window will pop-up, please press
space to close it.
4. Without waiting please click immediately the
Submit button again even though it is greyed out
and deactive.

What will happen is that the page will reappear but
then the alert will pop up again meaning that
the submitForm() function has been re-entered.
This is something I don't want.
I want the submitForm() to be run only once.

It seems to me that when the page is reloaded the browser
somehow remembers that the button was pressed
on the previous page. Can anyone help me on
how to get rid of this double call of the
submitForm() function? Because right now
it acts almots like a double submit.



Konrad Ciborowski
Kraków, Poland

======== test.html =====================


<HTML>

<BODY>

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">

function submitForm() {
document.getElementById('guzik').disabled = true;
alert("I am here!");
for (var z = 1; z < 10000; z++) {
var leftSelect = document.getElementById('select1');
for (i = 0; i < leftSelect.options.length; i++) {
if (leftSelect.options.selected) {
leftSelect.options.selected = false;
} else {
leftSelect.options.selected = true;
}
}
}
for (i = 0; i < leftSelect.options.length; i++) {
leftSelect.options.selected = true;
}
document.getElementById('testowa').submit();
}

</SCRIPT>

<FORM name=testowa id=testowa action=test.html>

<SELECT NAME="toppings" id="select1" MULTIPLE SIZE=5>
<OPTION VALUE="mushrooms">mushrooms</OPTION>
<OPTION VALUE="greenpeppers">green peppers</OPTION>
<OPTION VALUE="onions">onions</OPTION>
<OPTION VALUE="tomatoes">tomatoes</OPTION>
<OPTION VALUE="olives">olives</OPTION>
</SELECT>

<BR>
<INPUT type=button id=guzik value=Submit onClick="submitForm(); return
false;">


</FORM>
</BODY>
</HTML>
 
K

Konrad Ciborowski

U¿ytkownik "Conrad Lender said:
Please don't do this. Applications like yours are the reason why we
still have to fight with outdated user agents like IE6. Make it work
according to the standards, and your clients won't have a problem when
they want to upgrade to a more recent browser.
Click to expand...

I have no problem with doing it in such a way so it works under
all browsers but I still don't know how to do this (even in IE6 alone).
I read your first reply (to my first post sent a tad too soon)
but I cannot get to to work.

I changed my button to

<INPUT type=submit name=guzik id=guzik value=Submit>

and added your snippet

var myForm = document.getElementById('testowa'), myFormSubmitted = false;

myForm.onSubmit = function() {
alert("HHH");
if (myFormSubmitted) {
return false;
}
myFormSubmitted = true;
return true;
};

but JS never seems to enter the function() -

alert("HHH")

never gets called.
I feel like I'm missing something blindingly obvious
but I still can't make the damn thing work.

Before I posted to this group I tried a number
of solutions with global variables but to no avail.


There's no sleep() in JavaScript, and using meaningless loops to consume
100% CPU for a while is not a replacement. If you need a delay for some
reason, use setTimeout().
Click to expand...

I seemingly didn't make myself clear. In real application
I have a JavaScript function that I need to call
before submitting the form which does a number of
things and takes about 6 seconds to complete.
If the user hits the submit button again in this
time (even though the first thing I do in the
function is to disable the button)
then when the VerySlowJavaScriptFunction() finally
terminates the form is submitted and the page
reloads but IE6 for some unknown reason
reenters the VerySlowJavaScriptFunction() again.

And this, from what I can tell, the heart of the problem.
Normally if one calls a JS function before
submitting a form it takes a franction of a second to return
so the user simply is not able to react that fast -
JS functions normally are quick.

What it takes so long is another matter - it
is a structure I inherited and before I revamp
the whole program to move the stuff from the
VerySlowJavaScriptFunction() to the
server side I want to know what my options are.
See my reply to your first post for suggestions about how to prevent
multiple submits.
for (var z = 1; z < 10000; z++) {
var leftSelect = document.getElementById('select1');
for (i = 0; i < leftSelect.options.length; i++) {
if (leftSelect.options.selected) {
leftSelect.options.selected = false;
} else {
leftSelect.options.selected = true;
}
}
}
for (i = 0; i < leftSelect.options.length; i++) {
leftSelect.options.selected = true;
}
Click to expand...


Ugh. I'm not going to run this :)
Click to expand...


Why not?
If you did I'd truely appreciate it because you
could see what my problem is.
Becasue from your reply I conclude that
perhaps we are not on the same wavelength.

Best regards,


Konrad Ciborowski
Kraków, Poland
 
K

Konrad Ciborowski

First of all, because I could see what it will do (nothing except eat
CPU), and second because I'd have to start up a VM for IE6 first, and I
can't do that right now because I'm almost out of memory :-/ Sorry.

For what it's worth, I tested your page in Firefox, and it only called
the slow block once. It's possible that the change to the submit button
doesn't get executed until the loop is through. Setting a variable (or
property, like I suggested, will work in this case (even in IE6).
Click to expand...

First of all let me thank you for the effort you've made
to help me.

It may very well work for you under Firefox because it works for me under
GoogleChrome.

I tried to do it your way and it works fine on GoogleChrome
and still doesn't work in IE6.

I put this page on

http://cibor.fm.interii.pl/test.html

and there it works (which is not very surprising) -
no matter how many times I click on the
Submit button after the alert the slowBlock()
never gets executed twice.

But if I test it locally

E:\temp\test.html

then when I shut down the alert and immediately click on
the Submit button (while the slowBlock() is still running)
then I do get the alert for the second
time (meaning that the slowBlock() function got called twice).


I have no clue what is going on here.

Best regards,

Konrad Ciborowski
Kraków, Poland
 
K

Konrad Ciborowski

What you could do to work around it on your end, is give IE some time to
process any clicks to the submit button while it was busy. Try this:

var myForm = document.getElementById('testowa'),
myFormSubmitted = false;

myForm.onsubmit = function() {
if (!myFormSubmitted) {
myFormSubmitted = true;
slowBlock();
setTimeout(function() { myForm.submit(); }, 10);
}
return false;
};
Click to expand...


It didn't help. What did work, though, was adding
an alert as the last instruction of the slowBlock().
It seems that when the user clicks OK on the alert
this click sort of intercepts all the previous
clicks made during the execution of slowBlock()
and when the new page loads the event buffer
is clear.
Best regards,

Konrad Ciborowski
Kraków, Poland
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

How do I fix this issue in sqaurespace code block? 1
HCaptcha - How to stop page from refreshing on submit if captcha is not checked/validated 1
This code is not working 8
Need help solving this problem 1
auto-submit problem 1
<Button ...> display is fine, except for two things 1
action_page.php form 2
submit form with javascript 3

Members online

Total: 63 (members: 2, guests: 61)
Robots: 414

Forum statistics

Threads
473,982
Messages
2,570,186
Members
46,740
Latest member
JudsonFrie

Latest Threads

Top