Why Form doesn't submit with javascript if an input field's name is submit

The problem is that the submit button has the name submit and this clash is overriding the form's submit() function.

If you remove the name="submit" attribute, this will work.

Here is some more information on conflicts:

http://jibbering.com/faq/names

http://paulsec.github.io/blog/2014/03/09/dealing-with-html-submits-conflict

You can try to put an hidden button (input type="submit") and trigger a "click" event on it instead of a "submit" event on the form

Why do you need the js when you have an action that goes to www.google.com ? What are you trying to do ?

If it's just a sample, I still don't understand why you need an input with the type submit? You can have the button without a form and then run the js. But you can't run both because when you klick the input, it will bring you to google.com without running the js. But you could open it in a new tab and then the js would run.

Run the following modified submit along with a javascript console. There is a cross-origin policy error and also you were missing http://.

  $('#form1').submit(function(event) { 
    console.log(this.action); 
    var action = this.action 
    $.post(this.action, $(this).serialize()).done(function(data, status, xhr) { 
      alert(action + "\n\n" + status); 
    }).fail(function(xhr, status, err){ 
      alert(action + "\n\n" + status); 
    }); 
  }); 
 
  $('h3').click(function() { 
    $('#form1').submit(); 
  });

https://code.jquery.com/jquery-1.11.3.min.js

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<form action="http://www.google.com" method="post" id='form1'> 
  <input type="submit" name="submit" value="Submit" /> 
</form> 
 
<h3>click</h3>

I think you forgot to close the input tag:

<form action="www.google.com" method="post" id='form1'>
    <input type="submit" name="submit" value="Submit"></input>
</form>