将动态行和按钮保存添加到数据库中

时间:2014-04-02 12:28:08

标签: javascript php jquery html 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 个答案:

答案 0 :(得分:0)

我只是略过了你的代码(因为它的例子太多了),但看起来你的javascript按照id工作。

$("#proj4").autocomplete({...

考虑将其更改为按类工作:".proj4",以便自动完成功能可以在多个元素上运行。