將動態行和按鈕保存添加到數據庫中
[英]Adding dynamic row and button save into database
問題描述
我做了一個時間表。 問題是，每當我添加動態行時，我添加的第二行的函數自動完成功能都無法正常工作。 當我將按鈕保存在頁面底部時，刷新頁面會替換我的功能enter （用於自動完成）。 這是我的autocomplete.php文件的代碼：
<!--------------------------------- JOURNÉE DE DIMANCHE --------------------------->
<b>Dimanche</b> </br><?php echo $date1 ?>
</td>
<!-- numéro de projet du dimanche -->
<td>
<span id="numpro" >
<form method="post" action="" onsubmit="return false;">
<input type="text" id="name" name="add_name"onkeypress="return handleEnter(event, this, 'task');"/> <input onclick="addRow(this.form);" type="button" value="Add row" />
</form>
<html>
<div >
<form method="post" action="" onsubmit="return false;">
<div id="itemRows">
<?php
if($result!=false && mysqli_num_rows($result)>0){
while($product = mysqli_fetch_array($result)): ?>
<p id="oldRow<?=$product['id']?>"> <input type="text" name="name<?=$product['id']?>" value="<?=$product['name']?>" />
<?php endwhile;
}
?>
</div>
<p><input type="submit" name="ok" value="Save Changes"></p>
</form>
</div>
<script type="text/javascript">
var rowNum = 0;
function addRow(frm) {
rowNum ++;
var row = '<p id="rowNum'+rowNum+'"> <input type="text" name="name[]" value="'+frm.add_name.value+'"> <input type="button" value="Remove" onclick="removeRow('+rowNum+');"></p>';
jQuery('#itemRows').append(row);
frm.add_qty.value = '';
frm.add_name.value = '';
}
function removeRow(rnum) {
jQuery('#rowNum'+rnum).remove();
}
</script>
</span>
</td>
</td>
<!-- client du dimanche -->
<td>
<span id="proclient">
<input type="text" name="client1" class = "client" size="12" id ="client1" disabled />
</span>
</td>
<!-- description du projet de dimanche -->
<td>
<span id="prodesc">
<input type="text" name="desc1" size="30" id ="desc1" class "desc" disabled />
</span>
</td>
<!-- ddescription de la tache du dimanche -->
<td>
<span id="protache">
<textarea rows="1" cols="20" name="taskDesc1" id ="task1" class "task"> </textarea>
</span>
</td>
<!-- lieu pour dimanche -->
<td>
<span id="prolieu">
<input type="text" name="prolieu1" size="10" id ="lieu1" class "lieu">
</span>
</td>
<!-- tache -->
<td>
<span id="tache">
<!-- <input type="text" name="tache" size="30" id="tache"class= "tache" /> -->
<!-- début section cobobox tache avec tool tip -->
<label title="Select your state"> <select title="Select your state" id="state" name="state">
<?php
$stmt->execute();
while($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
echo ' <option title="';
echo $row['tacName'];
echo '">';
echo $row['tacId'];
echo '</option>'."\n";
$task = array();
//echo '<option value="'.$row['tacName'].'">'.$row['tacId'].'</option>'."\n";
}
?>
</select>
</label>
<!-- Fin section cobobox tache avec tool tip -->
</span>
</td>
<!-- calculter le temps pour le diamnche -->
<td>
<span id="calculTemps">
<input type="number" name="tempsd" size="30" id="temps1"class= "temps" min= "0" max="24" value="0" />
</span>
</td>
這是我的index.php
<html>
<head>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.3.js"></script>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<LINK rel=stylesheet type="text/css" href="main.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/minified/jquery-ui.min.css" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css"
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" />
<script type="text/javascript">
//------------------AUTO COMPLETE NUMÉRO DE PROJET----------------------
$(document).ready(function(){
//-------AUTO COMPLETE DIMANCHE PROJET-----
$("#name").autocomplete({
source:'getautocomplete.php',
minLength:1
});
//-------AUTO COMPLETE LUNDI PROJET-----
$("#proj1").autocomplete({
source:'getautocomplete.php',
minLength:1
});
//-------AUTO COMPLETE MARDI PROJET-----
$("#proj2").autocomplete({
source:'getautocomplete.php',
minLength:1
});
//-------AUTO COMPLETE MERCREDI PROJET-----
$("#proj3").autocomplete({
source:'getautocomplete.php',
minLength:1
});
//-------AUTO COMPLETE JEUDI PROJET-----
$("#proj4").autocomplete({
source:'getautocomplete.php',
minLength:1
});
//-------AUTO COMPLETE VENDREDI PROJET-----
$("#proj5").autocomplete({
source:'getautocomplete.php',
minLength:1
});
//-------AUTO COMPLETE VENDREDI PROJET-----
$("#proj6").autocomplete({
source:'getautocomplete.php',
minLength:1
});
});
//------------------COMPLETE CLIENT DESC DIMANCHE----------------------
function handleEnter(e, obj, field){
if (e.keyCode == 13 || e.which == 13){
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
tempArrayInJS = JSON.parse(xmlhttp.responseText);
$("#client1").val( tempArrayInJS[0]['cliName']);
$("#desc1").val( tempArrayInJS[0]['proDescription']);
}
}
xmlhttp.open("GET","completeclient.php?q="+obj.value,true);
xmlhttp.send();
}
//Enter was pressed, handle it here
}
//------------------COMPLETE CLIENT DESC LUNDI----------------------
function handleEnter2(e, obj, field){
if (e.keyCode == 13 || e.which == 13){
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
tempArrayInJS = JSON.parse(xmlhttp.responseText);
$("#client2").val( tempArrayInJS[0]['cliName']);
$("#projDesc2").val( tempArrayInJS[0]['proDescription']);
}
}
xmlhttp.open("GET","completeclient.php?q="+obj.value,true);
xmlhttp.send();
}
//Enter was pressed, handle it here
}
//------------------COMPLETE CLIENT DESC MARDI----------------------
function handleEnter3(e, obj, field){
if (e.keyCode == 13 || e.which == 13){
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
tempArrayInJS = JSON.parse(xmlhttp.responseText);
$("#client3").val( tempArrayInJS[0]['cliName']);
$("#projDesc3").val( tempArrayInJS[0]['proDescription']);
}
}
xmlhttp.open("GET","completeclient.php?q="+obj.value,true);
xmlhttp.send();
}
//Enter was pressed, handle it here
}
//------------------COMPLETE CLIENT DESC MERCREDI----------------------
function handleEnter4(e, obj, field){
if (e.keyCode == 13 || e.which == 13){
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
tempArrayInJS = JSON.parse(xmlhttp.responseText);
$("#client4").val( tempArrayInJS[0]['cliName']);
$("#projDesc4").val( tempArrayInJS[0]['proDescription']);
}
}
xmlhttp.open("GET","completeclient.php?q="+obj.value,true);
xmlhttp.send();
}
//Enter was pressed, handle it here
}
//------------------COMPLETE CLIENT DESC JEUDI----------------------
function handleEnter5(e, obj, field){
if (e.keyCode == 13 || e.which == 13){
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
tempArrayInJS = JSON.parse(xmlhttp.responseText);
$("#client5").val( tempArrayInJS[0]['cliName']);
$("#projDes5").val( tempArrayInJS[0]['proDescription']);
}
}
xmlhttp.open("GET","completeclient.php?q="+obj.value,true);
xmlhttp.send();
}
//Enter was pressed, handle it here
}
//------------------COMPLETE CLIENT DESC VENDREDI----------------------
function handleEnter6(e, obj, field){
if (e.keyCode == 13 || e.which == 13){
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
tempArrayInJS = JSON.parse(xmlhttp.responseText);
$("#client6").val( tempArrayInJS[0]['cliName']);
$("#projDes6").val( tempArrayInJS[0]['proDescription']);
}
}
xmlhttp.open("GET","completeclient.php?q="+obj.value,true);
xmlhttp.send();
}
//Enter was pressed, handle it here
}
//------------------COMPLETE CLIENT DESC Samedi----------------------
function handleEnter7(e, obj, field){
if (e.keyCode == 13 || e.which == 13){
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
tempArrayInJS = JSON.parse(xmlhttp.responseText);
$("#client7").val( tempArrayInJS[0]['cliName']);
$("#projDes7").val( tempArrayInJS[0]['proDescription']);
}
}
xmlhttp.open("GET","completeclient.php?q="+obj.value,true);
xmlhttp.send();
}
//Enter was pressed, handle it here
}
</script>
</head>
<body>
<script type="text/javascript" src="script/calcul.js"></script>
1 個解決方案
解決方案1
0 2014-06-12 14:25:35
我只是略過了您的代碼（因為示例太多了），但是看來您的JavaScript可以通過id在元素上工作。
$("#proj4").autocomplete({...
考慮將其更改為按類工作： ".proj4"以便自動完成功能可在多個元素上工作。
如果用戶未完成填寫該行並單擊“保存”按鈕，如何避免添加新行？
[英]How to avoid adding a new row if the user is not finished fill-up the rows and clicking the save button?
免費的JQGrid-添加第二行時inlineNav中的保存按鈕不起作用
[英]Free JQGrid - save-button in inlineNav not working when adding a second row
如何通過動態添加輸入字段將多行文本保存到數據庫？
[英]How to save more that one row of text to database by adding input fields dynamically?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.