php - 使用html中的表线程将数据插入mysql
问题描述
我在将数据插入到 html 中的表中时遇到了麻烦。
这是我的 HTML：
<table id="t1">
<colgroup>
<col span="2" class="c2">
<col>
<col class="c1">
</colgroup>
<thread>
<tr style="text-align: center; font-size: 16px;margin: 50px;">
<th >Employee ID</th>
<th>Fullname</th>
<th>Time Start</th>
<th>Time End</th>
<th>Purpose</th>
</tr>
</thead>
<tbody id="insertionPoint" style="text-align: center; font-size: 13px;margin: 50px;">
</tbody>
</table>
这看起来像：
Employee ID Fullname Time Start Time End Purpose
212 Beta Tester 03/15/2021 15:35 03/15/2021 17:35 hello
我的提交代码html：
<input type="submit" value="Insert" name="submit" onclick="addRow('t1')" />
<?php
$empid = $var_value = $_SESSION['username'];
$mysql_hostname = "localhost";
$mysql_username = "****";
$mysql_password = "***";
$mysql_database = "***";
$conn= mysqli_connect($mysql_hostname,$mysql_username,$mysql_password,$mysql_database);
// Check connection
if($_POST[submit])
{
foreach ($_POST['Employee ID'] as $key => $value)
{
$empid = $_POST["Employee ID"][$key];
$dstart = $_POST["Time Start"][$key];
$dend = $_POST["Time End"][$key];
$purpose = $_POST["Purpose"][$key];
$sql = "INSERT INTO `HR_OT_Items` (`Employee_ID`, `Date_Start`, `Date_end`, `Purpose`)values('$empid','$dstart','$dend','$purpose')";
if(mysqli_query($conn,$sql)){
echo '<script>alert("Successfully Saved!")</script>';
}
else{
echo 'Connection Failed';
}
mysqli_close($conn);
}
}
?>
提交后没有任何反应。MySQL 中没有数据。有人可以遇到这个吗？
编辑 去除杂乱的 HTML 表单中的基本元素
<form method="POST">
<select name="empid" id="empid" onchange="employees">
<option value="" >--Select--</option>
<?php
if (! empty($empids)) {
foreach ($empids as $empid) {
?>
<option value="<?php echo $empid;?>">
<?php echo $empid;?>
</option>
<?php
}
}
?>
</select>
<select name="employees" id="employees" onchange="empid">
<option value="" >--Select--</option>
<?php
if (! empty($fnames)) {
foreach ($fnames as $fname) {
?>
<option value="<?php echo $fname;?>">
<?php echo $fname;?>
</option>
<?php
}
}
?>
</select>
<input type="datetime-local" id="myTime" />
<select name="hours" id="hours">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
</select>
<select name="mins" id="mins">
<option value="0">0</option>
<option value="30">30</option>
</select>
<input type="button" onClick="ClearDate()" value="Clear">
<textarea name="textarea" id="purpose" style="width:100%;height:170px;"></textarea>
<input type="button" onClick="insertData()" value="Add entry">
<input type="submit" value="Insert" name="submit" onclick="addRow('t1')" />
</form>
支持Javascript函数：
<script language="javascript">
var myTime = document.getElementById("myTime");
myTime.value = new Date(myTime);
function insertData() {
var str = myTime.value;
var e = document.getElementById("hours");
var d = document.getElementById("mins");
var strUser = e.options[e.selectedIndex].text;
var strUser1 = d.options[d.selectedIndex].text;
var a = parseInt(strUser);
var c = parseInt(strUser1);
var empid = document.getElementById("empid").value;
var empname = document.getElementById("employees").value;
var start = new Date(str);
var end = new Date(str);
end.setHours(end.getHours() + a);
end.setMinutes(end.getMinutes() + c);
var dateOptions = { day: '2-digit', month: '2-digit', year: 'numeric' };
var timeOptions = { hour12: false, hour: '2-digit', minute:'2-digit' };
var starting = start.toLocaleString('en', dateOptions) + ' ' + start.toLocaleString('en', timeOptions);
var ending = end.toLocaleString('en', dateOptions) + ' ' + end.toLocaleString('en', timeOptions);
var purpose = document.getElementById("purpose").value;
document.getElementById("insertionPoint").innerHTML += "<tr><td>" + empid + "</td><td>" + empname + "</td><td>" + starting + "</td><td>" + ending + "</td><td>" + purpose + "</td></tr>";
// The below part is to clear the values after the entry is added.
document.getElementById("empid").value = "";
document.getElementById("employees").value = "";
document.getElementById("myTime").value = "";
document.getElementById("hours").value = "0";
document.getElementById("mins").value = "0";
document.getElementById("purpose").value = "";
}
</script>
<script language="javascript">
function ClearData() {
document.getElementById("empid").value = "";
document.getElementById("employees").value = "";
document.getElementById("myTime").value = "";
document.getElementById("hours").value = "0";
document.getElementById("mins").value = "0";
document.getElementById("purpose").value = "";
}
</script>
解决方案
据我所知，您的代码缺少实际ADD数据的表单。您的 javascript 函数（经过一些调整）将从第一个表单中获取值并构建一个新的 HTML 表格行，但我认为这是第一个误解发生的地方，因为添加到 HTML 表格中的数据将只是文本数据并且不会出现在任何 POST 提交中。为了完成数据的添加，新生成的 HTML 表格行应该在表单元素中包含数据（除非整个过程是使用 AJAX 完成的）——因此，考虑到这一点，我整理了一个工作演示（剥离了 HTML）希望复制您的情况并展示您如何做到这一点。如果这不是您想要的，那么我没有正确掌握我在 HTML 中看到的内容或问题。
<?PHP
error_reporting( E_ALL );
?>
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<title></title>
<style>
table,td{border:1px solid gray}
td,th{padding:0.5rem;}
th{background:gray;color:white;}
table td input[type='text']{border:none;}
</style>
<script>
document.addEventListener('DOMContentLoaded',function(){
// the input element needs the date formatted in a particular manner
// this was a quick way to do that
var myTime = document.getElementById("myTime");
myTime.value = ( new Date() ).toISOString().replace(/\Z/gi,'');
function insertData(e){
e.preventDefault()
var str = myTime.value;
var e = document.getElementById("hours");
var d = document.getElementById("mins");
var strUser = e.options[e.selectedIndex].text;
var strUser1 = d.options[d.selectedIndex].text;
var a = parseInt(strUser);
var c = parseInt(strUser1);
var empid = document.getElementById("empid").value;
var empname = document.getElementById("employees").value;
var start = new Date(str);
var end = new Date(str);
end.setHours(end.getHours() + a);
end.setMinutes(end.getMinutes() + c);
var dateOptions = { day: '2-digit', month: '2-digit', year: 'numeric' };
var timeOptions = { hour12: false, hour: '2-digit', minute:'2-digit' };
var starting = start.toLocaleString('en', dateOptions) + ' ' + start.toLocaleString('en', timeOptions);
var ending = end.toLocaleString('en', dateOptions) + ' ' + end.toLocaleString('en', timeOptions);
/*
Each new row will have `input` elements in each cell
- these input elements are used to actually ADD the
data when the form is submitted.
*/
var purpose = document.getElementById("purpose").value;
document.getElementById("insertionPoint").innerHTML += "<tr><td><input type='text' name='empid[]' value='" + empid + "' /></td><td><input type='text' name='name[]' value='" + empname + "' /></td><td><input type='text' name='time_start[]' value='" + starting + "' /></td><td><input type='text' name='time_end[]' value='" + ending + "' /></td><td><input type='text' name='purpose[]' value='" + purpose + "' /></td></tr>";
document.getElementById("empid").value = "";
document.getElementById("employees").value = "";
document.getElementById("myTime").value = "";
document.getElementById("hours").value = "0";
document.getElementById("mins").value = "0";
document.getElementById("purpose").value = "";
myTime.value = ( new Date() ).toISOString().replace(/\Z/gi,'');
}
function addRow(e){
document.forms.add.submit()
}
function ClearData(e){
e.preventDefault()
document.getElementById("empid").value = "";
document.getElementById("employees").value = "";
document.getElementById("myTime").value = "";
document.getElementById("hours").value = "0";
document.getElementById("mins").value = "0";
document.getElementById("purpose").value = "";
}
document.querySelector('input[type="button"][name="insertdata"]').addEventListener('click',insertData)
document.querySelector('input[type="submit"][name="addrow"]').addEventListener('click',addRow)
document.querySelector('input[type="button"][name="cleardate"]').addEventListener('click',ClearData)
})
</script>
</head>
<body>
<?php
# DUMMY DATA
$empids=array(
123456,78915423,4234645,64564573,2345756,23428754
);
$fnames=array(
'douglas','horatio','napoleon','bill','pocahontas','geronimo'
);
?>
<form method='POST'>
<select name='empid' id='empid' onchange='employees'>
<option selected hidden disabled>--Select--
<?php
if( !empty( $empids ) ) {
foreach( $empids as $empid ) {
?>
<option value='<?php echo $empid;?>'>
<?php echo $empid;?>
<?php
}
}
?>
</select>
<select name='employees' id='employees' onchange='empid'>
<option selected hidden disabled>--Select--
<?php
if( !empty( $fnames ) ) {
foreach( $fnames as $fname ) {
?>
<option value='<?php echo $fname;?>'>
<?php echo $fname;?>
<?php
}
}
?>
</select>
<input type='datetime-local' id='myTime' />
<select name='hours' id='hours'>
<option selected hidden disabled>--Select--
<option value='0'>0
<option value='1'>1
<option value='2'>2
<option value='3'>3
<option value='4'>4
<option value='5'>5
<option value='6'>6
<option value='7'>7
<option value='8'>8
<option value='9'>9
<option value='10'>10
<option value='11'>11
<option value='12'>12
<option value='13'>13
<option value='14'>14
<option value='15'>15
<option value='16'>16
<option value='17'>17
<option value='18'>18
<option value='19'>19
<option value='20'>20
<option value='21'>21
<option value='22'>22
<option value='23'>23
<option value='24'>24
<option value='25'>25
<option value='26'>26
<option value='27'>27
<option value='28'>28
<option value='29'>29
<option value='30'>30
</select>
<select name='mins' id='mins'>
<option selected hidden disabled>--Select--
<option value='0'>0
<option value='30'>30
</select>
<input type='button' value='Clear' name='cleardate' />
<textarea name='textarea' id='purpose' style='width:100%;height:170px;'></textarea>
<input type='button' value='Add entry' name='insertdata' />
<input type='submit' value='Insert' name='addrow' form='add' /><!-- assigned to other form that actually submits the data -->
</form>
<form id='add' method='post'>
<table id='t1'>
<colgroup>
<col span='2' class='c2'>
<col>
<col class='c1'>
</colgroup>
<thead>
<tr style='text-align: center; font-size: 16px;margin: 50px;'>
<th>Employee ID</th>
<th>Fullname</th>
<th>Time Start</th>
<th>Time End</th>
<th>Purpose</th>
</tr>
</thead>
<tbody id='insertionPoint' style='text-align: center; font-size: 13px;margin: 50px;'><!-- dynamic content here --></tbody>
</table>
</form>
<?php
$dbhost = 'localhost';
$dbuser = 'root';
$dbpwd = 'xxx';
$dbname = 'xxx';
try{
mysqli_report( MYSQLI_REPORT_STRICT );
$db = new mysqli( $dbhost, $dbuser, $dbpwd, $dbname );
}catch( Exception $e ){
echo $e->getMessage();
}
if( $_SERVER['REQUEST_METHOD']=='POST' ){
if( isset(
$_POST['empid'],
$_POST['time_start'],
$_POST['time_end'],
$_POST['purpose']
)){
$sql='INSERT INTO `hr_ot_items` ( `employee_id`, `date_start`, `date_end`, `purpose` ) VALUES ( ?, ?, ?, ? )';
$stmt=$db->prepare( $sql );
$stmt->bind_param('ssss', $empid, $start, $end, $purpose );
foreach( $_POST['empid'] as $i => $empid ){
$start=date( 'Y-m-d H:i:s', strtotime( $_POST['time_start'][$i] ) );
$end=date( 'Y-m-d H:i:s', strtotime( $_POST['time_end'][$i] ) );
$purpose=$_POST['purpose'][$i];
$res=$stmt->execute();
}
$stmt->close();
}
}
?>
</body>
</html>
推荐阅读
- c - C（ubuntu）中的Makefile多重定义
- php - 隐藏所有被屏蔽朋友的评论
- sql - 迭代 SQL 查询
- java - 从 maven spring mvc 创建表时出现问题
- data-structures - 如何进行线程二叉树后序遍历
- eclipse - 如何在 selenium 中具有相同功能的 2 个不同 URL 中运行相同的测试用例
- java - 我想获取字符串中的最后一个字母并根据字母打印真或假
- c# - 如何通过反射设置结构字段的值？
- java - 原因：java.sql.SQLException: Parameter index out of range (1 > number of parameters, which is 0)
- meteor - Iron-router中的中间件