Question

当我运行静态js和html

时，我感到困惑

我想通过点击按钮动态添加选项，但是当我把它放在表单下面时，它会做一个acition post，除非我把它放在表单之外，它可以工作。是什么原因？我没有将类型设置为＆＃34;提交＆＃34;对于添加按钮，在表单中单击的任何按钮都会导致表单操作吗？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>作业管理</title>

</head>
<body>
<form enctype="multipart/form-data" method="POST" >
  <div id="postform">
    本次作业标题
      <input type="text" name="title" />
      <br>
    <div class="postoption"> 
      添加项目
      <input type="text" name="option[]" />
      音频文件
      <input type="file" name="radio[]" />
      答案
      <input type="text" name="answer[]" />
    </div>
  </div>
  <button id="add">添加输入项</button>
  <input type="submit" value="提交" />
</form>

<script type="text/javascript">

window.onload = function(){
  var add = document.getElementById("add");
  add.onclick = function(){
    addOption();
  }
}
function addOption(){
  var postForm = document.getElementById("postform");
  var postoptions = document.getElementsByClassName("postoption");
  var op = postoptions[0];
  var optionClone = op.cloneNode(true);
  postForm.appendChild(optionClone);
};

</script>
</body>
</html>

Answer 1

默认情况下，<button>元素是提交按钮。您可以使用type="button"属性更改此设置，这使其默认情况下不执行任何操作，或者在事件上调用preventDefault。但是我会使用该属性，因为那时你的意图在语义上是清晰的，而不是实际运行脚本。

单击“无提交”按钮以形成帖子

1 个答案: