如何将提交类型输入远离其表单

【问题标题】：How to position submit type input away from its form如何将提交类型输入远离其表单
【发布时间】：2014-12-20 07:46:24
【问题描述】：

我有以下类型的表单

    <form method="post" action="genTable.php" target="myIframe">

    <select id="leftValues" name="cols[ ]" size="5" multiple>
        <option>paper</option>
        <option>authors</option>
    </select>

    <div class="submitbutton">
    <input type="submit" name="submit" value="Refresh Table" onclick="selectAll();">
    </div>

    </form>

Fiddle

这样，选择表单总是与提交按钮组合在一起。我希望按钮与其他按钮位于单独的 div 中，这些按钮与表单分开放置。但是，如果我将它们分开，则按钮不再与表单的操作相关联。我该怎么做？

【问题讨论】：

标签： html css

【解决方案1】：

你可以给表单一个id：

<form id="MyForm" method="post" action="genTable.php" target="myIframe">

</form>

然后您可以将您的输入放在页面上的任何位置，只需添加form 属性即可将它们附加到表单：

<input type="submit" name="submit" value="Refresh Table" onclick="selectAll();" form="MyForm">

请注意，Internet Explorer 不支持此功能，但由于您还有一个 selectAll() 事件处理程序，您也可以通过 JavaScript 提交表单：

function selectAll()
{
  // submit the form
  document.getElementById('MyForm').submit();

  // Prevent the default submit in non-IE browsers, otherwise you'll have two submits.
  return false;
}

这样，它可以在任何地方工作，除了禁用 JavaScript 的 IE 浏览器。观众可能小到可以接受。

【讨论】：