击退或刷新页面时将表单数据保存为动态表单

时间:2018-10-06 22:49:57

标签: javascript php jquery html

现在,我有代码可以将输入字段动态添加到表单中。我希望能够提交数据并转到下一页,但是如果有人决定返回,则新创建的输入字段仍将与数据一起存在。我现在设置的方式是回显输入字段,该字段适用于前两个而不是第三个。

当我回击时,我得到了:

when I hit back

这是我的代码:

<h2>Enter Beneficiaries for Tangible Personal Property:</h2>
<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
    <div class="input_fields_container">
            <tr>
                <td>Name:<input type="text" name="ben[]" value="<?php echo $_SESSION['ben']['0'];?>" class="form-control name_list" /></td>
                <td>Percentage of tangible personal property:<input type="number" min="0" max="100" value="<?php echo $_SESSION['percent']['0'];?>" style="width: 40px" name="percent[]" class="form-control name_list" /></td>
                <td><input type="button" name="add" id="add" class="add_more_button" value= "Add Another" ></input></td>
            </tr> 
        </table>
    </div>
    <p style="color:red;"></p>
    <h3>Enter Contingent Beneficiary: </h3>
    Name:<input type="text" name="conben" value="<?php echo $_SESSION['conben'];?>" >
    <br><br>
    <button type="button" name="back" value="back" onclick="location.href='county.php'">Back</button>
    <input type="submit" name="submitform" value="Next"></input>
    <button type="button" name="download" onclick="location.href='downloadAdd.php'">Download will</button>
</form>

<script>
//script to add/remove fields
$(document).ready(function () {
    var getControl=getCookie("countControls1");
    var max_fields_limit = 2; // Set limit for maximum input fields
    var x = 0; // Initialize counter for text box

    for(var i=1; i<=getControl; i++) {
        console.log(i);
        addControls();
    }

    $('.add_more_button').click(function (e) { // Click event to add more fields
        addControls();
    });

    function addControls()
    {
        console.log(x);
        if (x < max_fields_limit ) { 
            x++; // Increment counter
            setCookie("countControls1",x,100);
            $('.input_fields_container').append('<div><tr id="row'+x+'"><td> Name:<input type="text" name="ben[]" value="<?php echo $_SESSION['ben']['1'];?>" class="form-control name_list" /></td><td>&nbspPercentage of tangible personal property:<input type="number" min="0" max="100" style="width: 40px" name="percent[]" value="<?php echo $_SESSION['percent']['1'];?>" class="form-control name_list" /></td><td><a href="#" class="remove_field" style="margin-left:10px;">Remove</a></td></tr>');; // Add input field
         }
        else if (x==2){
            $("p").text("*Only 3 tangible beneficiaries are allowed.");
        }
    }

    $('.input_fields_container').on("click", ".remove_field", function (e) { // User click on remove text links
        $(this).parent('div').remove();
        x--;
        $("p").text("");
        setCookie("countControls1",x,100);
     });

    function setCookie(cname,cvalue,exdays)
    {
        var d = new Date();
        d.setTime(d.getTime() + (exdays*24*60*60*1000));
        var expires = "expires=" + d.toGMTString();
        document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
        $("#div1").html("Add cookie = ",getCookie(cname));
    }

    function getCookie(cname) 
    {
        console.clear();
        var name = cname + "=";
        var decodedCookie = decodeURIComponent(document.cookie);
        var ca = decodedCookie.split(';');
        //console.log(cname);
        //console.log(decodedCookie);
        console.log(ca);
        for(var i = 0; i < ca.length; i++) {
            var c = ca[i];
            while (c.charAt(0) == ' ') {
                c = c.substring(1);
            }
            if (c.indexOf(name) == 0) {
                console.log(c.substring(name.length, c.length));
                return (c.substring(name.length, c.length));
            }
        }
        return "";
    }
});

</script>

是否有通过这种方式实现这一目标,还是我需要实现其他目标?

1 个答案:

答案 0 :(得分:0)

您仅可以使用循环写回字段,因为大概您的会话中有两个数组。您还应该使用empty()isset()来检查会话数组是否首先存在,否则您将收到关于未定义键的警告,例如:

<tr>
    <td>Name:<input type="text" name="ben[]" value="<?php echo $_SESSION['ben']['0'];?>" class="form-control name_list" /></td>
    <td>Percentage of tangible personal property:<input type="number" min="0" max="100" value="<?php echo $_SESSION['percent']['0'];?>" style="width: 40px" name="percent[]" class="form-control name_list" /></td>
    <td><input type="button" name="add" id="add" class="add_more_button" value= "Add Another" /></td>
</tr>
<?php
# Remove the first keys since you already used them above
unset($_SESSION['percent'][0],$_SESSION['ben'][0]);
# Just do a normal loop to create any remaining values
foreach($_SESSION['percent'] as $key => $value): ?>
<tr>
    <td>Name:<input type="text" name="ben[]" value="<?php echo $_SESSION['ben'][$key];?>" class="form-control name_list" /></td>
    <td>Percentage of tangible personal property:<input type="number" min="0" max="100" value="<?php echo $value; ?>" style="width: 40px" name="percent[]" class="form-control name_list" /></td>
</tr>
<?php endforeach ?>