jQuery submit does not work but submit button does

Question

I've a simple form that I want to submit when I click on an a tag. To do that I created a jQuery like this:

jQuery(function(){
  jQuery( "#ci-submit-location-form" ).click(function() {
    jQuery( "#ci-location-search" ).submit();
  });
});

For some reasons I don't see the page after the submit that I set in the forms action field. It seems like the page is just "realoading". The jQuery is fired as I get a console.log when I put it in the click().

However, a simple submit field fires the form correctly and I get to the desired page.

What have I overlooked?!

Here's the DOM of my form:

<form action="restaurant-list.php" id="ci-location-search" method="GET">
  <input type="text" class="ci-location-input" placeholder="Straße" />
  <a href="" id="ci-submit-location-form" class="ci-submit-location-form" />Send</a>
  <input type="submit" value="SUBMIT" /><!-- For testing purpose only -->
  <div class="ci-clear"></div>
</form>

Jai · Accepted Answer · 2016-02-26 14:13:28Z

1

You need the DOM submit:

   jQuery( "#ci-submit-location-form" ).click(function(e){
         e.preventDefault();
          jQuery( "#ci-location-search" )[0].submit();
   });

Finally I think this is overlooked:

  />Send</a>

Check the inline closing.

edited Feb 26, 2016 at 14:13

answered Feb 26, 2016 at 13:53

Jai

74.8k12 gold badges77 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

phenomenia Over a year ago

Thanks for the reply. But ti's not fixing the issue :(

Jai Over a year ago

Check the update. There is an inline closing of anchor.

phenomenia Over a year ago

Great! Works now :) The e.preventDefault(); was missing. Thanks!!

Collectives™ on Stack Overflow

jQuery submit does not work but submit button does

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related