Solved

OnClick vs OnChange causes different behavior inserting records into the database with Windows IE

Posted on 2004-09-27
11
760 Views
Last Modified: 2013-12-24
I'm stumped.  I've got a text box with an 'Add' button next to it.  The text box has an onChange = doSubmit2('Save').  The Add button has an onClick=doSubmit2('Save').   The doSubmit2 inserts a record into a database table.  If I use the onChange event, it works just fine.  If I use the onClick event, two records are inserted into the database.  This only happens under Windows IE (I'm using 6.0.2900 on Windows XP SP2).  It doesn't happen on any of the Mac browsers (IE, Safari, Mozilla) and it doesn't happen on Mozilla on Windows XP SP2).  I've tested under IE 6.0.2800 and 5.50.xxx on Windows and the same behavior happens.

Going into the cfquery tag, I don't have any records in the database.  Immediately after the cfquery tag, I've got two identical records in the database.  I've used the following syntax for my insert "insert into table_name (field1, field2, field3) values (element1,element2,element3)", as well as "insert into table_name set field1 = element1, field2 = element2, field3 = element3".  There are no triggers on the database.

I've also removed the cftry/cfcatch tags at this point.  I can catch the double insertion with cftry/cfcatch, but in the case of the User trying to insert two records, I'd like to actually show an error message.

Anyone have any ideas?

Thanks,
Beth
0
Comment
Question by:bpirrong
  • 5
  • 4
  • 2
11 Comments
 
LVL 7

Expert Comment

by:INSDivision6
ID: 12163580
If you have "Add" button defined as <input type=submit ...> than you have two events "OnClick" and "submit".  So you are submitting the form twice.  Define your button, as <input type="button" ...>  or return 0 from JS call to disable default behavior (form submit) on button click.
0
 

Author Comment

by:bpirrong
ID: 12163655
The add button is an image, not an input button.  Sorry, should have said that initially.
0
 
LVL 7

Expert Comment

by:INSDivision6
ID: 12164309
Still, if it is defined <input type="image" ...> this is the same issue.  Make it just <img>.  To test this, add a global var that will disable second submit:

var submitted=0;

doSubmit(but)
   {
   if (submitted) return 0 ;   // do not submit more than once
   submitted=1;
   . . . . . . . . .
   return 0;
   }
0
The Eight Noble Truths of Backup and Recovery

How can IT departments tackle the challenges of a Big Data world? This white paper provides a roadmap to success and helps companies ensure that all their data is safe and secure, no matter if it resides on-premise with physical or virtual machines or in the cloud.

 
LVL 7

Expert Comment

by:INSDivision6
ID: 12164338
BUT, you still need to add:  onClick="javascript:doSubmit2('Save'); return 0;"  for <input type="image">
0
 

Author Comment

by:bpirrong
ID: 12164551
The add button is defined as follows:
<img src="../images/add_up.gif" alt="Add" name="Image18" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image18','','../images/add_dwn.gif',1)" onClick="doSubmit2('Save')">

The text box is defined as follows:
<input name="aiminv_tag_num" type="text" size="20" maxlength="20" value="<cfif IsDefined( "get_inventory" )><cfoutput>#get_inventory.tag_num#</cfoutput></cfif>" onChange="doSubmit2('Save')"/>

I've tested to see if it was being submitted twice and it's not.  Plus, if it was an issue of submitting twice, that would happen on both the onChange and the onClick and on the other browsers.  Like I said, this one's got me stumped!

BTW, doSubmit2 simply sets a value for a different form element and then does document.form1.submit();

Thanks for the suggestions though - got any other ideas? :-)
0
 
LVL 7

Expert Comment

by:INSDivision6
ID: 12173107
If you have a duplicate record, and this is a browser-dependent behavior, the form must be submitted twice.  If to try replace <img> with a regular submit, what happens?  There are known differences between IE and Netscape in processing clicks for <input type="image">, but if you say you are using regular <img> it should be the same.
0
 
LVL 35

Expert Comment

by:mrichmon
ID: 12173848
Also try setting your database so that duplicate records can not be created.

Also you could try a javascript solution like these to prevent duplicate submissions:

http://www.netmechanic.com/news/vol5/html_no16.htm
http://www.web-source.net/web_development/form_submission.htm
0
 

Author Comment

by:bpirrong
ID: 12175025
At first I also thought it must be submitting twice.  So, I removed all cflocation tags - the action on my form tag returns me to the current page.  I created a query to count the number of records that are in this table prior to running the insert query and display the results.  I then run the insert query and display a message.  Following that is another query to count the number of records that are in the table.

When I submit the page, it comes back with:

current records 0.
insert successful.
new records 2.

Now, if it were submitting twice, the entire section of code would be run twice, so I would see:
current records 0.
insert successful.
new records 1.
current records 1.
insert successful.
new records 2.

So, this tells me I'm only submitting once - Correct?  Or am I missing something?  I'll try replacing the img with a regular submit and see what happens.

I can set the database to not accept duplicate records but then I either a)incorrectly tell the user they've tried to insert the same record twice or b)never tell the user when they have actually tried to insert the record twice.  Right now, as a work-around, I've gone with option b - never tell the user.  
0
 
LVL 7

Accepted Solution

by:
INSDivision6 earned 250 total points
ID: 12175175
Hmmm... I guess no.  If there is a double submit, you would see these randomly dependently how INSERTs are executed by your database:

current records 1.      <--- First Insert already happened --->
insert successful.
new records 2.

or

current records 0.    <!--- First Insert didn't happen yet --->
insert successful.
new records 2.

Because the second submit works for you, as a"Refresh" and you don't see the results of the first submit.  Correct test would be writing some debug info into a file using <CFFILE> enclosed in <LOCK> to prevent two [potential] threads writing to it.  This will show for sure is there a double submit or not.
0
 
LVL 35

Expert Comment

by:mrichmon
ID: 12180733
What database are you using?

If you are using MS SQL server you can run the profiler to see exactly what is happening from the database's point of view....
0
 

Author Comment

by:bpirrong
ID: 12261590
Well, I haven't been able to duplicate this issue in a new coldfusion form, and I've verified that it's not submitting twice, so I think I've hit some very weird combination of activities that's causing the insert on just this one section to be done twice.  I have no idea.  I put an insert into a different table JUST ABOVE this problematic insert, and it's only inserting once into that table.  Odd.

Anyway, I've decided to cut my losses and work around the issue.  Thanks for your suggestions - I appreciate the time you spent on this!
0

Featured Post

PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Article by: kevp75
Hey folks, 'bout time for me to come around with a little tip. Thanks to IIS 7.5 Extensions and Microsoft (well... really Windows 8, and IIS 8 I guess...), we can now prime our Application Pools, when IIS starts. Now, though it would be nice t…
Meet the world's only “Transparent Cloud™” from Superb Internet Corporation. Now, you can experience firsthand a cloud platform that consistently outperforms Amazon Web Services (AWS), IBM’s Softlayer, and Microsoft’s Azure when it comes to CPU and …
Although Jacob Bernoulli (1654-1705) has been credited as the creator of "Binomial Distribution Table", Gottfried Leibniz (1646-1716) did his dissertation on the subject in 1666; Leibniz you may recall is the co-inventor of "Calculus" and beat Isaac…
Finds all prime numbers in a range requested and places them in a public primes() array. I've demostrated a template size of 30 (2 * 3 * 5) but larger templates can be built such 210  (2 * 3 * 5 * 7) or 2310  (2 * 3 * 5 * 7 * 11). The larger templa…

773 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question