以单个表单发送多个 DIV 容器内容

Posted 2023-05-09

【中文标题】以单个表单发送多个 DIV 容器内容

【英文标题】：Sending multiple DIV container content in a single form

【发布时间】：2021-01-11 12:10:32

【问题描述】：

这个表单提交实际上工作得很好，直到我尝试重新格式化它以获得更用户友好的版本。表单非常长，有 32 个字段，所以我想我可以直观地将它们分解为可折叠的 div 容器，以便用户只能展开他们想要更新的部分。它本质上是 DND 网站的个人资料页面，因此字段调用 SQL 数据库中的数据并显示它，用户可以更新它们并提交他们想要进行的任何更改。字段仍然显示正确的数据，但完成这些更改后，单击提交按钮时没有任何反应。

是否可以使用此方法将数据传输到 mysql 数据库，或者是否有更好的方法来创建可折叠部分以保持表单已设置的工作状态？

关于代码的唯一更改是添加了：

<input class="toggle-box1" id="identifier-1" type="checkbox" >
<label for="identifier-1"> ORIGINAL SECTION TITLE</label>
<div>FORUM FIELDS</div

这里是部分原始代码，不是全部代码：

<h3>Character Detials</h3>
<h6>Character Name:</h6>
<input name="Charname" type="text" value="<?php echo $row_Recordset1['Charname']; ?>" size="40" /> 
<br>
<p></p>
<h6>Trillian ID:</h6>
<input name="YahooID" type="text" value="<?php echo $row_Recordset1['YahooID']; ?>" size="40" /><br>
<p></p>
<h6>Title:</h6>
<input name="Title" type="text" value="<?php echo $row_Recordset1['Title']; ?>" size="40" /><br>
<p></p>
<h6>Race:</h6>
<input name="Race" type="text" value="<?php echo $row_Recordset1['Race']; ?>" size="40" /><br>
<p></p>
<h6>Birth Place:</h6>
<input name="BirthPlace" type="text" value="<?php echo $row_Recordset1['BirthPlace']; ?>" size="40"/><br>
<p></p>
<h6>Apparent Age:</h6>
<input name="ApparentAge" type="text" value="<?php echo $row_Recordset1['ApparentAge']; ?>" size="40"/><br>
<p></p>
<h6>Actual Age:</h6>
<input name="ActualAge" type="text" value="<?php echo $row_Recordset1['ActualAge']; ?>" size="40" /> 
<br>
<p></p>
<h6>Height:</h6>
<input name="Height" type="text" value="<?php echo $row_Recordset1['Height']; ?>" size="40" /><br>
<p></p>
<h6>Weight:</h6>
<input name="Weight" type="text" value="<?php echo $row_Recordset1['Weight']; ?>" size="40" /><br>
<p></p>
<h6>Hair Color:</h6>
<input name="HairColor" type="text" value="<?php echo $row_Recordset1['HairColor']; ?>" size="40" /> 
<br>
<p></p>
<h6>Eye Color:</h6>
<input name="EyeColor" type="text" value="<?php echo $row_Recordset1['EyeColor']; ?>" size="40" /> 
<br>
<p></p>

变化之后：

    <input class="toggle-box1" id="identifier-1" type="checkbox" >
