如果输入字段的名称是提交，为什么表单不使用 javascript 提交答案

【问题标题】：Why Form doesn't submit with javascript if an input field's name is submit如果输入字段的名称是提交，为什么表单不使用 javascript 提交
【发布时间】：2015-11-18 14:41:51
【问题描述】：

如果输入字段名称是提交，为什么表单不提交事件。我已经知道它不会基于最近的经验，但为什么不呢。

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

编辑的代码

$('#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>

【问题讨论】：

How send a form with Javascript when input name is "submit"?的可能重复
第一件事：这里的问题是什么？
问题是为什么表单没有提交，当点击按钮时，如果提交输入的名称是'submit'。

标签： javascript jquery html forms

【解决方案1】：

您可以尝试放置一个隐藏按钮（input type="submit"）并在其上触发“点击”事件，而不是在表单上触发“提交”事件

【讨论】：

这是个好主意，我会记住的。我一直在寻找它这样做的原因。更新了我的问题。谢谢

【解决方案2】：

问题在于提交按钮的名称为submit，而这种冲突覆盖了表单的submit() 函数。

如果您删除 name="submit" 属性，这将起作用。

以下是有关冲突的更多信息：

http://jibbering.com/faq/names

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

【讨论】：

这是一些遗留代码，它的名称原样。表单实际上有一个动作，出于某种原因，我将动作设置为清空并将其发布到同一页面。但我不知道当输入名称为 submit 时不提交表单的原因
按提交按钮提交表单可以正常工作，但由于名称冲突，您无法通过调用 $('form').submit(); 进行发布
+1，对我来说很奇怪，变量范围与函数名冲突。我知道这很矛盾，但为什么这种行为对我来说仍然很神秘。
是的，我同意这很奇怪。我知道它是遗留代码，但如果代码没有使用该名称，你可以不删除它。提交按钮的名称通常是出于习惯。
是的，可以更改代码。实际上在发布问题之前已经这样做了。敲了两个小时后，我想知道这种行为的原因。你能指出发生这种冲突的原因吗？在我看来这很愚蠢。

【解决方案3】：

当您有一个访问 www.google.com 的操作时，为什么需要 js？你想做什么？

如果只是一个示例，我仍然不明白为什么您需要输入类型为提交？您可以拥有没有表单的按钮，然后运行 js。但是你不能同时运行这两个，因为当你点击输入时，它会在不运行 js 的情况下将你带到 google.com。但是你可以在新标签页中打开它，然后 js 就会运行。

【讨论】：

这是你想写的评论，而不是答案。
感谢投反对票，现在评论需要更长的时间
@Sundaze 这是 Catch 22 的情况！

【解决方案4】：

运行以下修改后的提交以及 javascript 控制台。存在跨域策略错误，而且您还缺少 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>

【讨论】：