如何将复选框值从 HTML 发送到 Node JS？

Posted 2023-03-07

【中文标题】如何将复选框值从 HTML 发送到 Node JS？

【英文标题】：How to send checkboxes values from HTML to Node JS?

【发布时间】：2015-05-18 07:19:16

【问题描述】：

我尝试将一些复选框值从 html 发送到 Node JS。在我的 HTML 文件中，我的表格中有一些复选框。我得到如下选中的复选框值，

$("#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/>&nbsp;&nbsp;

</form>

在 Node JS 中，

app.post('/addSlideShow', function (req, res) 
    var $ = req.body;
    $('td').each(function () 
        console.log($(this).text());
    );
);

当我单击 HTML 中的按钮时，for 未提交。我该如何解决这个问题？

提前致谢！

【参考方案1】：

这是因为您没有将数据发布到表单 url。由于您使用了event.preventDefault()，它永远不会提交，您也使用$.ajax() 发布数据

尝试使用 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
);

【讨论】：

默认情况下我的网址是http://dashboard.mybluemix.net/deletePage。当我单击按钮时，它应该更改为http://dashboard.mybluemix.net/addSlideShoe。但它没有改变。我删除了disable。但是按钮动作没有触发。

先清除。你要不要ajax？如果不是，那么为什么要将 deletePage 更改为 addSlideShoe

好吧，如果您preventDefault()，您的表格将不会被发送，因为您要求它不要做他应该做的事情。通过使用它，您需要以某种方式将数据发送到/addSlideShoe，因此是 Ajax。

@codebot 试试我的代码，然后告诉我们您面临的下一个问题。

【参考方案2】：

<input id="createSS" type="submit" value="Create Slide Show" class="btn btn-success pull-left" disabled/>

您的提交按钮已禁用。最后删除 disabled 属性。

【讨论】：

不，你没有，你只是听从不触发的事件。简化示例：jsfiddle.net/v3a3xjvb

【参考方案3】：

您正在使用event.preventDefault()，它告诉浏览器在点击时不要执行它应该执行的操作。删除该行，您的表单将被提交。我不是 Node ninja，但你在 req.body 中的数据不会是 html 格式。查询 $("td") 是前端逻辑。您需要为每个复选框分配一个不同的名称，例如name="ch-$index"（这就像在角度 ng-repeat 中一样）。或者你应该通过 ajax 发送searchid: searchIDs。