在表单发布错误后保持显示动态表行


Keeping Dynamic Table Rows shown after form post errors

我有一个动态HTML表,允许用户在中输入收据项目,并且可以根据需要添加任意多的行。

如果他们忘记在表单POST中填写字段,我希望所有带有数据的行都保持显示,而实际情况是,它们的动态行消失了,并且在默认显示的一行中没有保存任何值。

我如何才能让那些动态表行显示出它们输入的值,以避免它们不得不再次输入所有数据?

 <?php
 if(isset($saveAdd))
{
$expenseType = safeDataMySQL($_POST['expenseType']);
//Save page, redirect to same page but increment receipt number.
if(empty($_POST['expenseNumber']))
    {
    //New expense so no records have been created as of yet. Otherwise, this would be stored in hidden field.
    $getRef = mysql_query("SELECT CAST(SUBSTRING(refNumber,4) AS UNSIGNED INTEGER) AS referenceNumber  FROM expense_main ORDER BY referenceNumber DESC LIMIT 1") or die("Ref No: " . mysql_error());
    if(mysql_num_rows($getRef) > 0)
        {
        while($refData = mysql_fetch_array($getRef))
            {
            //Expense Number!
            $refNumber = $refData['referenceNumber'];
            $refNumber = ($refNumber + 1);
            }
        $ins = mysql_query("INSERT INTO `expense_main` (`respid`, `refNumber`, `dateCreated`, `draftMode`, `expenseType`) VALUES ('".$respid."', 'USA".$refNumber."', NOW(), '1', '".$expenseType."')") or die("Expense Insert: " . mysql_error());
        $expClaimNumber = 'USA'.$refNumber;
        }
    }
else
    {
    $expClaimNumber = safeDataMySQL($_POST['expenseNumber']);
    }
//Get the next receipt in line as well
$getRec = mysql_query("SELECT receiptNumber FROM expense_details ORDER BY receiptNumber DESC LIMIT 1") or die("Get Receipt: " . mysql_error());
if(mysql_num_rows($getRec) > 0)
    {
    while($recData = mysql_fetch_array($getRec))
        {
        $receiptNumber = $recData['receiptNumber'];
        $receiptNumber = ($receiptNumber + 1);
        }
    }
$fields = array('recLineDate_', 'recLineCategory_', 'recLineDescr_', 'recLineAmount_');
foreach ($fields as $field) 
    {
    foreach ($_POST[$field] as $key=>$line) 
        {
        $returnArray[$key][$field] = $line;                             
        }
    }
foreach ($returnArray as $lineItem) 
    {
    if(empty($lineItem['recLineDate_']))
        {
        $Errors[] = 'You forgot to enter the receipt date.';
        }
    else
        {
        $recDate = safeDataMySQL($lineItem['recLineDate_']);
        }
    if(empty($lineItem['recLineCategory_']))
        {
        $Errors[] = 'You forgot to enter a category.';
        }
    else
        {
        $recCategory = safeDataMySQL($lineItem['recLineCategory_']);
        }
    if(empty($lineItem['recLineDescr_']))
        {
        $Errors[] = 'You forgot to enter a description.';
        }
    else
        {
        $recDescr = safeDataMySQL($lineItem['recLineDescr_']);
        }
    if(empty($lineItem['recLineAmount_']))
        {
        $Errors[] = 'You forgot to enter your receipt amount.';
        }
    else
        {
        $recAmount = safeDataMySQL($lineItem['recLineAmount_']);
        }
    if(empty($_POST['alternateBranch']))
        {
        $alternateBranch = '0';
        }
    else
        {
        $alternateBrach = $_POST['alternateBranch'];
        }
    if(!isset($Errors))
        {
        $recDate = date("Y-m-d", strtotime($recDate));
        $ins = mysql_query("INSERT INTO `expense_details` (`receiptNumber`, `claimId`, `alternateBranch`, `dateAdded`, `expenseDate`, `expenseDescription`, `expenseAmount`, `categoryId`) 
                        VALUES ('".$receiptNumber."', '".$expClaimNumber."', '".$alternateBranch."', NOW(), '".$recDate."', '".$recDescr."', '".$recAmount."', '".$recCategory."')") or die("Could not insert receipt: " . mysql_error());
        $nextReceipt = ($receiptNumber + 1);
        //Redirect to same page, incrementing the receipt number by 1.
        header('Location: createExpense.php?expenseNumber='.$expClaimNumber.'&receiptNum='.$nextReceipt);
        }
    }
}
 $expenseNumber = safeData($_GET['expenseNumber']);
 $receiptNumber = safeData($_GET['receiptNum']);
 if (isset($Errors))  
{
echo "<div align='center'><span class='errormessagered'><ul class='errors'>";
foreach ($Errors as $Error) 
    {
    echo "<li>".$Error."</li>";
    echo '<br />'; 
    }
echo "</ul></span></div>";
}
   ?>
<form name="createNew" method="POST" action="">
<div id="row">
<div id="left">
    <strong>Receipt Items:</strong>
</div>
<div id="right">
    <i>Only add another line to the receipt below IF you have multiple items on one receipt.</i>
    <br /><br />
    <table border="0" width="825px" cellspacing="0" cellpadding="5" name="receipts" id = "receipts">
        <thead>
            <tr>
                <th class="colheader" width="120px">Date</th>
                <th class="colheader" width="120px">Category</th>
                <th class="colheader" width="120px">Description</th>
                <th class="colheader" width="120px">Amount</th>
                <th class="colheader" width="145px"><span class="boldblacklinks"><a href="#" id="add">[Add +]</a></span></th>
            </tr>
        </thead>
            <tbody class="lineBdy">
                <tr id="line_1" class="spacer">
                    <td><input type="text" class="date fieldclasssm" id="recLineDate[]" name="recLineDate_[]" size="10" value = "<?=date("m/d/Y", strtotime($today))?>"/></td>
                    <td><select name="recLineCategory_[]" class="fieldclasssm">
                                <option value = "">Select a Category...</option>
                                <?php //Get Categories
                                $getCats = mysql_query("SELECT id, nominalName FROM expense_nominalCodes ORDER BY id") or die("Get Cats: " . mysql_error());
                                if(mysql_num_rows($getCats) > 0)
                                    {
                                    while($catData = mysql_fetch_array($getCats))
                                        {
                                        echo '<option value = "'.$catData['id'].'"'; if($catData['id'] == $_POST['recLineCategory_']) { echo "Selected = 'SELECTED'"; } echo '>'.$catData['nominalName'] . '</option>';
                                        }
                                    }
                                ?>
                        </select>
                    </td>
                    <td><input type="text" class="lineDescr fieldclasssm" name="recLineDescr_[]" id="recLineDescr[]" value = "<?=$_POST['recLineDescr']?>" size="40" /></td>
                    <td colspan = "2"><input type="text" class="sum lineAmount fieldclasssm" name="recLineAmount_[]" id="recLineAmount[]" value = "<?=$_POST['recLineAmount']?>" size="12" /></td>
                </tr>
            </tbody>
    </table>
</div>



nbsp nbsp nbsp nbsp nbsp 

"/>"/>

  <script type="text/javascript">
  $(document).ready(function () {
  $('.date').change(function () {
  $('.date').val($('.date:nth-of-type(1)').val());
  });
  });
  //Add new table row & clone date field
  $('#add').on('click', function(){
  addReceiptItem();
  $('.date').focus(function() {
  $(this).select();
  });
        $('.receipt').focus(function() {
  $(this).select();
  });
     });
        function addReceiptItem(){
        var lastID = $('tr[id*="line_"]').length,    
         newTds = $('tr[id="line_' + lastID + '"] td').clone(),
         newRow = document.createElement('tr');
        // add new id and class to row, append cloned tds
        $(newRow)
        .attr('id', 'line_' + (lastID + 1 ))
        .attr('class', 'spacer')
        .append(newTds);
        $(newRow).find('input').not(':eq(0)').val('');
        // $(newRow).find('class').not(':eq(0)').not(':eq(0)').val('');
        //add the new row to the table body
        $('tbody.lineBdy').append(newRow);
        $('.receipt').attr('readonly', true);
        $('.date').attr('readonly', true);
        };
        </script>   

开始吧。您可以从$_POST["rows"]添加行

foreach ($_POST["rows"] as $rowstring) {
    list($date, $cat, $desc, $amt) = explode(",", $rowstring)
    ?>
    <td><?php echo $date; ?></td>
    <td><?php echo $cat; ?></td>
    <td><?php echo $desc; ?></td>
    <td><?php echo $amt; ?></td>
    <td>&nbsp;</td>    
    <?php
}

假设每次添加动态行时都添加一个带有逗号分隔字符串的隐藏输入。

FWIW,我还建议在将任何内容呈现到屏幕之前执行所有数据库查询(即$getCats=…),这样在发生"or die()"的情况下,您就不会得到半渲染的页面。