javascript - 如何在PHP中向数据库提交多个表单？-6ren

javascript - 如何在PHP中向数据库提交多个表单？

转载作者：行者123 更新时间：2023-11-29 16:08:41

所以我的系统的一部分是我必须提交费用报告，但我不能逐行提交它们。用户需要添加新费用的选项，以便在同一行程下提交。我有一部分正在工作，用户可以添加新的费用，这会重复原始表格。但是，我不确定如何将超过 1 个表单发送到我的数据库并将其另存为一个。也不确定重复的表单是否会根据其生成方式与我的原始表单混淆

原始形式:

JSFiddle of expenses form

然后这是我的 PHP，用于将表单输入的值插入数据库:

    if(isset($_POST['submit'])) {
    try {
        $sql = "INSERT INTO expenses (userid, submitted_date, receiptid, description, categoryid, clientid, billable, paymentid, currencyid) VALUES (:userid, :submitted_date, :receiptid, :description, :categoryid, :clientid, :billable, :paymentid, :currencyid)";

        $statement = $connection->prepare($sql);

        $userID = filter_input(INPUT_POST, 'userid');
        $statement->bindValue(':userid', $userID, PDO::PARAM_STR);

        $subDate = filter_input(INPUT_POST, 'submitted_date');
        $statement->bindValue(':submitted_date', $subDate, PDO::PARAM_STR);

        $receipt = filter_input(INPUT_POST, 'receiptid');
        $statement->bindValue(':receiptid', $receipt, PDO::PARAM_STR);

        $description = filter_input(INPUT_POST, 'description');
        $statement->bindValue(':description', $description, PDO::PARAM_STR);

        $category = filter_input(INPUT_POST, 'categoryid');
        $statement->bindValue(':categoryid', $category, PDO::PARAM_STR);

        $client = filter_input(INPUT_POST, 'clientid');
        $statement->bindValue(':clientid', $client, PDO::PARAM_STR);

        $billable = filter_input(INPUT_POST, 'billable');
        $statement->bindValue(':billable', $billable, PDO::PARAM_STR);

        $paymenttype = filter_input(INPUT_POST, 'paymentid');
        $statement->bindValue(':paymentid', $paymenttype, PDO::PARAM_STR);

        $currencyid = filter_input(INPUT_POST, 'currencyid');
        $statement->bindValue(':currencyid', $currencyid, PDO::PARAM_STR);

        print_r($sql);
        $statement->execute();
        $connection = null;

        echo '<script language="javascript">';
        echo 'alert("Expense has been added to the database.");';
        echo 'window.location.href = "submit.php";';
        echo '</script>';
      } catch (PDOException $e) {
        // for dev
        print "We had an error: " . $e->getMessage() . "<br>";
        die();
    }
?>
<?php } else { ?>
<!DOCTYPE html>

提前致谢!

最佳答案

这是第 1 部分的答案

如何向 PHP 提交多项费用

我为提交按钮提供了一个 ID，并注释掉了实际将其发送到服务器的代码

第二个问题是如何接收它们，您可以搜索

parse json with PHP

这是一个答案

How do I extract data from JSON with PHP?

$(".nav-tabs").on("click", "a", function(e) {
    e.preventDefault();
    if (!$(this).hasClass('addNew')) {
      $(this).tab('show');
    }
  })
  .on("click", "span", function() {
    var anchor = $(this).parent('a');
    $(this).parent().parent().remove();
    $(".nav-tabs li").children('a').first().click();
  });

var defaultValues = $('#expense_1>.card-body').html()

$('.addNew').click(function(e) {
  e.preventDefault();
  var id = $(".nav-tabs").children().length; //think about it ;)
  var tabId = 'expense_' + id;
  $(this).closest('li').before('<li class="nav-item"><a class="nav-link" data-toggle="tab" href="#expense_' + id + '">Expense #' + id + ' <span>x</span></a></li>');
  $('.tab-content').append('<div class="tab-pane fade" id="' + tabId + '"><div class="card-header">Expense #' + id + '</div><div class="card-body">' + defaultValues + '</div></div>');
  $('.nav-tabs li:nth-child(' + id + ') a').click();
});

$("#Submit").on("click",function(e) { // clicking the submit link
  e.preventDefault(); // stop the link from actually running
  var expenses = []; // create an array
  $(".card-header").each(function(){ // we have one header per expense
    var expense = {}
    var title = this.textContent; // it has a title
    expense[title] = {}
    $(this).next().find("[name]").each(function() { // the next div has named fields (IDs need to be unique so I ignore them
      expense[title][this.name]=this.value || ""; // save the name and value if any
    })
    expenses.push(expense); // add to array
  })
  console.log(expenses); // remove this when you are happy and uncomment next 3 lines of code
  // here you AJAX the expenses to the server
  // $post("submit.php",{ data: expenses },function(res) {
  //   console.log(res); // you want to show this somewhere 
  // });
});

body {
  background: #464646;
  color: #ddd;
  margin-bottom: 25px;
}

.navbar {
  background-color: #4a7aae;
  font-size: 20px;
}

.my-shadow {
  box-shadow: 0 8px 6px -6px #000000;
}

.navbar .navbar-brand {
  color: #ddd;
}

.navbar .navbar-brand:hover,
.navbar .navbar-brand:focus {
  color: #ddd;
}

.navbar .navbar-text {
  color: #ddd;
}

.navbar .navbar-text a {
  color: #ddd;
}

.navbar .navbar-text a:hover,
.navbar .navbar-text a:focus {
  color: #ddd;
}

.navbar .navbar-nav .nav-link {
  color: #ddd;
  border-radius: .25rem;
  margin: 0 0.25em;
}

.navbar .navbar-nav .nav-link:not(.disabled):hover,
.navbar .navbar-nav .nav-link:not(.disabled):focus {
  color: #ddd;
}

.navbar .navbar-nav .dropdown-menu {
  background-color: #222;
  border-color: #000;
}

.navbar .navbar-nav .dropdown-menu .dropdown-item {
  color: #ddd;
}

.navbar .navbar-nav .dropdown-menu .dropdown-item:hover,
.navbar .navbar-nav .dropdown-menu .dropdown-item:focus,
.navbar .navbar-nav .dropdown-menu .dropdown-item.active {
  color: #ddd;
  background-color: #4a7aae;
}

.navbar .navbar-nav .dropdown-menu .dropdown-divider {
  border-top-color: #4a7aae;
}

.navbar .navbar-nav .nav-item.active .nav-link,
.navbar .navbar-nav .nav-item.active .nav-link:hover,
.navbar .navbar-nav .nav-item.active .nav-link:focus,
.navbar .navbar-nav .nav-item.show .nav-link,
.navbar .navbar-nav .nav-item.show .nav-link:hover,
.navbar .navbar-nav .nav-item.show .nav-link:focus {
  color: #ddd;
  background-color: #4a7aae;
}

.navbar .navbar-toggle {
  border-color: #6195cc;
}

.navbar .navbar-toggle:hover,
.navbar .navbar-toggle:focus {
  background-color: #6195cc;
}

.navbar .navbar-toggler {
  border-color: rgba(0, 0, 0, 0.5);
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar .navbar-collapse,
.navbar .navbar-form {
  border-color: #ddd;
}

.navbar .navbar-link {
  color: #ddd;
}

.navbar .navbar-link:hover {
  color: #ddd;
}

.nav-tabs a {
  color: #ddd;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item-show .nav-link {
  color: #ddd;
  background-color: #343a40;
  border-color: #9ea0a3;
}

input[type="checkbox"] {
  cursor: pointer;
  -webkit-appearance: none;
  background-color: #fff;
  appearance: none;
  border-radius: 1px;
  box-sizing: border-box;
  position: relative;
  box-sizing: content-box;
  width: 25px;
  height: 25px;
  border-width: 0;
  transition: all 0.1s linear;
}

input[type="checkbox"]:checked {
  background-color: #2ecc71;
}

input[type="checkbox"]:focus {
  outline: 0 none;
  box-shadow: none;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  /* display: none; <- Crashes Chrome on hover */
  -webkit-appearance: none;
  margin: 0;
  /* <-- Apparently some margin are still there even though it's hidden */
}

input[type="number"] {
  -moz-appearance: textfield;
}

hr {
  background-color: #ddd;
}

@media (max-width: 575px) {
  .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item {
    color: #ddd;
  }
  .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item:hover,
  .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item:focus {
    color: #ddd;
  }
  .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item.active {
    color: #ddd;
    background-color: #4a7aae;
  }
}

@media (max-width: 767px) {
  .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item {
    color: #ddd;
  }
  .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item:hover,
  .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item:focus {
    color: #ddd;
  }
  .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item.active {
    color: #ddd;
    background-color: #4a7aae;
  }
}

@media (max-width: 991px) {
  .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item {
    color: #ddd;
  }
  .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item:hover,
  .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item:focus {
    color: #ddd;
  }
  .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item.active {
    color: #ddd;
    background-color: #4a7aae;
  }
}

@media (max-width: 1199px) {
  .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item {
    color: #ddd;
  }
  .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item:hover,
  .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item:focus {
    color: #ddd;
  }
  .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item.active {
    color: #ddd;
    background-color: #4a7aae;
  }
}

.navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item {
  color: #ddd;
}

.navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item:hover,
.navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item:focus {
  color: #ddd;
}

.navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item.active {
  color: #ddd;
  background-color: #4a7aae;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Saggezza Expenses</title>
  <!-- Bootstrap Default CSS -->
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
  <!-- Font Awesome library -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

</head>

<body>
  <nav class="navbar navbar-expand-lg my-shadow">
    <!-- <div class="container"> -->
    <a href="home.php" class="navbar-brand">
      <img src="images/saggezza.png" width="141px" height="56px" title="Saggezza Logo" alt="saggezza-logo">
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
				<span class="navbar-toggler-icon"></span>
			</button>

    <div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
      <ul class="navbar-nav">
        <li class="nav-item active">
          <a href="home.php" class="nav-link">Expenses <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a href="submit.php" id="Submit" class="nav-link">Submit</a>
        </li>
        <li class="nav-item dropdown">
          <a href="#" class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Account</a>
          <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
            <a href="settings.php" class="dropdown-item">Account Settings</a>
            <a href="contact.php" class="dropdown-item">Contact Admin</a>
            <a href="logout.php" class="dropdown-item">Logout</a>
          </div>
        </li>
      </ul>
    </div>
    <!-- </div> -->
  </nav>
  <br>
  <div class="container">
    <h1 class="text-white">Submit an Expense Report</h1>
    <hr>
    <ul class="nav nav-tabs" role="tablist">
      <li class="nav-item"><a href="#expense_1" class="nav-link active" data-toggle="tab">Expense #1</a></li>
      <li class="nav-item"><a href="#" class="addNew nav-link">+ Add Expense</a></li>
    </ul>
    <div class="card bg-dark mb-6 tab-content" id="myTabContent">
      <div class="tab-pane active show fade" id="expense_1">
        <div class="card-header">Expense #1</div>
        <div class="card-body">
          <form enctype="multipart/form-data" autocomplete="off" action="/submit.php" method="post">
            <div class="form-group row">
              <label for="userid" class="col-sm-2 col-form-label">User ID</label>
              <div class="col-sm-10">
                <input type="text" class="form-control" id="userid" name="userid" style="max-width: 55px;" required>
              </div>
            </div>
            <div class="form-group row">
              <label for="submitted_date" class="col-sm-2 col-form-label">Date</label>
              <div class="col-sm-10">
                <input type="date" class="form-control" id="submitted_date" name="submitted_date" style="max-width: 165px;" required>
              </div>
            </div>
            <div class="form-group row">
              <label for="receiptid" class="col-sm-2 col-form-label">Receipt</label>
              <div class="col-sm-10">
                <select name="receiptid" id="receiptid" class="form-control" required>
                  <option value="selectOne">Choose Option</option>
                  <option value="1">
                    Yes - Soft Copy </option>
                  <option value="2">
                    Yes - Hard Copy </option>
                  <option value="3">
                    No - No Receipt </option>
                </select>
              </div>
            </div>
            <div class="form-group row">
              <label for="description" class="col-sm-2 col-form-label">Description</label>
              <div class="col-sm-10">
                <textarea class="form-control" name="description" id="description" rows="3" required></textarea>
              </div>
            </div>
            <div class="form-group row">
              <label for="categoryid" class="col-sm-2 col-form-label">Category</label>
              <div class="col-sm-10">
                <select name="categoryid" id="categoryid" class="form-control" required>
                  <option value="selectTwo">Choose Option</option>
                  <option value="1">Employee Rewards </option>
                  <option value="2">Consumables </option>
                  <option value="3">General Office Expenses </option>
                  <option value="4">General Travel: Accommodation </option>
                  <option value="5">General Travel: Travel </option>
                  <option value="6">General Travel: Substinence </option>
                  <option value="7">Sales Travel: Accommodation </option>
                  <option value="8">Sales Travel: Travel </option>
                  <option value="9">Sales Travel: Subsistence </option>
                  <option value="10">Sales Entertaining </option>
                  <option value="11">Staff Entertaining </option>
                  <option value="12">Recruitment Fees </option>
                  <option value="13">Visa & Immigration </option>
                  <option value="14">Software and IT </option>
                  <option value="15">Staff Training </option>
                  <option value="16">Stationery & Office Supplies </option>
                  <option value="17">Telephone & Conference </option>
                  <option value="18">Other </option>
                </select>
              </div>
            </div>
            <div class="form-group row">
              <label for="clientid" class="col-sm-2 col-form-label">Client Name</label>
              <div class="col-sm-10">
                <select name="clientid" id="clientid" class="form-control" required>
                  <option value="selectThree">Choose Option</option>
                  <option value="1"> Saggezza - UK </option>
                  <option value="2"> Saggezza - US </option>
                  <option value="3"> Client... </option>
                </select>
              </div>
            </div>
            <div class="form-group row">
              <label for="clientproject" class="col-sm-2 col-form-label">Client Project</label>
              <div class="col-sm-10">
                <input type="text" class="form-control" disabled readonly id="clientproject" value="To be edited by admin">
              </div>
            </div>
            <div class="form-group row">
              <label for="billable" class="col-sm-2 col-form-label">Billable to Client?</label>
              <div class="col-sm-10">
                <div class="form-check">
                  <input type="checkbox" class="form-check-input" id="billable">
                </div>
              </div>
            </div>
            <div class="form-group row">
              <label for="paymentid" class="col-sm-2 col-form-label">Payment Method</label>
              <div class="col-sm-10">
                <select name="paymentid" id="paymentid" class="form-control">
                  <option value="selectFour">Choose Option</option>
                  <option value="1"> Own Card </option>
                  <option value="2"> Corporate Card </option>
                </select>
              </div>
            </div>
            <div class="form-group row">
              <label for="currencyid" class="col-sm-2 col-form-label">Currency</label>
              <div class="col-sm-10">
                <select name="currencyid" id="currencyid" class="form-control">
                  <option value="selectFour">Choose Option</option>
                  <option value="1"> GBP </option>
                  <option value="2"> USD </option>
                  <option value="3"> EUR </option>
                </select>
              </div>
            </div>
            <div class="form-group row">
              <label for="amountnum" class="col-sm-2 col-form-label">Amount</label>
              <div class="col-sm-10">
                <input type="number" value="0" min="0" name="amountid" id="amountid" class="form-control">
              </div>
            </div>
          </form>
        </div>
      </div>
      <div class="tab-pane" id="expense_1"></div>
    </div>
  </div>




</body>

</html>

关于javascript - 如何在PHP中向数据库提交多个表单？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55497790/

文章推荐： mysql - 如何使用 Lookup 函数对表中列的值求和

文章推荐： javascript - 如何在 Three.js 中挤出圆形几何体？

symfony - 多对多 Ajax 表单(Symfony2 表单)
我在 mongodb 中的玩家和锦标赛之间存在多对多关系。我希望能够一次将许多玩家添加到锦标赛中。如果没有 ajax，这很简单，但我们有一个包含数千名玩家的数据库，因此表单选择变得巨大。我们想为此
java - spring 表单 vs html 表单
这个问题已经有答案了: When should I use html's and when spring's in Spring MVC web app? (3 个回答) 已关闭 6 年前。我正
delphi - 如何将对话框(表单)中的 20 个项目的值传递给调用者(表单)
我正在 C++ Builder XE4 上使用 VCL。我有以下组件。 FormMain 具有 TButton *B_select; FormSelect(或DialogSelect)具有 TCom
delphi - 表单 :Transparent, 表单 :non Transparent? 上的控件
如何在不影响表单控件的情况下更改表单的 alphablend？德尔福XE7 最佳答案此问题的一个解决方案是使用多设备应用程序(如果无法使用VCL)。如果您需要保留透明的TForm，只需更改属性T
php - 动态 JavaScript 表单，无 HTML 表单
很难说出这里要问什么。这个问题模棱两可、含糊不清、不完整、过于宽泛或夸夸其谈，无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开，visit the help center . 关闭 1
django 表单 is_valid 总是失败(扩展 django-registration 表单)
我正在尝试扩展 Django 注册以包含我自己的注册表单。原则上这是相当简单的。我只需要编写自己的表单( CustomRegistrationForm )，它是原始表单( RegistrationFo
python - ListView 中的 Django 表单，表单 POST 时出错
我正在尝试为我的网站实现聊天功能。为了做到这一点，我遵循了以下教程:https://channels.readthedocs.io/en/latest/tutorial/ 然后我稍微更改了代码以实现它
python - 一个 html 表单，几个相互关联的 django 表单 - 如何保存？
有一个问题，我需要用一个 html 表单提交两个相互关联的模型表单。我知道如何提交两个单独的表格，但是在相关模型表格的情况下外键让我发疯。问题是，第二个表单应该用外键填充字段到第一个表单的实例。在
javascript - 从 XSD 创建 Web 表单，然后输出 xml 表单
我正在创建一个工具，允许某人输入食谱，然后将其保存为 XML 文件，我已经创建了 XSD，但我想知道如何在我的网页上制作一个表单以允许用户输入他们的食谱并遵守模式。我一直在研究 Ajax 和 Jque
c# - .net win 表单(如 asp.net web 表单)中是否有可用的验证控件？
在 .net win 表单(如 asp.net web 表单)中是否有可用的验证控件？因为很难为我的每个控件设置正确的条件，所以我的表单中也有很多重复的代码。正确的做法是什么？最佳答案看看这个
Javascript 表单
我有一个简短的问题。我正在学习如何使用 javascript 制作注册表，发现此链接非常有用。 http://www.w3resource.com/javascript/form/javascript
JavaScript/表单
我正在开发一个项目，该项目将使用循环将许多表单添加到 mysql 数据库中。在 javascript 部分中，我无法让 var i 在函数 updatesum() 中工作。有人可以帮我吗？我试图避免
Android - 表单
在我的应用程序上有一个包含 2 个字段和一个保存按钮的表单。在我的 onClick 结束时我需要什么来将光标返回到第一个字段。我有这个来清除它们 txtData.setText("
类似于谷歌日历重复选项的javascript插件/表单
这个问题不太可能帮助任何 future 的访问者；它只与一个小的地理区域、一个特定的时间点或一个非常狭窄的情况有关，这些情况并不普遍适用于互联网的全局受众。为了帮助使这个问题更广泛地适用，visit
表单数字字符验证正则
<input type="text" name="textfield" onKeyPress="javascript:alert(event.
基本模板上的 Django 表单
我正在构建的网站有一个登录表单，作为所有其他模板扩展的 base.html 模板的一部分；因此，我需要以某种方式处理每个页面上的登录/注销逻辑。目前每个页面都在单独的 View 中加载，那么实现它的
Django UpdateView 表单
我有一个表单类，看起来像.. #forms.py class ExampleForm(forms.Form): color = forms.CharField(max_length=25)
django 表单 error_class
有没有办法在表单定义中给表单一个特殊的错误渲染函数？在 customizing-the-error-list-format 下的文档中它展示了如何为表单提供特殊的错误呈现函数，但似乎您必须在实例化表单
Redux 表单 - 如何将字段设置为触摸
我正在处理由多个页面组成的表单，我想解决验证问题。当我点击提交按钮时，当前页面上的所有字段都会在下方显示错误消息，但是如果我更改页面，那么我需要再次点击提交，因为这些字段未设置为已触摸。如果我可以
Django 表单 - 附加到类元排除和小部件
是否可以附加到继承表单的 exclude 或 widgets 变量？到目前为止，我有以下设置。 class AddPropertyForm(forms.ModelForm): num_mon

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 如何在PHP中向数据库提交多个表单？