在提交时保留表单数据 - ＆gt;数组数据

Question

在我的表单中，我使用JavaScript在表单中添加额外的行 效果很好，但如果表单提交不正确，它会刷新警告消息（如下所示），但会删除所有添加的文本框。

<script type="text/javascript">
    var rowNum = 0;

    function addRow(frm) {
        rowNum++;

        var row = '<div id="rowNum' + rowNum + '"><div class="dateinput">   <input id="theDate[]" style="width:100px;" value="<? echo date(" d/m/Y "); ?>" name="theDate[]" type="text"></div><div class="sportinput"><select style="width:100px;" id="Sport[]" name="Sport[]"><option>Horse Racing</option><option>Football</option><option>Greyhounds</option><option>NFL</option></select></div><div class="pickinput"><input style="width:250px;" id="Pick[]" name="Pick[]" type="text"></div><div class="bookieinput"><select style="width:100px;" id="Bookie[]" name="Bookie[]"><option>Bet365</option><option>Betfred</option><option>BetVictor</option><option>Boylesports</option><option>Bwin</option><option>Centrebet</option><option>Coral</option><option>Ladbrokes</option><option>Paddy Power</option><option>Pinnacle Sports</option><option>SBOBET</option><option>Sky Bet</option><option>Stan James</option><option>unibet</option><option>William Hill</option></select></div><div class="oddsinput"><input id="Odds[]" name="Odds[]" size="3" type="text"></div><div class="backorlayinput"><select id="BackorLay[]" name="BackorLay[]"><option>Back</option><option>Lay</option></select></div><div class="stakeinput"><input id="Stake[]" name="Stake[]" size="3" type="text">E/W<input name="EW[]" ID="EW[]" value="EW" type="checkbox" /></div><div class="cominput"><select id="Com[]" name="Com[]"><option>0</option><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option></select></div><div class="outcomeinput"><select id="Outcome[]" name="Outcome[]"><option>Unknown</option><option>Win</option><option>Loss</option><option>P</option><option>E/W Win</option><option>Void</option></select></div><div class="placeinput"><select id="PlaceDiv[]" name="PlaceDiv[]"><option>5</option><option>4</option></select></div><div class="addrowinput"><input type="button" value="Remove" onclick="removeRow(' + rowNum + ');"></div><br /></div>';


        jQuery('#itemRows').append(row);

        frm.add_qty.value = '';
        frm.add_name.value = '';
    }

    function removeRow(rnum) {
        jQuery('#rowNum' + rnum).remove();
    }
</script>

如果提交的表单有错误，那么行仍然会显示其中的值吗？

<form method="post">
    <center>
    <style>
.dateinput {
   width:100px;
    float:left;
    margin-right:10px;
} 
        .sportinput {
   width:100px;
    float:left;
        margin-right:10px;
} 
                .bookieinput {
   width:100px;
    float:left;
        margin-right:10px;
} 
                .pickinput {
   width:250px;
    float:left;
        margin-right:10px;
} 
                    .oddsinput {
 width:50px;
    float:left;
        margin-right:10px;
} 
                    .backorlayinput {
 width:100px;
    float:left;
        margin-right:10px;
} 
                    .stakeinput {
 width:110px;
    float:left;
        margin-right:10px;
} 
                    .cominput {
 width:100px;
    float:left;
        margin-right:10px;
} 
        .outcomeinput {
 width:100px;
    float:left;
        margin-right:10px;
} 
.placeinput {
 width:70px;
    float:left;
    margin-right:10px;
        }
        .addrowinput {
 width:70px;
    float:left;
    margin-right:10px;
        }
    </style>
    <?php
echo $errorMessage; ?>
    <div class="dateinput">
         Date
    </div>
    <div class="sportinput">
         Sport
    </div>
    <div class="pickinput">
         Pick
    </div>
    <div class="bookieinput">
         Bookie
    </div>
    <div class="oddsinput">
         Odds
    </div>
    <div class="backorlayinput">
         Back or Lay
    </div>
    <div class="stakeinput">
         Stake
    </div>
    <div class="cominput">
         Comm (%)
    </div>
    <div class="outcomeinput">
         Outcome
    </div>
    <div class="placeinput">
         Palce Div
    </div>
    <br/>
    <p>
        <div class="dateinput">
            <input id="theDate[]" style="width:100px;" value="<?php echo date(" d/m/y "); ?>" name="theDate[]" type="text">
        </div>
        <div class="sportinput">
            <select style="width:100px;" id="Sport[]" name="Sport[]">
                <option>Horse Racing</option>
                <option>Football</option>
                <option>Greyhounds</option>
                <option>NFL</option>
            </select>
        </div>
        <div class="pickinput">
            <input style="width:250px;" id="Pick[]" name="Pick[]" type="text">
        </div>
        <div class="bookieinput">
            <select style="width:100px;" id="Bookie[]" name="Bookie[]">
                <option>Bet365</option>
                <option>Betfred</option>
                <option>BetVictor</option>
                <option>Boylesports</option>
                <option>Bwin</option>
                <option>Centrebet</option>
                <option>Coral</option>
                <option>Ladbrokes</option>
                <option>Paddy Power</option>
                <option>Pinnacle Sports</option>
                <option>SBOBET</option>
                <option>Sky Bet</option>
                <option>Stan James</option>
                <option>unibet</option>
                <option>William Hill</option>
            </select>
        </div>
        <div class="oddsinput">
            <input id="Odds[]" name="Odds[]" size="3" type="text">
        </div>
        <div class="backorlayinput">
            <select id="BackorLay[]" name="BackorLay[]">
                <option>Back</option>
                <option>Lay</option>
            </select>
        </div>
        <div class="stakeinput">
            <input id="Stake[]" name="Stake[]" size="3" type="text">E/W<input name="EW[]" id="EW[]" value="EW" type="checkbox"/>
        </div>
        <div class="cominput">
            <select id="Com[]" name="Com[]">
                <option>0</option>
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
            </select>
        </div>
        <div class="outcomeinput">
            <select id="Outcome[]" name="Outcome[]">
                <option>Unknown</option>
                <option>Win</option>
                <option>Loss</option>
                <option>P</option>
                <option>E/W Win</option>
                <option>Void</option>
            </select>
        </div>
        <div class="placeinput">
            <select id="PlaceDiv[]" name="PlaceDiv[]">
                <option>5</option>
                <option>4</option>
            </select>
        </div>
        <div class="addrowinput">
            <input onclick="addRow(this.form);" type="button" value="Add row"/>
        </div>
    </p>
    <div id="itemRows">
    </div>
    <p>
        <input type="submit" name="ok" value="Save Changes">
    </p>
    </center>
</form>