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

286
December 10, 2016, at 12:57 PM

Why Form doesn't submit on event if input field name is submit. I already know it won't based on recent experience, but why not.

http://jsfiddle.net/btm5j599/1/

Edited Code

$('#btn1').click(function() { 
  $('#form1').attr('action', ''); 
  $('#form1').submit(); 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
<form action="http://mytestsite.com/test/" method="post" id='form1'> 
  <span>This is a form content</span> 
  <input type="submit" name="submit" value="Submit" /> 
</form> 
 
<hr> 
 
<button id="btn1">Submit form on same page</button>

Answer 1

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

Answer 2

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

Answer 3

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.

Answer 4

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>

Answer 5

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>  
READ ALSO
Slider won&#39;t look the same on WP as offline. What&#39;s interfering?

Slider won't look the same on WP as offline. What's interfering?

I downloaded a slider called 'ParallaxContentSlider' which I intended to use for my websiteI customized it a bit offline where everything worked perfectly, however, when I upload it to WP it won't look the same at all

176
JQuery Accordion TypeError: this.slideshow is undefined

JQuery Accordion TypeError: this.slideshow is undefined

I've got an accordion that is added dynamically (using AJAX)

388
repeat several trigger(&#39;click&#39;) functions every x seconds

repeat several trigger('click') functions every x seconds

I have 3 linksI want (unreal) click it via jquery every 2 second until I click (real click) on a link

319
How to combine jQuery validation plugin with jQuery selecter plugin?

How to combine jQuery validation plugin with jQuery selecter plugin?

I am working on an old project, with lots of jQuery and some jQuery pluginsOne of the plugins is jQuery Validation Plugin, it validates the input according to provided custom rules

309