表单提交后重新打开切换答案

【问题标题】：Reopen toggle after form submit表单提交后重新打开切换
【发布时间】：2019-04-02 08:33:46
【问题描述】：

我仍在处理我的学校项目，该项目几乎完成了。在您的帮助下，我成功地创建了一个允许用户向/从数据库写入、编辑和删除数据的工作系统。我现在唯一的问题是“用户友好的表单”。我设法创建了自动对焦，在编辑时插入正确的值，以便用户可以看到之前在该字段中写入的内容等。我用 jquery 隐藏了我的表单。当用户点击添加时，表单滑入。我需要实现的是：“当用户点击提交并且页面刷新并将元素添加到数据库时，表单应该再次出现，以便用户可以更快地添加数据。”

这是我的代码。

  $(document).ready(function() {
    $('#x').click(function() {
      $('.y').toggle("slide");
    });
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="x">Click</div>
<div class="y" style="display: none;">
  <div class="container">
    <form action="insertzunanja.php" method="POST" id="x">
      <input type="hidden" name="narocilo" value="0.1412312">
      <input type="hidden" name="id" value="id-1">
      <input type="text" name="dolzina" style="width:49%;" placeholder="Dolzina (v cm)">
      <input type="text" name="sirina" style="width:49%;" placeholder="Sirina (v cm)">
      <input type="text" name="kolicina" value="1" style="width:49%;" placeholder="Kolicina">
      <input type="text" name="opombe" style="width:49%;" placeholder="Opombe">
      <input type="submit" value="Send">
    </form>
  </div>
</div>

谢谢和最好的问候。

【问题讨论】：

当用户第一次切换form时，您可以在URL中添加一个参数。所以刷新后（为什么你还需要refresh？）URL 保持不变，你会知道表单应该是可见的。
我需要刷新以便表格可以更新并且输入可以看到@MoshFeu
输入将是可见的，因为没有人隐藏它。您可以通过获取表格数据（使用 ajax）来刷新表格并重新生成表格。
你熟悉ajax吗？
@MoshFeu 不幸的是，我是一个初学者，如你所见:(

标签： php jquery html toggle

【解决方案1】：

您可以使用 AJAX 调用将数据发送到 php 文件而不是表单操作。根据你的代码，你会有这样的东西：

<div id="x">Dodaj</div>
 <div class="y" style="display: none;"> 
<div class="container">
<input type="hidden" name="narocilo" value="<?php echo $randomNum; ?>">
<input type="hidden" name="id" value="<?php echo $id; ?>">
    <input type="text" name="dolzina" style="width:49%;" placeholder="Dolzina (v cm)">
    <input type="text" name="sirina" style="width:49%;" placeholder="sirina (v cm)">
    <input type="text" name="kolicina" value="1" style="width:49%;" placeholder="Kolicina">
    <input type="text" name="opombe" style="width:49%;" placeholder="Opombe">
    <input id="sub" type="submit" value="Send">
</div>
</div>


$(document).ready(function(){
    $('#x').click(function() {
      $('.y').toggle("slide");
    });
});

$("sub").click(function(){
    $.post("insertzunanja.php",
    {
      dolzina: $("input[name=dolzina]"),
      sirin: $("input[name=sirina]")
    },
    function(){
       $("input[name=dolzina]").val("");
       $("input[name=sirina]").val("");
      if($('.y').is( ":hidden" )) {
        $('.y').toggle("slide");
      }
    });
  });

基本上，当您单击按钮时，您会使用 AJAX POST 请求调用 php，并将由 html 代码检索到的两个值 dolzina 和 sirin（注意：您有更多值要传递，因此相应地更改它）到 php 文件。 Jquery 删除输入字段的值并检查是否显示输入字段。如果没有显示输入字段。

【讨论】：

【解决方案2】：

如果您使用 PHP 处理表单提交并生成问题中的代码，并且您总是希望表单在提交后显示，您可以这样做：

在 PHP 代码中识别提交（例如isset($_REQUEST['id'])）。
[如果#1 为真] 在生成 jQuery 代码时，在 ready 函数中添加 $('.y').show();（但与现有的 click 函数分开）。

例子：

<?php
// your existing code...
?>
$(document).ready(function() {
    <?= ( isset($_REQUEST['id']) ? '$(".y").show();' : '' ); ?>

    $('#x').click(function() {
      $('.y').toggle("slide");
    });
  });
<?php
// your existing code...
?>

【讨论】：