javascript - div内的单选按钮
问题描述
我有一个可以动态添加表单的表单 html。我对单选按钮有问题,它只能选择一个选项(即使单选按钮位于不同的标签中)。我搜索解决方案,一种解决方案是更改单选按钮的名称。还有其他方法吗?因为我的其他输入都使用相同的名称,并且在提交表单时,所有输入都可以收集在一个数组中。
如果没有其他办法,如何更改克隆元素的单选按钮名称?
这是我的代码:
app.get('/form', function (req, res) {
var html='';
html += `<head>
<style>
.formset {
border-style: solid;
border-width: 1px;
}
</style>
<script>
var id=1
function myFunction() {
id++
var elmnt = document.getElementById("div1")
var cln = elmnt.cloneNode(true)
cln.id = "div"+id
document.getElementById("divParent").appendChild(cln);
}
</script>
</head>`;
html +="<body>";
html += "<p>Click the button to make a BUTTON element with text.</p>";
html += '<button onclick="myFunction()">Add form</button>';
html += "<form action='/thank' method='post' name='form1'>";
html += "<div id='divParent'>";
html += "<div id='div1' name='formset' class='formset'>";
html += "<p>Name: <input type= 'text' name='name'></p>";
html += "<p>Sex: Male <input type='radio' name='gender' value='male'>"
html += " Female <input type='radio' name='gender' value='female'></p>"
html += "<p>Email: <input type='text' name='email'></p>";
html += "<p>Address:<input type='text' name='address'></p>";
html += "<p>Mobile number:<input type='text' name='mobilno'></p>";
html += "</div>";
html += "</div>";
html += "<input id='input1' type='submit' value='submit'>";
html += "<INPUT type='reset' value='reset'>";
html += "</form>";
html += "</body>";
res.send(html);
});
以及处理表单的代码:
app.post('/thank', urlencodedParser, function (req, res){
var reply='';
reply += "<br>Array length is : " + req.body.name.length;
reply += "<br>Your name is : " + req.body.name;
reply += "<br>Sex is : " + req.body.gender;
reply += "<br>Your E-mail id is : " + req.body.email;
reply += "<br>Your address is : " + req.body.address;
reply += "<br>Your mobile number is : " + req.body.mobilno;
res.send(reply);
});
解决方案
我认为您需要更改收音机输入的名称,将类添加到收音机以使其可以通过 getElementsByClassName 找到。
html += "<p>Sex: Male <input type='radio' class='gender' name='gender' value='male'>"
html += " Female <input type='radio' class='gender' name='gender' value='female'></p>"
//change the name, add id to the end
function changeName(element, id) {
var x = element.getElementsByClassName("gender");
var i;
for (i = 0; i < x.length; i++) {
x[i].name += id;
}
}
function myFunction() {
id++
var elmnt = document.getElementById("div1")
var cln = elmnt.cloneNode(true)
cln.id = "div"+id
//change radio id
changeName(cln, id);
document.getElementById("divParent").appendChild(cln);
}
推荐阅读
- c++ - 在 Linux 上使用 boost::serialization 序列化 unique_ptr 的 std::vector 失败
- java - 为什么我们对 CPU 有核心/线程限制?
- javascript - 我想使用 JavaScript 在网页中打开隐身模式
- acumatica - Acumatica 确定单击了哪个按钮(保存或完成)
- javascript - Typescript 接口并创建该接口的对象
- php - KendoUI 100% 堆积柱形图未正确显示
- python - gensim Doc2Vec 是否区分具有正面和负面上下文的相同句子。?
- html - 来自 DynamoDB 的数据中的 If 语句以显示特定值的 div
- ios - UINavigationBar titleTextAttributes 从视图控制器返回后未更新
- javascript - 如何查找模态已滚动到最后 -EmberJS