Question

所以，我有这个时间表，用HTML表格和Mysql数据库输入自行创建。它看起来像这样：

周 - 周一 - 周二 - 周三 - 周四 - 周五 - 周六 - 周日

例如，在星期二的第5周，我有工作， Stan 12:00 - 19:00。

我想在这一天添加另一名员工，我不想刷新页面，所以我尝试用ajax来做。所以我点击添加员工的按钮，我现在需要查看一个带有所有员工姓名选项框的小表格，以及当时的另一个输入。点击添加后，我需要它将员工姓名添加到时间表中，并且必须将其保存到数据库中。

这是时间表的样子：

有2次加号按钮。第二个加号按钮是我尝试添加的按钮，它不会将我重定向到另一个页面，只是切换一个分区。因此，每当我点击第二个加号按钮时，我都会这样：

现在我可以轻松选择一名员工并给他们一个工作时间。但现在这是我的问题。如果我添加它们，我希望它将员工添加到数据库中，如下所示：

INSERT INTO rooster (idusers,week, thuesday) VALUES ('1','8','12:00 - 16:00');

它需要将员工姓名和时间添加到当天，就像其他名称一样（您在图片中看到）。

所以，加按钮 - ＆gt;显示可以添加员工的部门 - ＆gt;将员工添加到数据库并显示名称和时间，就像页面上的其他名称一样。

现在，当我添加某人时，它只会向我显示一些文本，因为我已经在每个表行中使用了结果类分区，它会在每行中自动更新它，这不是我的意图。

文字只需要在我添加某人的那天出现。跟着这些步骤：

这是我使用的代码：对于加号按钮（第二个）：

echo ' <a class="first" style="cursor: pointer; cursor: hand;"><i class="fa fa-plus-square"></i></a>
       <form method="POST" id="reg-form" style="display:none;">
     <div id="form" class="result">


      <select name="gebruikersnaam" class="design">';
                                        while ($row = mysqli_fetch_array($all_u)) {
                                        echo "<option value='".$row['gebruikersnaam']."'>".$row['gebruikersnaam']."</option>";
                                        }
                                    echo '</select>

        <br/><input type="text" value="00:00 - 24:00" name="test"/>      
        <button type="submit">+</button>


      </div>
      </form>   
';

对于ajax处理：

$(document).on('submit', '#reg-form', function()
 {

  //var fn = $("#fname").val();
  //var ln = $("#lname").val();

  //var data = 'fname='+fn+'&lname='+ln;

  var data = $(this).serialize();


  $.ajax({

  type : 'POST',
  url  : 'submit.php',
  data : data,
  success :  function(data)
       {
      $("#reg-form").fadeOut(500).hide(function()
      {
       $(".result").fadeIn(500).show(function()
       {
        $(".result").html(data);
       });
      });

       }
  });
  return false;
 });

和submit.php（对于ajax）

<?php
if($_POST)
{
 $fname = $_POST['fname'];
 $lname = $_POST['lname'];
 $email = $_POST['email'];
 $phno = $_POST['phno'];

 ?>

    <table border="0">

    <tr>
    <td colspan="2">Succedd !!!</td>
    </tr>

    <tr>
    <td colspan="2"><hr /></td>
    </tr>

    <tr>
    <td>First Name</td>
    <td><?php echo $fname ?></td>
    </tr>

    <tr>
    <td>Last Name</td>
    <td><?php echo $lname ?></td>
    </tr>

    <tr>
    <td>Your eMail</td>
    <td><?php echo $email; ?></td>
    </tr>

    <tr>
    <td>Contact No</td>
    <td><?php echo $phno; ?></td>
    </tr>

    </table>
    <?php

}

?>

如果您需要更多信息，请您提问！如果你想近距离观看，请给我一个PM，我会给你一个测试账号。

感谢您的帮助！

Answer 1

如果您有多种表单 - 要么使用不同的ids，要么只使用class：

<form method="POST" class="reg-form" style="display:none;">
    <div id="form" class="result"> // and remove this id too

Js处理程序：

$(document).on('submit', '.reg-form', function()  // class reg-form
{
    var data = $(this).serialize();
    // here you use $(this). Do you know what is it? It'a jquery object of your submitted form

    // we need `this$` variable because in a functions `this` 
    // refers to some different objects, not submitted form
    var this$ = $(this);

    $.ajax({
        type : 'POST',
        url  : 'submit.php',
        data : data,
        success :  function(data)
        {
            // now you want to fade out only the submitted form
            // but the submitted form is this$
            this$.fadeOut(500).hide(function()
            {
                // and you want to show only one .result
                // which is inside your submitted form - use .find
                this$.find(".result").fadeIn(500).show(function()
                {
                    // same here
                    this$.find(".result").html(data);
                });
            });

        }
});
return false;
}

在一个页面上使用ajax提交多个唯一表单

1 个答案: