如何添加具有相同文本输入名称和单选按钮的多个条目(html、php)
在HTML和PHP中添加具有相同文本输入名称和单选按钮的多个条目，可以通过以下步骤实现：
HTML部分
首先，创建一个HTML表单，其中包含多个条目，每个条目都有相同的文本输入名称和单选按钮组。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Multiple Entries Form</title>
</head>
<body>
<form action="process_form.php" method="post">
<div id="entries">
<!-- 第一个条目 -->
<div class="entry">
<input type="text" name="entry_text[]" placeholder="Enter text">
<label><input type="radio" name="entry_radio[0]" value="option1"> Option 1</label>
<label><input type="radio" name="entry_radio[0]" value="option2"> Option 2</label>
</div>
<!-- 第二个条目 -->
<div class="entry">
<input type="text" name="entry_text[]" placeholder="Enter text">
<label><input type="radio" name="entry_radio[1]" value="option1"> Option 1</label>
<label><input type="radio" name="entry_radio[1]" value="option2"> Option 2</label>
</div>
<!-- 可以继续添加更多条目 -->
</div>
<button type="button" onclick="addEntry()">Add Entry</button>
<button type="submit">Submit</button>
</form>
<script>
let entryCount = 2; // 当前条目数
function addEntry() {
entryCount++;
const entriesDiv = document.getElementById('entries');
const newEntry = document.createElement('div');
newEntry.className = 'entry';
newEntry.innerHTML = `
<input type="text" name="entry_text[]" placeholder="Enter text">
<label><input type="radio" name="entry_radio[${entryCount - 1}]" value="option1"> Option 1</label>
<label><input type="radio" name="entry_radio[${entryCount - 1}]" value="option2"> Option 2</label>
`;
entriesDiv.appendChild(newEntry);
}
</script>
</body>
</html>PHP部分
在PHP脚本中处理表单提交的数据。
<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$entries = $_POST['entry_text'];
$radios = $_POST['entry_radio'];
for ($i = 0; $i < count($entries); $i++) {
$text = htmlspecialchars($entries[$i]);
$radioValue = isset($radios[$i]) ? htmlspecialchars($radios[$i]) : 'No option selected';
echo "Entry Text: $text, Radio Value: $radioValue<br>";
}
}
?>解释
- HTML部分:
- 使用
entry_text[]作为文本输入的名称，使其成为一个数组，以便在PHP中可以轻松处理多个条目。 - 单选按钮的名称使用
entry_radio[index]的形式，其中index是每个条目的唯一标识符。 - 使用JavaScript函数
addEntry()动态添加新的条目。
- 使用
- PHP部分:
- 接收表单提交的数据，并遍历每个条目。
- 使用
htmlspecialchars()函数防止XSS攻击。 - 输出每个条目的文本和选中的单选按钮值。
应用场景
这种结构适用于需要用户输入多个相似项的场景，例如：
- 用户调查问卷，每个问题有多个选项。
- 商品清单，每个商品有名称和状态（如“可用”、“缺货”）。
可能遇到的问题及解决方法
问题: 动态添加的条目在提交表单时丢失数据。 原因: 可能是由于JavaScript添加的新元素没有正确绑定到表单提交事件。 解决方法: 确保每次添加新条目后，表单的结构和事件绑定都是正确的。
问题: PHP接收到的数据顺序不一致。 原因: 可能是由于JavaScript动态添加条目时，索引没有正确更新。 解决方法: 确保每次添加新条目时，索引值正确递增，并且在PHP中按顺序处理数据。
通过上述方法，可以有效地处理具有相同文本输入名称和单选按钮的多个条目。
相关·内容
<form action="confirm.php" method="post" name=""><br><button type="submit" class=&
浏览 8提问于2021-11-13得票数 0
2回答
无法获取单选元素的值
、、、、
我在页面上有一个按钮，当用户按下它时，它会在页面上创建另一个“单选元素”。但问题是，在表单提交后，我很难用PHP检索值。下面是我的HTML代码：下面是我的PHP代码：
if ($
浏览 0提问于2012-12-04得票数 1
回答已采纳
3回答
我可以从表单中获取文本输入的值。label for="lblName">Name (*):</label>我首先提交带有验证检查的表单：
<form name="contactDataForm" action="sendMail.php&quo
浏览 1提问于2018-04-22得票数 0
我的头撞在墙上了，所以我真的希望有人能给我指明正确的方向。我有一个相当简单的设置，可以在一个Fiddle中复制，它由3个组件组成
然而，不正常的是，一个面板的</
浏览 0提问于2021-11-22得票数 0
回答已采纳
2回答
我有关于单选按钮的jQuery post的问题。当我使用jQuery AJAX post点击单选按钮时，我无法保存单选按钮值<?php echo $j['id_jwb'];?></div><?php echo $j['jwb'];?php if($j['jwb']=
浏览 2提问于2014-07-24得票数 0
我正尝试在表单上显示多个问题，并将多个选择答案显示为单选按钮。用户应该能够选择每个问题的一个答案(单选按钮)。例如:问题1有4个名称
浏览 0提问于2013-01-15得票数 0
回答已采纳
4回答
表单可以有更多的提交按钮吗？我的意思是，我有一个表单，其中包含一些输入字段和一个表格和3个按钮，它们将以不同的格式导出一些信息 <" value="Export html" />
</form&
浏览 3提问于2012-07-20得票数 0
回答已采纳
我正在开发Woocommerce的票证插件。默认情况下，该插件会将包含多个票证变体的表格显示为产品，其中包含数量的文本字段和下方的提交按钮，用于将产品添加到购物车中。我想用单选按钮或复选框替换这个文本字段，这样用户就可以选择一种类型的票据，然后点击提交按钮将其添加到购物车中。问题是，我想允许用户只添加一个票证变
浏览 0提问于2019-04-19得票数 0
6回答
我有相同名称和相同id的单选按钮，它们是动态数据，我想在输入中显示这些单选按钮值，但是当我检查单选按钮时，即使我检查第二个单选按钮或第三个单选按钮，输入中也只显示第一个单选按钮值。我有三个输入类型的收音机，具有</
浏览 0提问于2019-01-04得票数 5
回答已采纳
这似乎是一个简单的问题，但是我如何创建一个基本的HTML表单，该表单具有一系列的单选按钮选项，最后一个是文本字段来填充自定义响应(即“其他”)。
浏览 2提问于2012-10-15得票数 19
回答已采纳
4回答
同名单选字段
、、、
使用HTML表单，您可以具有相同名称的输入字段，并为每个字段自动分配关键字，例如：<input type="text" name作为一个关联数组，它看起来像这样：[phone] => Array ( [0] => 123456789 [1] => 987654321 )其中键0,1是自动给出<
浏览 0提问于2011-04-11得票数 0
回答已采纳
1回答
我有两组单选按钮，我想使用这两组的返回值并进行验证。用户必须从这两个组中至少选择一个值；用户也可以从两个组中选择两个值。我不能抛出警报，我是使用标签的错误在页面上提交。我不明白的是，如何给用户选择任何单选按钮的自由，如果选择了一个单选按钮，错误就会消失。 $('.validation-error').
浏览 3提问于2014-04-30得票数 0
回答已采纳
我有两个div，并且在两个div中具有相同名称和值的单选按钮组。在第一个div中选择单选按钮时，我想自动选择另一个div中具有相同名称和值的单选按钮。我不能为每个单播组手动传递名称或id，因为页面上有100多个组。我怎么才能动态地做呢？
我尝试过jsfiddle，但不能工作。
浏览 2提问于2015-08-20得票数 0
2回答
;\"" + "/>");...that创建HTML多个textarea元素并将它们发布到servlet。但由于所有的文本区域都具有相同的名称，因此只发布第一个
浏览 2提问于2015-09-24得票数 0
我希望能够选择一个基于用户输入的单选按钮。此单选按钮有多个名称相同的选项。" type="radio" value="false" name="enabled"> </label>
如果" Enabled“作为字符串传递，我应该能够选择第一个具有可见文本
浏览 1提问于2013-02-13得票数 7
回答已采纳
2回答
我以前经常通过输入单选按钮的id和名称来开发Web表单，但似乎无法在MVC5中获得它，有人能指出我做错了什么吗？在单选按钮(模型的一部分)选择，取决于哪个按钮，我想要另一个文本框出现(在一个div内)。<p>AS Number Type</p>
浏览 2提问于2015-05-12得票数 1
回答已采纳
2回答
我正在尝试从具有主键-course_id的课程表中获取数据。表中有部门和代码列。我想循环浏览所有课程，并使用单选按钮打印部门和部门代码。fetch_assoc()) {
print"<input type='radio' name='course' value='$row[course_id]'><br/>"; 它循环浏览课程，但不会在单选<
浏览 37提问于2021-10-17得票数 0
回答已采纳
第二个Div包含一个“必需的”输入，所以简单地通过javascript将div更改为display=none实际上并不会使页面完全忽略隐藏的div。编辑2:我试着删除下面的第二个JS代码块，并将动态PHP代码直接插入到input和div标签中，以更改显示-仍然没有成功。网站上的用户可以选择点或邮票-我通过PHP从数据库获得值，表单应该有相关的单选按钮选中，只显示与该单选按钮相关<e
浏览 1提问于2014-05-13得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
腾讯会议
云直播
对象存储活动推荐
腾讯云开发者
