如何将用户创建的复选框值传递到另一个页面？答案

【问题标题】：How to pass checkbox values that are created by the user to another page?如何将用户创建的复选框值传递到另一个页面？
【发布时间】：2017-08-13 16:03:08
【问题描述】：

我有一个输入表单，用户可以在其中创建自己的“卡片”。数据进入 PostgreSQL 数据库，我将结果呈现在页面上（见下文）。创建卡片后，我希望他们能够选择他们喜欢的卡片，并在下一页 (/play) 上仅显示这些选定的卡片。

我的代码（我用 pug）：

div(id="all-cards")
    div(class='card')
        each card in cards
            p Title: #{card.title}
            p Question: #{card.question}
            p Subquestion: #{card.subquestion}
            p Task: #{card.task}

            form(name="selection" action="" method="post")
                input(type="checkbox" value="card" title="Select" name="option") 
                label Select
                button(type="submit" name="select" class="select-cards") Select The Cards

我该怎么办？

【问题讨论】：

标签： javascript jquery postgresql pug

【解决方案1】：

我不知道哈巴狗，但似乎每张卡片都有一个表格，这意味着您一次只能选择一张卡片。我应该建议您只使用一种形式，并为每张卡片使用属性“名称”。

div(id="all-cards")
    div(class='card')
      form(name="selection" action="" method="post")
        each card in cards
            p Title: #{card.title}
            p Question: #{card.question}
            p Subquestion: #{card.subquestion}
            p Task: #{card.task}

            input(type="checkbox" value="1" title="Select" name="#{card.id}") 
            label Select

然后，当表单提交时，您将拥有一个数组：

 $_POST['id1' => 1,... idn => 1]

对应前面的选择就可以处理了：

foreach($_POST = $key => $value){
  $selected[] = $key;
}

【讨论】：

感谢您的代码！不幸的是，我不熟悉 php，我使用 Node js。在 Node.js 中会不会是这样的： app.post('/cards', function(req,res) { var card = card.id Card.findAll({ where: { id: card.id } }) 。然后(function(){ res.redirect('/play') }) })
另外，我忘记为复选框添加提交按钮，将其添加到我的代码中。
问题出在您的 html 中，使用一种形式，然后，当您从请求对象中检索数据时，您可以将其包含在重定向中。
我采用了您建议的代码，但现在我的 Node.js 中出现了问题，因为发布请求是错误的......“无法读取未定义的属性 'id'”
input(type="checkbox" value="#{card.id}" title="Select" name="#{card.id}") 为什么？当您提交 http 请求时，将为检查的每个元素创建一个变量 ("name"="value"&...)，因此您必须专注于您的“名称”。一旦你得到查询对象（解析后，即： (url.parse(req.url).query

【解决方案2】：

使form 成为所有卡片的包装。将checkboxes 的name 更改为cards[] 之类的东西，并更改每张卡的值（输入ID 或其他独特的东西）。当您提交表格时，您将获得一系列卡片。 cards 参数将填充所选卡片的 ID。

【讨论】：