Question

我有一个HTML来捕获字符串数据。当我通过ajax点击保存按钮时，我正在保存它们。但是，范围还包括在检查值不为空之后，一旦我使用橙色保存按钮从表单字段中聚焦，就将数据保存在会话存储中。我们的想法是使用存储在会话存储中的值预先填充每个表单字段。一切正常，但我不能弄清楚会话存储部分。困难的部分是如何为每个表单字段分配唯一键，并使用该键在字段中查找和预加载值。

这是我的JS

$('.wrapper').remove()

function renderInput() {
    var inputField = '<div class="wrapper"><input class="zoom-text-field" type="text" value=""/><span class="close">save</span></div>';
    return inputField;
}

function hideZoomFiled(e, textData) {
    $(e).parent().parent().children('.students-name-collection').val(textData);
    console.log(textData)
    $(e).parent().hide();
    $('.students-name-collection').attr('disabled', false);
    $(e).prop('disabled', false);
}

function disableInputField(obj) {
    $('.students-name-collection').attr('disabled', false);
    $(obj).attr('disabled', true);
}

$('.students-name-collection').on('focus', function () {
    disableInputField(this);
    $(this).next('.wrapper').focus();
    $('.wrapper').remove();
    $(this).parent().append(renderInput());

    var textData = '';
    $('.close').on('click', function () {
        textData = $(this).parent().children().val();
        hideZoomFiled(this, textData);
    });

    $('.zoom-text-field').on('blur', function(){
        if($(this).val() !== ''){
            //save the value in the sessionstorage
//This is where I am getting lost

        }
    });
});

$('#submitForm').on('click', function(){
    sessionStorage.clear();
})

// on page load read the session storage and pre fill the form fields

这是我的小提琴

http://jsfiddle.net/sghoush1/ykshgrxg/5/

Answer 1

以下是如何处理这个问题，正如您所指出的，这里的主要问题是如何确定如何保存每个输入项，以及如何在页面加载时将其放回。您可以做的是为每个项目index提供0到4。

要获取您所在元素的索引，可以向其添加selected类，然后使用该类以使用.index($('.selected'))查找元素位置，当然我们可以完成后删除该类。这可以用作sessionStorage的key，然后textData是值：

// Get the index of the input item we are on
$(this).addClass("selected");
var key = $(".students-name-collection").index($('.selected'));
$(this).removeClass("selected");

$('.close').on('click', function () {
    var textData = $(this).parent().children().val();
    hideZoomFiled(this, textData);
    if(!!textData){
        //save the value in the sessionstorage
       sessionStorage.setItem(key, textData);
    }
});

然后，为了加载它们，您可以使用jQuerys .each并使用索引.students-name-collection在类sessionStorage上使用该值来为每个输入提供正确的值：

// on page load read the session storage and pre fill the form fields 
$('.students-name-collection').each(function(index) {
    if(sessionStorage[index])
        $(this).val(sessionStorage[index]) 
});

Here is a Fiddle Example

预填充页面上的表单数据从会话存储重新加载

1 个答案: