Question

我正在处理表单设计，它在<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>

Answer 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提交表单。

Answer 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>

Answer 3

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

如果你想使用多个按钮，只需给按钮一个类或什么，并为它提交一个外部事件处理程序，提交你的表单。不需要jQuery，它是非常简单的vanilla javascript。

＆＃13;

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();
  })
}

＆＃13;

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

＆＃13;

<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>

＆＃13;

提交按钮不在表单元素内

3 个答案: