Thread

So, it looks like it’s not solely a Safecracker/jQueryForm issue.  We’ve started to see duplicates for entries created from the CP.

As this is all from EE 2.3.1.  Might an upgrade to 2.4.0 solve these issues?  I will try and check all the addons for available updates.

Hello dehuszar,

Did you get a chance to try out Robbin’s suggestion?

It’s not a bad idea to update to the latest version of ExpressionEngine.

Please let me know your thoughts on this.

Thank you,

I have, but have not been able to get any duplicates to check the Console against yet.  I will take another pass at it this weekend.  I have upgraded the latest devsite to 2.4.0, but it has not launched yet.

I’ll report back once I’ve had another go at it.

Hello dehuszar,

That sounds good. Let me know how it goes.

Cheers,

So, the solution for this particular issue ended up being resolved by ditching AJAX and using inline error handling.

But now I’m trying the process again on a different project(/server/template structures) and the problem has resurfaced.  It doesn’t look like Safecracker is misfiring multiple and injecting multiple entries, but basically if someone hits the mouse button 10 times (because the server doesn’t complete the AJAX request quickly enough), 10 copies of the entry will get submitted to the DB.

I’ve poked around devot-ee, but couldn’t find anything which would prevent this server-side.  None of the addons, nor the AJAX example in the Safecracker docs have any mechanisms to prevent multiple submissions.  I am looking into ways of disabling any more submits after the initial submit until the AJAX call is complete, but this is pretty easily circumvented, or might not work in all environments.  Is there a server-side way to prevent the same entry from being produced multiple times?

How have others addressed this issue?

Hello dehuszar,

I am unable to find anything on my end either, something that would stop multiple submits.

I can move just this one part of the thread over to the Community Help Forum to see if there are any ideas there.

Development and Programming is another idea for a solution.

What do you think?

Cheers,

Whatever you think is best.  I found some possible solutions which I’m tracking down.  If I’m successful, I’ll definitely post back.

Hey dehuszar,

Sounds good. Thank you!

Cheers,

So, here’s what I’ve figured out…

The only real way to get the duplicate submissions from posting to the DB is to just replace the submit button with a loading image before running the AJAX request.  I ended up ditching jqueryForm as after a little bit of reading (credit to High Intensity Design for the initial js the rest is based on).  The stock jQuery $.ajax function does everything with a pretty clear syntax, and has truncated functions like $.load, $.post, etc. depending on how much complexity you want/need.  Anyway, here’s my code:

$(function(){
   $('#feedback').submit(function(event) {
      /* stop the contact form from submitting normally */
      event.preventDefault();
      /* replace the submit button with a loading image to prevent multiple clicks and indicate the form is being processed */
      $("#feedback input[type='submit']").replaceWith("/images/interface/colorbox/loading.gif");
      /* send the form data using post and check the results for any errors*/
      $.ajax({
         url: "/contact/",
         type: "post",
         dataType: "html",  
         data: $(this).serialize(),
         
         /* If there was some kind of an AJAX error, display an appropriate message or take some other action of your choice */
         error: function(jqXHR, textStatus, errorThrown) {
          displayAjaxMessage("Sorry, there was an error submitting your form. Please contact the Salon by phone for further assistance.");
         },
      
         /*  parse the HTML returned by EE to see if they forgot to enter an email address or a message.
         If so, the HTML will contain a specific error string we can match, and then we can display our own message */
         success: function(data) {
            if (data.match(/<title>Error<\/title>/)) {
                //grab the error message
                var error = $(data).find('ul li:first').text();
               $("#output").empty();
               $("#output").removeClass().addClass("error").html(error);
               /* since the form has identified an error, we need the submit button back so the visitor can address the fields with errors and re-submit */
               $("img.loading").replaceWith("<input type='submit' value='submit' />");
            } else {
               /* clear any error messages still showing in the output area and prep with success message */
               $("#output").empty().hide();
               $("#output").removeClass().addClass("success").text('Thank you!  We have received your submission.');
               /* clear fields now that the form has been successfully completed */
               $("#feedback #contact_name, #feedback #contact_from, #feedback textarea, input[name='captcha']").val('');
               /* now that we're done, and the fields have been cleared, return the submit button to the form */
               $("img.loading").replaceWith("<input type='submit' value='submit' />");
               /* display our success message */
               $("#output").fadeIn("slow").delay(6000).fadeOut("slow", function() {
                 $(this).removeClass().html('');
               });
            }
         }
      });
   });
});

Now this still doesn’t address what to do if someone tries to bypass the JS maliciously (or inject their own) to produce DB spam.  There still needs to be some server-side mechanism for identifying duplicate entries.  Ideally it would be a safecracker parameter which you could identify a field to use as a check; i.e. in the case of a contact form, you could check [contact_body] as that field should be unique from submission to submission.

I guess that makes this a feature request at this point.  Perhaps we can migrate it there.

Hopefully the script above is helpful to anyone else trying to safely AJAX a form.