gpt4 book ai didi

javascript - 单击 "no submit"按钮形成帖子

转载 作者:行者123 更新时间:2023-11-28 19:58:50 25 4
gpt4 key购买 nike

当我运行下面的静态 js 和 html 时,我感到很困惑

我想通过单击按钮动态添加选项,但是当我将其放在表单下时,它会执行操作,除非我将其放在表单之外,否则它会起作用。什么原因?我没有将添加按钮的类型设置为“提交”,在表单中单击的任何按钮都会导致表单操作吗?

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

最佳答案

<button>元素默认是一个提交按钮。您可以使用 type="button" 更改此设置属性,这使得它默认不执行任何操作,或者调用 preventDefault关于事件。但我会选择该属性,因为这样您的意图在语义上就很清楚,而无需实际运行脚本。

关于javascript - 单击 "no submit"按钮形成帖子,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22057311/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com