<label for="identifier-1"><h6 style="font-size:32px">Character Details</h6></label>
<div><h6 style="font-size:32px; padding:0px 0px 10px;">Character Name:</h6>
<input name="Charname" style="font-size:30px;" type="text" value="<?php echo $row_Recordset1['Charname']; ?>" size="28" />
<p></p>
<h6 style="font-size:32px; padding:18px 0px 10px;">Trillian ID:</h6>
<input name="YahooID" style="font-size:30px;" type="text" value="<?php echo $row_Recordset1['YahooID']; ?>" size="28" /><br>
<p></p>
<h6 style="font-size:32px; padding:18px 0px 10px;">Title:</h6>
<input name="Title" style="font-size:30px;" type="text" value="<?php echo $row_Recordset1['Title']; ?>" size="28" /><br>
<p></p>
<h6 style="font-size:32px; padding:18px 0px 10px;">Race:</h6>
<input name="Race" style="font-size:30px;" type="text" value="<?php echo $row_Recordset1['Race']; ?>" size="28" /><br>
<p></p>
<h6 style="font-size:32px; padding:18px 0px 10px;">Birth Place:</h6>
<input name="BirthPlace" style="font-size:30px;" type="text" value="<?php echo $row_Recordset1['BirthPlace']; ?>" size="28" /><br>
<p></p>
<h6 style="font-size:32px; padding:18px 0px 10px;">Apparent Age:</h6>
<input name="ApparentAge" style="font-size:30px;" type="text" value="<?php echo $row_Recordset1['ApparentAge']; ?>" size="28" /><br>
<p></p>
<h6 style="font-size:32px; padding:18px 0px 10px;">Actual Age:</h6>
<input name="ActualAge" style="font-size:30px;" type="text" value="<?php echo $row_Recordset1['ActualAge']; ?>" size="28" /><br>
<p></p>
<h6 style="font-size:32px; padding:18px 0px 10px;">Height:</h6>
<input name="Height" style="font-size:30px;" type="text" value="<?php echo $row_Recordset1['Height']; ?>" size="28" /><br>
<p></p>
<h6 style="font-size:32px; padding:18px 0px 10px;">Weight:</h6>
<input name="Weight" style="font-size:30px;" type="text" value="<?php echo $row_Recordset1['Weight']; ?>" size="28" /><br>
<p></p>
<h6 style="font-size:32px; padding:18px 0px 10px;">Hair Color:</h6>
<input name="HairColor" style="font-size:30px;" type="text" value="<?php echo $row_Recordset1['HairColor']; ?>" size="28" /><br>
<p></p>
<h6 style="font-size:32px; padding:18px 0px 10px;">Eye Color:</h6>
<input name="EyeColor" style="font-size:30px;" type="text" value="<?php echo $row_Recordset1['EyeColor']; ?>" size="28" /><br>
<p></p></div>

【问题讨论】：

点击提交按钮时没有任何反应，您能否创建一个stack snippet，以便我们运行您的代码来帮助您。或者我们可以查看您的表单的替代方法。

您的表单提交在哪里？你真的使用表单元素，还是只是输入？

@EmielZuurbier 抱歉，我不明白如何从该页面链接制作堆栈 sn-p，但这里是网站页面链接：m.houseofblackflame.com/submitchara.php 它需要您登录 - 用户: testing pass: Testpassword 原始表单也将被更新，如果我可以使用相同的可扩展字段，该表单的非移动版本正在运行，位于houseofblackflame.com/submitchara.php

【参考方案1】：

要收集所有<input> 元素的数据并将其发送到服务器，您应该添加一个包含所有输入的<form> 元素。

<form action="/yourbackendendpoint.php" method="POST">
  <label for="field-first-name">Your first name</label>
  <input type="text" id="field-first-name" name="first-name" />
  <button type="submit">Submit the form</button>
</form>

表单元素需要您提供一些信息，例如数据应该发送到哪里。通常，您将其发送到您验证和处理用户输入的后端端点或文件。您可以在action 属性中指定此端点或文件。

method 属性确定用于发送或检索数据的 HTTP 方法。由于您要更新数据，我建议您使用 POST 方法。确保您的服务器期望与前端发送的方法相同。

检查您的每个<input> 元素是否具有有效的name 属性值。该值将是您在后端选择值的键，如下所示：

<!-- name = first-name, value = Mike -->
<input type="text" id="field-first-name" name="first-name" value="Mike" />

first-name 键现在的值为 Mike。当您发送时，您可以通过以下方式获取：

$_POST[ 'first-name' ] // 'Mike'

我希望这能为您解决一些问题。如果您有任何问题，请随时在下方提问。

【讨论】：

感谢您的回复。所有这些都已内置到表单中。唯一改变的元素是添加了标签。我已经用附加代码更新了 OP。我确实为您提供了一些测试登录详细信息，以了解桌面表单（正常工作）和新的移动表单如何工作。

您是否考虑过某些客户端验证会阻止使用 javascript 提交？

所有这些都已经存在，但是由于您的帖子，我注意到顶部的表单发布方法在我的编辑过程中被意外删除了。返回那些原始代码行现在很完美。但是，我有一个不再需要的字段，删除该字段会再次破坏表单提交。我将不得不更深入地研究它。我不再需要 spryfield1。

【参考方案2】：

在与 Emiel 讨论这个问题时，我注意到在为新的移动版本编辑表单时，我不小心删除了论坛顶部/开头所需的表单发布方法，doh

感谢大家的帮助！

【参考方案3】：

我注意到您在<label> </label> 中使用了<h6> </h6> 标记。根据 html 规范，这是不允许的，应该这样做。也许您的问题是由该问题引起的。

【讨论】：

如 OP 中所述，表单已经以这种方式设置并且可以正常使用 h 标签，这不是问题的原因。正是我概述的代码的添加破坏了表单提交。

更新：删除每个 H 标签并将其更改为