Question

我仍在进行学校项目，该项目已接近尾声。在您的帮助下，我成功创建了一个工作系统，该系统允许用户向数据库中写入，编辑和删除数据。现在我唯一遇到的问题是“用户友好形式”。我设法创建自动聚焦，在编辑时插入正确的值，以便用户可以看到以前在该字段中写的内容，等等。我用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>

感谢和问候。

Answer 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删除输入字段的值，并检查是否显示输入字段。如果未显示，则显示输入字段。

Answer 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...
?>

提交表单后重新打开切换按钮

2 个答案: