如何使用按钮代替表单外的输入？答案

【问题标题】：How to use a button in lieu of a input outside of a form?如何使用按钮代替表单外的输入？
【发布时间】：2017-05-02 10:42:29
【问题描述】：

我正在设置一个导航栏，其中包含一个按钮，该按钮有望在正文 (album_form) 中提交表单。有什么建议可以让 onclick 完成此操作吗？

<body>
  <header>
    <navbar>
      <button type="submit" name="save_album" class="btn" id="save_album" onclick="????" value="Save Album">Save Album</button>
    </navbar>
  </header>
  <main>
    <form action="/album/" method="POST" name="album_form" id="album_form">
     <input />
    </form>
  </main>
</body>

【问题讨论】：

How to submit a form with JavaScript by clicking a link?的可能重复

标签： javascript html forms

【解决方案1】：

onclick 中不需要任何内容。只需添加此 javascript。

document.getElementById("save_album").addEventListener("click", function() {
  document.getElementById("album_form").submit();
});

演示https://jsfiddle.net/4xcmh2ms/6/

【讨论】：

【解决方案2】：

您可以尝试以下方式：

<button type="submit" name="save_album" class="btn" id="save_album"     onclick="document.getElementById('album_form').submit()" value="Save Album">Save Album</button>

【讨论】：

【解决方案3】：

已经有与此主题相关的问题和答案，请参阅此： Submit form using a button outside the tag!

希望对您有所帮助。

或者你可以写一点javascript代码：

<form id="Form">
  <!-- form fields and/or controls-->
</form>
<input type="submit" id="externalButton">

<script>
$(document).ready(function () {
  $("#externalButton").click(function () {
    $("#Form").submit();
  });
});
</script>

【讨论】：