Question

我正在使用HTML5 sessionStorage帮助在刷新时填充表单字段，但我遇到了一些奇怪的错误。基本上，如果我更改任何值，表单将停止工作。

我目前所写的表格就在这里; http://jsfiddle.net/takuhii/rjsjj9by/1/

HTML：

var titolo = 'my dialog';
var s="<select id=\"MYSEL1\" name=\"MYSEL1\"><option value=\"A\">opt A</option><option value=\"B\">opt B</option></select><br><select id=\"MYSEL2\" name=\"MYSEL2\"></select>";

$( "#dialog_message" ).dialog({
    resize: 'auto',
    draggable: true,
    resizable: false,
    closeOnEscape: false,
    open: function() {      // open event handler
        $(this).parent().find(".ui-dialog-titlebar-close").hide();
        $(this).html(s);
        $("#MYSEL1").on("change", function() {
    var n=$(this).attr("id");
    var dd = $("option:selected", this);
    var d = $(this).val();
    alert (d);  
    $("#MYSEL2").empty(); // remove old options
    if (d=='A') {
        $("#MYSEL2").append('<option value=\"AA\">opt AA</option><option value=\"AAA\">opt AAA</option>');
    } else {
        $("#MYSEL2").append('<option value=\"BB\">opt BB</option><option value=\"BBB\">opt BBB</option>');
    };
}); 
    },
    buttons: {
        Annulla: function() {
            $( this ).dialog( "close" );
        }
    },
    title: titolo
});
$("select").selectmenu();

JAVASCRIPT：

values.Length

我从中得到的表格就在这里; http://jsfiddle.net/takuhii/45zfpfru/8/

HTML：

<form id="storeFields" method="post" action="">
    <label>First Name:</label>
    <input type="text" name="firstname" id="firstName" class="form-control" value="" />

    <label>Last Name:</label>
    <input type="text" name="lastname" id="lastName" class="form-control" value="" />

    <label>Email:</label>
    <input type="email" name="email" id="email" class="form-control" value="" />

    <input type="submit" class="demo-button" value="Submit" />
</form>

JAVASCRIPT;

function storeDetails() {
    if (sessionStorage["firstname"]) {
        $('#firstName').val(sessionStorage["firstname"]);
    }
    if (sessionStorage["lastname"]) {
        $('#lastName').val(sessionStorage["lastname"]);
    }
    if (sessionStorage["email"]) {
        $('#email').val(sessionStorage["email"]);
    }
}
storeDetails();

$('.form-control').change(function () {
    sessionStorage[$(this).attr('firstName')] = $(this).val();
    sessionStorage[$(this).attr('lastName')] = $(this).val();
    sessionStorage[$(this).attr('email')] = $(this).val();
});

$('#storeFields').submit(function() {
    sessionStorage.clear();
});

我不明白的是，如何简单地改变它所寻找的变量，打破了整个形式？

任何帮助都会非常感激，因为我真的看不出有什么问题

如果这是另一个问题的重复，我提前道歉，因为我试着看，但找不到满意的答案...... 干杯达伦

Answer 1

在你的JS中试试这个：

$('.form-control').change(function () {
    sessionStorage[$(this).attr('id')] = $(this).val();
});

您希望使用id属性（firstName，LastName，email）的值作为设置正确会话值的键。在您的代码中，您正在寻找不存在的属性。

HTML5 sessionStorage无法按预期工作

1 个答案: