Question

I’m using the jquery.form.js from here: http://www.malsup.com/jquery/form/. I want to validate the text of the text input from the form before submitting. Validation goes to
‘search_validate.php’. This part works fine. If validation passes, the form action’s is changed. That works too.

Getting the form to submit normally after changing the action attribute doesn’t work. The browser never goes to the ‘/videos/search/’ page. It stays on the same page. I see the ‘/videos/search/’ page loading in Firebug over and over though.

<form id="search" method="post" action="">
<input type="text" id="query" />
<input type="image" id="searchmag" src="blah.jpg" ?>
</form>

<script>
$(function(){
  $('#searchmag').click(function(){
    $('#search').attr('action','/search_validate.php');

    $('#search').ajaxForm(function(data, textStatus){
      if ((data.indexOf('letters & numbers only')>-1)) {
      $('#query').css('color','#FF0000').val(data); 

      $("#query").unbind("click").click(function(){
        $('#query').css('color','#848484').val('');
      });
    } else {
      $('#search').attr('action','/videos/search/' + $('#query').val());
      $('#search').submit();
    }
    });
  });
});
</script>

Answer 1

This always works for me:

$("#myForm").on("submit", function(event) {
    event.preventDefault();

    // Validate form, returning on failure.

    $(this).off("submit");

    this.submit();
});

I hope this helps!