Have to press Enter (or button) twice before anything is submitted

Question

I have this strange little problem. I want my submit button to do nothing onSubmit. So I googled around and came across this piece of code.

<form id="search" onsubmit="myFunction(); return false;" >
    <table>
        <tr>
            <td><input type="text" name="s" id="str" placeholder="Search"></td>
            <td><button class="btn form-button btn-default"><i class="fa fa-search"></i></button></td>
        </tr>
    </table>
</form>

The code: onsubmit="myFunction(); return false;" prevents the Submit/reload and the myFunction runs this function:

function myFunction() {
    $('.form-button').on('click', function(){
        jQuery.fancybox({
            width  : 600,           
            height: 600,    
            openEffect: 'fade',
            closeEffect: 'fade',          
            href: 'search-post-results.php',
            type: "ajax",
                ajax: {
                    type: "POST",
                    data: {
                        value:$('#str').val()
                    }
                }
        });
    });
}

Now the strange thing is, like the subject says. I have to click the search button or hit return twice before anything happens? Anybody any idea why this is happing? I've searched google but there is nothing that is connected to my problem. I've tried Chrome, FireFox and Opera even on other computers. And It's always the same. Anyone? Thanks in advance!

Answer 1

The issue is because you're only attaching the jQuery click handler which invokes the FancyBox after the first click occurs. You're also adding another click handler on each successive click too.

Instead of this use a single event handler on the submit event of the form. You can then also easily prevent the form submission and show thee FancyBox at the same time. Try this:

$(function() {
  $('#search').on('submit', function(e) {
    e.preventDefault();
    jQuery.fancybox({
      width: 600,
      height: 600,
      openEffect: 'fade',
      closeEffect: 'fade',
      href: 'search-post-results.php',
      type: "ajax",
      ajax: {
        type: "POST",
        data: {
          value: $('#str').val()
        }
      }
    });
  });
});

<form id="search">
  <table>
    <tr>
      <td>
        <input type="text" name="s" id="str" placeholder="Search">
      </td>
      <td>
        <button class="btn form-button btn-default">
          <i class="fa fa-search"></i>
        </button>
      </td>
    </tr>
  </table>
</form>

Answer 2

myFunction triggers on click only. You have also added another click function inside that. So that should be the issue. This should be the correct function

  function myFunction() {   
            jQuery.fancybox({
                width  : 600,           
                height: 600,    
                openEffect: 'fade',
                closeEffect: 'fade',          
                href: 'search-post-results.php',
                type: "ajax",
                    ajax: {
                        type: "POST",
                        data: {
                            value:$('#str').val()
                        }
                    }
            });
    }