Php 在html中使用表线程将数据插入mysql
在html中插入表中的数据时遇到问题 这是我的HTML：Php 在html中使用表线程将数据插入mysql,php,html,Php,Html,在html中插入表中的数据时遇到问题 这是我的HTML： <table id="t1"> <colgroup> <col span="2" class="c2"> <col> <col class="c1"> </colgroup> <thread>
<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>
<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);
}
}
?>
必须包含带引号的数组键：
if($_POST['submit'])
{
这是您的第一个错误，但也许修复它也可以解决主要问题。否则，我们也需要您的数据库表结构。尽我所能，您的代码缺少实际添加数据的表单。您的javascript函数（经过一些调整后）将从第一个表单中获取值并构建一个新的HTML表行，但我认为这是第一个误解发生的地方，因为添加到HTML表中的数据将只是文本数据，不会像以前那样出现在任何提交后。为了完成数据的添加，新生成的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>
表，td{边框：1px实心灰色}
td，th{padding:0.5rem；}
{背景：灰色；颜色：白色；}
表td输入[type='text']{border:none；}
document.addEventListener（'DOMContentLoaded'，function（）{
//输入元素需要以特定方式格式化日期
//这是一种快速的方法
var myTime=document.getElementById（“myTime”）；
myTime.value=（新日期（））.toISOString（）.replace（/\Z/gi'）；
函数插入数据（e）{
e、 预防默认值（）
var str=myTime.value；
var e=document.getElementById（“小时”）；
var d=document.getElementById（“分钟”）；
var strUser=e.options[e.selectedIndex].text；
var strUser1=d.options[d.selectedIndex].text；
var a=parseInt（strUser）；
var c=parseInt（struer1）；
var empid=document.getElementById（“empid”）.value；
var empname=document.getElementById（“employees”）.value；
var开始=新日期（str）；
var end=新日期（str）；
end.setHours（end.getHours（）+a）；
end.setMinutes（end.getMinutes（）+c）；
var dateOptions={天：“2位”，月：“2位”，年：“数字”}；
var timeOptions={hour12:false，hour:'2位'，minute:'2位'}；
var start=start.tolocalString（'en'，dateOptions）+''+start.tolocalString（'en'，timeOptions）；
var end=end.tolocalString（'en'，dateOptions）+''+end.tolocalString（'en'，timeOptions）；
/*
每一新行在每个单元格中都有'input'元素
-这些输入元素用于实际添加
提交表单时的数据。
*/
var-purpose=document.getElementById（“purpose”）.value；
document.getElementById（“插入点”）.innerHTML+=“”；
document.getElementById（“empid”）.value=“”；
document.getElementById（“员工”）.value=“”；
document.getElementById（“myTime”）.value=“”；
document.getElementById（“小时”）.value=“0”；
document.getElementById（“分钟”）.value=“0”；
document.getElementById（“目的”）.value=“”；
myTime.value=（新日期（））.toISOString（）.replace（/\Z/gi'）；
}
函数addRow（e）{
document.forms.add.submit（）
}
函数ClearData（e）{
e、 预防默认值（）
document.getElementById（“empid”）.value=“”；
document.getElementById（“员工”）.value=“”；
document.getElementById（“myTime”）.value=“”；
document.getElementById（“小时”）.value=“0”；
document.getElementById（“分钟”）.value=“0”；
document.getElementById（“目的”）.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）
})
--挑选--
--挑选--
--挑选--
0
1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12
13
14
15
16
17
18
<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>
if($_POST['submit'])
{
<?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>