CODEWITHSUNDEEP
jqueryhtmlforms
phenomenia
phenomenia

Reputation: 109

jQuery submit does not work but submit button does

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>

Upvotes: 0

Views: 293

Answers (1)

Jai
Jai

Reputation: 74738

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.

Upvotes: 1

Related Questions