提交按钮不在表单元素内答案

【问题标题】：submit button not inside form element提交按钮不在表单元素内
【发布时间】：2017-08-18 15:50:16
【问题描述】：

我正在设计一个表单，它在<form> 标签内没有提交按钮。这就是我的意思：

我正在进行的设计需要输入我将提交的数据，这些数据跨越整个网站，而不是在同一个元素块中。这可以做到吗？处理此类问题的最佳实践方法是什么？

<form action="#" method="post">
  <div>
    <label for="name">Name:</label>
    <input type="text" id="name" name="user_name">
  </div>
  <div>
    <label for="mail">E-mail:</label>
    <input type="email" id="mail" name="user_mail">
  </div>

</form>
<div id="other">
Some other element here
</div>
<div>
SUBMIT BUTTOM HERE
</div>

【问题讨论】：

使用 javascript 元素在按钮按下时提交表单，但实际上，您不将其包装在 <form> 元素中的确切原因是什么？
The design I am working on requires to input data, that I will submit, to be across the website and not within the same element block 为什么？

标签： jquery html forms

【解决方案1】：

您可以使用 jQuery 来实现这一点。确保将其包含在您的页面中，然后您可以执行类似的操作..

<form action="#" method="post" id="the-form">
  <div>
    <label for="name">Name:</label>
    <input type="text" id="name" name="user_name">
  </div>
  <div>
    <label for="mail">E-mail:</label>
    <input type="email" id="mail" name="user_mail">
  </div>

</form>
<div id="other">
Some other element here
</div>
<div>
    <a href="#" id="submit-the-form">Submit the form</a>
</div>

<script>

$(document).ready(function() { 

    $('#submit-the-form').click(function() {
        $('#the-form').submit();
    });

});

</script>

所以<form> 标签上有一个 ID，我添加的文本链接上有一个 ID。文本链接，点击后会触发 jQuery 提交表单。

【讨论】：

【解决方案2】：

如果您使用的是 jQuery，您可以在表单中添加 id 并像这样手动提交：

    $('.js-submit-form').on('click', function(event) {
      event.preventDefault(); // not necessary if you're using a div
      $('#myform').submit()
    });

    <form action="#" method="post" id="myform">
    ...
    </form> 

    <div class="js-submit-form">SUBMIT BUTTOM HERE</div>

【讨论】：

【解决方案3】：

您只需向按钮添加一个事件处理程序，然后在该处理程序中提交表单。

body {
  background-color:aqua;
}
form{
  width:30%;
  display:inline-block;
}
#other{
  height:200px;
  background-color:orange;
}

<form action="#" method="post" id="form">
  <div>
    <label for="name">Name:</label>
    <input type="text" id="name" name="user_name">
  </div>
  <div>
    <label for="mail">E-mail:</label>
    <input type="email" id="mail" name="user_mail">
  </div>
</form>
<div id="other">
Some other element here
</div>
<div>
  <input type="submit" onclick="document.getElementById('form').submit()">
</div>

如果你想使用多个按钮，只需给按钮一个类或其他东西，然后为它编写一个外部事件处理程序来提交你的表单。不需要 jQuery，它是非常简单的 vanilla javascript。

var submits = document.getElementsByClassName('submit');

for (var i = 0; i < submits.length; i++) {
  submits[i].addEventListener('click',function(e) {
    e.preventDefault();
    document.getElementById('form').submit();
  })
}

body {
  background-color:aqua;
}
form{
  width:30%;
  display:inline-block;
}
#other{
  height:200px;
  background-color:orange;
}

<form action="#" method="post" id="form">
  <div>
    <label for="name">Name:</label>
    <input type="text" id="name" name="user_name">
  </div>
  <div>
    <label for="mail">E-mail:</label>
    <input type="email" id="mail" name="user_mail">
  </div>
</form>
<div id="other">
Some other element here
</div>
<div>
  <input class="submit" type="submit">
  <input class="submit" type="submit">
  <input class="submit" type="submit">
</div>

【讨论】：