2014-02-27 213 views
0

我得到了困惑,当我运行静态JS和HTML下方形式后点击“不提交”按钮

我想要动态点击按钮添加选项,但是当我把它的形式下,它会做acition post,除非我把它放在表单外面,它才有用。什么原因?我没有为添加按钮设置类型为“提交”,在窗体中单击的任何按钮是否会导致窗体操作?

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

回答

3

<button>元素默认为提交按钮。您可以使用type="button"属性更改此属性,这会使其默认情况下不执行任何操作,或者在事件中调用preventDefault。但是,从那时起,我的意图是语义清晰的,而不需要真正运行脚本。