Question

我有一个工作表单，带有javascript'添加行'按钮，数据收集和PHP处理。虽然它有效，但代码对我来说似乎相当高维护和笨拙（一方面，每当我更改表单时，我需要对添加新行的js进行相同的更改）。我正在寻找建议，使其更加时尚和简单。目前我正在为每个输入分配一个唯一的名称，隐藏的输入可以跟踪我的行数，然后我使用该数字来确定PHP脚本需要处理的for循环的数量。发布到数据库。

我考虑过的一件事是从输入名称改为使用名称[]，但我不确定这是否适合我的需要，以及我如何将每一行作为单独的记录发布到数据库。无论如何，这是代码。

HTML

<table id="table1">
    <tr style="display: none"><td colspan="2">
        <input type="hidden" id="samp_count" name="samp_counter" value="" />
        <input type="hidden" value="sample" name="type1" /></td>
    </tr>
    <tr>
    <td >pic caption </td>
        <td>
        <input type="text"  name="desc1"/></td></tr>
    <tr>
    <td >extended description</td>
    <td><textarea style="width:100%" rows="7" name="notes1"></textarea></td>
    </tr>
    <tr>
    <td>pic file</td>
    <td><input id="pic_file1" type="file" name="pic1" /></td>
   </tr>
</table>
<button type="button" class="add_row" width="40px" id="samp_add_button">add row

按钮的

JavaScript

$(document).ready(function(){
    $("#samp_count").val("1");
    $("#samp_add_button").click(function(){
        var iter_str=$("#samp_count").val();
        var pic_id = "#pic_file" + iter_str;
        if (!$(pic_id).val()){
            $("#samp_error").css("visibility","visible");
        }
        else{
                iter_str ++; // update counter
            $("#samp_count").val(iter_str); //reset counter in table header to current count
            var a = '<tr><td colspan="2" ><span>pic caption<input type="text"  name="desc'+iter_str+'"/></span><br /></td>";
            var b = '<td rowspan="3">extended description<br /><textarea style="width:100%" rows="7" name="notes'+iter_str+'"></textarea></td>';
            var c = '<tr><td colspan="2" >pic file</td><td><input id="pic_file'+iter_str+'" type="file" name="pic'+iter_str+'" /></td></tr>';
            $("#table1").append(a+b+c);
            $("#samp_error").css("visibility","hidden");
        }
    });
});

PHP

<?php

if(isset($_POST['send_button'])&&$isValid==TRUE){
    $user = $_POST['user'];
    $count_str1 = $_POST['samp_counter'];
    $count1 = intval($count_str1);
    for ($i=1; $i <= $count1; $i++) { 
        $desc= "desc".$i;
        $pic= "pic".$i;
        $notes= "notes".$i;
        $desc_con = $_POST[$desc];
        $notes_con = $_POST[$notes];
        if($_FILES[$pic]["name"]){
            if( formFileUpload($pic, $user)){   //custom function to validate and upload pics-- not relevant to question at hand
                  $uid_path = "portfolios/".$user."/";
                  $file_path=$uid_path.$_FILES[$pic]["name"];
                  $dbh = new PDO('mysql:host=localhost;dbname=db', 'admin','pass');
                  $dbh->setAttribute(PDO::ATTR_EMULATE_PREPARES, 1);
                  $statement=$dbh->prepare("INSERT INTO portfolios (UserID, Description,  FilePath, FileType,  Notes) VALUES (?,?,?,?,?)");
                  $statement->bindParam(1,$user);   
                  $statement->bindParam(2,$desc_con);
                  $statement->bindParam(3,$file_path);
                  $statement->bindParam(4,$_POST[type1]);
                  $statement->bindParam(5,$notes_con);
                  $statement->execute();

            }
                else{
            $fileErrorDis="inline";
            $isValid=FALSE;
            } }}
?>

Link to working website - 不言自明但希伯来语中的文字（在某些形式中，js尚未更新，新行与原始行不相似）

添加表格行的最佳做法

0 个答案: