如何将 HTML 中的复选框值发送到 Node JS?
How to send checkboxes values from HTML to Node JS?
我试图将一些复选框值从 HTML 发送到 Node JS。在我的 HTML 文件中,我在 table 中有一些复选框。我得到如下选中的复选框值,
$("#createSS").click(function (event) {
event.preventDefault();
var searchIDs = $("#imgTable input:checkbox:checked").map(function () {
return $(this).val();
}).get();
console.log("selected::::" + searchIDs);
});
我的 HTML 表格是,
<form action="/addSlideShow" method="POST">
<table id="imgTable" class="table">
{{#images}}
<tr>
<td><input id={{imgURL}} type="checkbox" name="ch" value={{imgURL}}/></td>
</tr>
{{/images}}
</table>
<input id="createSS" type="submit" value="Create Slide Show" class="btn btn-success pull-left" disabled/>
</form>
在节点 JS 中,
app.post('/addSlideShow', function (req, res) {
var $ = req.body;
$('td').each(function () {
console.log($(this).text());
});
});
当我单击 HTML 中的按钮时,没有提交。我该如何解决这个问题?
提前致谢!
<input id="createSS" type="submit" value="Create Slide Show" class="btn btn-success pull-left" disabled/>
您的提交按钮被禁用。最后删除 disabled
属性。
这是因为您没有post将数据转换为url 形式。由于您使用了永远不会提交的 event.preventDefault()
,也没有使用 $.ajax() 到 post 数据
尝试 post 使用 ajax 等数据,
$("#createSS").click(function (event) {
event.preventDefault();
var searchIDs = $("#imgTable input:checkbox:checked").map(function () {
return $(this).val();
}).get();
console.log("selected::::" + searchIDs);
$.ajax({
url:'/addSlideShow',type:'post',
data:{searchid:searchIDs},
success:function(response){
console.log(response);
}
});
});
在node js中你会得到,
app.post('/addSlideShow', function(req, res) {
console.log(req.body); //Output=> like { searchid: 'Array of checked checkbox' }
console.log(req.body.searchid); // to get array of checked checkbox
});
您正在使用 event.preventDefault()
,它告诉浏览器不要在点击时执行它应该执行的操作。删除该行,您的表单将被提交。我不是 Node 忍者,但您在 req.body 中的数据不会采用 html 格式。查询 $("td") 是前端逻辑。您需要为每个复选框分配一个不同的名称,例如 name="ch-{{$index}}"
(在 angular ng-repeat 中就是如此)。或者您应该通过 ajax.
发送 {searchid: searchIDs}
我试图将一些复选框值从 HTML 发送到 Node JS。在我的 HTML 文件中,我在 table 中有一些复选框。我得到如下选中的复选框值,
$("#createSS").click(function (event) {
event.preventDefault();
var searchIDs = $("#imgTable input:checkbox:checked").map(function () {
return $(this).val();
}).get();
console.log("selected::::" + searchIDs);
});
我的 HTML 表格是,
<form action="/addSlideShow" method="POST">
<table id="imgTable" class="table">
{{#images}}
<tr>
<td><input id={{imgURL}} type="checkbox" name="ch" value={{imgURL}}/></td>
</tr>
{{/images}}
</table>
<input id="createSS" type="submit" value="Create Slide Show" class="btn btn-success pull-left" disabled/>
</form>
在节点 JS 中,
app.post('/addSlideShow', function (req, res) {
var $ = req.body;
$('td').each(function () {
console.log($(this).text());
});
});
当我单击 HTML 中的按钮时,没有提交。我该如何解决这个问题?
提前致谢!
<input id="createSS" type="submit" value="Create Slide Show" class="btn btn-success pull-left" disabled/>
您的提交按钮被禁用。最后删除 disabled
属性。
这是因为您没有post将数据转换为url 形式。由于您使用了永远不会提交的 event.preventDefault()
,也没有使用 $.ajax() 到 post 数据
尝试 post 使用 ajax 等数据,
$("#createSS").click(function (event) {
event.preventDefault();
var searchIDs = $("#imgTable input:checkbox:checked").map(function () {
return $(this).val();
}).get();
console.log("selected::::" + searchIDs);
$.ajax({
url:'/addSlideShow',type:'post',
data:{searchid:searchIDs},
success:function(response){
console.log(response);
}
});
});
在node js中你会得到,
app.post('/addSlideShow', function(req, res) {
console.log(req.body); //Output=> like { searchid: 'Array of checked checkbox' }
console.log(req.body.searchid); // to get array of checked checkbox
});
您正在使用 event.preventDefault()
,它告诉浏览器不要在点击时执行它应该执行的操作。删除该行,您的表单将被提交。我不是 Node 忍者,但您在 req.body 中的数据不会采用 html 格式。查询 $("td") 是前端逻辑。您需要为每个复选框分配一个不同的名称,例如 name="ch-{{$index}}"
(在 angular ng-repeat 中就是如此)。或者您应该通过 ajax.
{searchid: searchIDs}