Need help fixing this sidebox search code from 'double submitting' the search.

[jeffmic]

Hi gang,

This file is modified from:
includes/templates/custom/sideboxes.tpl_search.php

I'm trying to avoid the customer from double clicking on the sidebox search button and having mysql get clogged with additional searching. (this has been an ongoing issue and driving me crazy)

I tried to modify the one that occurs on checkout confirmation, but I'm unable to get it to function here. Can anyone find any errors in this code. In the checkout confirmation code, the script language is located in a separate file. I added it to the top of this file instead.

Any help would be great.
thanks,
Jeff Michaels

<?php
/**
 * Side Box Template
 *
 * @package templateSystem
 * @copyright Copyright 2003-2010 Zen Cart Development Team
 * @copyright Portions Copyright 2003 osCommerce
 * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
 * @version $Id: tpl_search.php 15881 2010-04-11 16:32:39Z wilt $
 */
 ?>
 <script language="javascript"><!--
 function submitonce()
{
  var button = document.getElementById("btn_submit");
  button.style.cursor="wait";
  button.disabled = true;
  setTimeout('button_timeout()', 4000);
  return false;
}
function button_timeout() {
  var button = document.getElementById("btn_submit");
  button.style.cursor="pointer";
  button.disabled = false;
}
//--></script>

<?php
   $content = "";
  $content .= '<script language="javascript" type="text/javascript"><!--' . "\n";
  $content .= ' function popupHelp(url) {' . "\n";
  $content .= "  window.open(url,'popupWindow','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes,copyhistory=no,width=450,height=650,screenX=150,screenY=200,top=150,left=400') \n";
  $content .= ' } //--></script>' . "\n";
  $content .= '  <div class="forward"><a class="legendText" href="javascript:popupHelp(\'' . zen_href_link(FILENAME_POPUP_SEARCH_HELP) . '\')">' . TEXT_SEARCH_HELP_LINK . '</a></div>' . "\n";
  $content .= '<div id="' . str_replace('_', '-', $box_id . 'Content') . '" class="sideBoxContent centeredContent">';
  
  $content .= zen_draw_form('quick_find', zen_href_link(FILENAME_ADVANCED_SEARCH_RESULT, '', $request_type, false), 'get');
  $content .= zen_draw_hidden_field('main_page',FILENAME_ADVANCED_SEARCH_RESULT);
  $content .= zen_draw_hidden_field('search_in_description', '0') . zen_hide_session_id();

  if (strtolower(IMAGE_USE_CSS_BUTTONS) == 'no') {
    $content .= zen_draw_input_field('keyword', '', 'size="18" maxlength="100" style="width: ' . ($column_width-30) . 'px" value="' . HEADER_SEARCH_DEFAULT_TEXT . '" onfocus="if (this.value == \'' . HEADER_SEARCH_DEFAULT_TEXT . '\') this.value = \'\';" onblur="if (this.value == \'\') this.value = \'' . HEADER_SEARCH_DEFAULT_TEXT . '\';"') . '<br /><br />' . zen_image_submit (BUTTON_IMAGE_SEARCH,HEADER_SEARCH_BUTTON);
    $content .= '<br /><a href="' . zen_href_link(FILENAME_ADVANCED_SEARCH) . '">' . BOX_SEARCH_ADVANCED_SEARCH . '</a>';
  } else {
    $content .= zen_draw_input_field('keyword', '', 'size="18" maxlength="100" style="width: ' . ($column_width-30) . 'px" value="' . HEADER_SEARCH_DEFAULT_TEXT . '" onfocus="if (this.value == \'' . HEADER_SEARCH_DEFAULT_TEXT . '\') this.value = \'\';" onblur="if (this.value == \'\') this.value = \'' . HEADER_SEARCH_DEFAULT_TEXT . '\';"') . '<br /><input type="submit" value="' . HEADER_SEARCH_BUTTON . '" onsubmit="submitonce();"  style="width: 50px" />';
  }
  $content .= '<br />';
  $content .= CLICK_ONCE;
  $content .= '<br /><br />';
  $content .= EXACT_SEARCH;
  $content .= "</form>";
  $content .= '</div>';
?>

[DrByte]

Since you've already got jQuery on the page (albeit a very old version), you can do it like this instead:

Put the following code into a new file at /includes/templates/YOUR_TEMPLATE_NAME/jscript/jscript_zen_disable_search_on_submit.js

/**
 * this uses the attr() method for compatibility with old jQuery 1.4.2.
 * Changing it to prop() would be smarter, after upgrading to a current version of jQuery
 */
  $(function() {
    $('FORM[name="quick_find"]')
      .submit(function() {
         $(this).find("input[type='submit']").attr("disabled", true);
      })
  });

And remove the other things you tried, since they relate to button IDs that don't exist on the page.

An optional variation you could do would be to add a waiting indicator, as follows:
1. Copy the /your-renamed-admin/images/loadingsmall.gif file to your store's main /images/ folder.
2. Change the code above to the following instead:

  $(function() {
    $('FORM[name="quick_find"]')
      .submit(function() {
         $(this).find("input[type='submit']").attr("disabled", true).before('<img src="images/loadingsmall.gif" id="wait-image">');
      });
  });

[jeffmic]

Thanks,

This greys out the button wonderfully (no spinner though-using with either the top level images folder or the one in the template folder - no worries)

This works great when 'clicking' on the button to grey it out. Is there any additional code that can also grey it if you press the Enter/Return key too? That method of submission still yield to clogging.

Everything else was removed with my original attempted code.

[DrByte]

Ya, the Return/Enter thing is a pain. Try this:

  $(function() {
    $('FORM[name="quick_find"]')
      .submit(function() {
        $(this).children("input[type='submit']").attr("disabled", true);
        $(this).children('input[name="keyword"]').keypress(function(e){
          if (e.which == 13) e.preventDefault();
        });
      });
    });

(again, using newer than jQuery 1.6 would switch to prop() instead of attr() -- and the keypress thing could then also be changed to use .bind('keypress', false) instead.)

[jeffmic]

Yeah! Success on 3 browsers (Safari, Chrome and Firefox). Disables repeated search submits on the button, Enter and Return keys. You the best man!

[jeffmic]

I would like one modification if possible:

Can I use a css button instead of a standard white 'submit' button on my website, and have it disable?

Instead of using:

<input type="submit" value="' . HEADER_SEARCH_BUTTON . '"  style="width: 50px" /> 

with the .js code

      .submit(function() {
         $(this).find("input[type='submit']").attr("disabled", true); 

I would like to use this button code:

zen_image_submit (BUTTON_IMAGE_SEARCH,HEADER_SEARCH_BUTTON); 

[DrByte]

Pretty sure no changes required. You weren't using a graphical button before anyway; yours was a browser-default button, so it was still called type="submit", just like the CSS button would be.

[jeffmic]

Sorry no. The css button with multiple clicking clogs the search again.