更新会话存储输入并选择字段

当用户尝试更新其已输入的名字，姓氏或标题选项或全部上述内容时。页面刷新时不会显示更新的字段，有人能帮我纠正这个问题吗？更新会话存储输入并选择字段

这里是我的jsfiddle https://jsfiddle.net/6kqbhd0z/

这里是下面的代码。

Jquery部分我相信是给我的问题。

$('.add-more').on('click', '.update-helper', function(e){ 
    e.preventDefault(); 
    e.stopPropagation(); 

    var first_name = $(this).parent().parent().find('.first-name').val(); 
    var last_name = $(this).parent().parent().find('.last-name').val(); 
    var title = $(this).parent().parent().find('.helper-title').val(); 

    var key_values = {first_name: first_name, last_name: last_name, title: title}; 
    sessionStorage.helper = JSON.stringify(key_values); 
});

Jquery的完整代码

var helper_record = []; 
$(document).ready(function(){ 
    if(typeof(Storage) !== 'undefined'){ 
     new_helper(); 
     $('.add-another').on('click', function(e){ 
      e.preventDefault(); 
      e.stopPropagation(); 

      if(sessionStorage.getItem('limit') === null){ 
       sessionStorage.setItem('limit', 0); 
      } 

      if(sessionStorage.getItem('limit') <= 19){ 
       var first_name = $('.first-name').val(); 
       var last_name = $('.last-name').val(); 
       var title = $('.title:first').val();    

       var key_values = {first_name: first_name, last_name: last_name, title: title}; 
       helper_record.push(key_values); 

       sessionStorage.helper = JSON.stringify(helper_record); 
       new_helper(); 

       var count = sessionStorage.getItem('limit'); 
       count++; 
       sessionStorage.setItem('limit', count); 
      } 
     }); 
    } else { 
     var max_fields = 20; 
     var x = 0; 
     var index = 0; 

     $('.add-another').on('click', function(e){ 
      e.preventDefault(); 
      e.stopPropagation(); 

      if(x < max_fields){ 
       x++; 
       index++; 
       var first_name = $('.first-name').val(); 
       var last_name = $('.last-name').val(); 
       var title = $('.title').val(); 

       var helper = '<div class="helper-container"><div class="helper-options" data-index="' + index + '"><a title="" href="#" class="delete-helper">Delete</a><a title="" href="#" class="update-helper">Update</a></div><div class="helper-box"><label class="another-helper"><input type="text" name="helpers_first_name[]" class="first-name" value="' + first_name + '" /></label></div><div class="helper-box"><label class="another-helper"><input type="text" name="helpers_last_name[]" class="last-name" value="' + last_name + '" /></label></div><div class="helper-box-last"><label class="another-helper"><select name="helpers_title[]" class="title helpers-title-options"><option value="Select a Title" selected="selected">Select a Title</option><option value="Manager">Manager</option><option value="Planner">Planner</option><option value="Advisor">Advisor</option><option value="Staff">Staff</option><option value="Laborer">Laborer</option></select></label></div></div>'; 

       $('.add-more').append(helper); 
       $('.title:eq('+$('.helpers-title-options').length+')').val(title); 
      } 

      $('.first-name:first').val(''); 
      $('.last-name:first').val(''); 
      $('.title:first').val('Select a Title'); 
     }); 
    } 

    function new_helper(){ 
     var max_fields = 20; 
     var x = 0; 
     var index = 0; 

     if(!(typeof sessionStorage.helper === 'undefined' || sessionStorage.helper.length<1)){ 
      helper_record = JSON.parse(sessionStorage.helper); 
     } 

     $('.add-more').empty(); 
     for(var i=0; i<helper_record.length; i++){ 
      if(x < max_fields){ 
       x++; 
       index++; 
       var first_name = helper_record[i].first_name; 
       var last_name = helper_record[i].last_name; 
       var title = helper_record[i].title; 

       var helper = '<div class="helper-container"><div class="helper-options" data-index="' + index + '"><a title="" href="#" class="delete-helper">Delete</a><a title="" href="#" class="update-helper">Update</a></div><div class="helper-box"><label class="another-helper"><input type="text" name="helpers_first_name[]" class="first-name" value="' + first_name + '" /></label></div><div class="helper-box"><label class="another-helper"><input type="text" name="helpers_last_name[]" class="last-name" value="' + last_name + '" /></label></div><div class="helper-box-last"><label class="another-helper"><select name="helpers_title[]" class="title helpers-title-options"><option value="Select a Title" selected="selected">Select a Title</option><option value="Manager">Manager</option><option value="Planner">Planner</option><option value="Advisor">Advisor</option><option value="Staff">Staff</option><option value="Laborer">Laborer</option></select></label></div></div>'; 

       $('.add-more').append(helper); 
       $('.title:eq('+$('.helpers-title-options').length+')').val(title); 
      } 
     } 

     $('.first-name:first').val(''); 
     $('.last-name:first').val(''); 
     $('.title:first').val('Select a Title'); 
    } 

    $('.add-more').on('click', '.delete-helper', function(e){ 
     e.preventDefault(); 
     e.stopPropagation(); 

     var index = $(this).parent().attr('data-index'); 
     $(this).parent().parent().remove(); 

     if(typeof(Storage) !== 'undefined'){ 
      var helper_limit = JSON.parse(sessionStorage.limit) -1; 
      if(helper_limit >= 0){ 
       sessionStorage.setItem('limit', helper_limit); 
      } 

      if(helper_limit == 1){ 
       helper_record.splice(1, 0); 
       sessionStorage.helper = JSON.stringify(helper_record);     
      } 

      helper_record.splice(index -1, 1); 
      sessionStorage.helper = JSON.stringify(helper_record); 
     } else { 
      x--; 
     } 
    }); 

    $('.add-more').on('click', '.update-helper', function(e){ 
     e.preventDefault(); 
     e.stopPropagation(); 

     var first_name = $(this).parent().parent().find('.first-name').val(); 
     var last_name = $(this).parent().parent().find('.last-name').val(); 
     var title = $(this).parent().parent().find('.helper-title').val(); 

     var key_values = {first_name: first_name, last_name: last_name, title: title}; 
     sessionStorage.helper = JSON.stringify(key_values); 
    }); 
});

HTML

<div id="form-container"> 
    <form method="post" action="" id="form" enctype="multipart/form-data"> 
     <fieldset> 
      <ol> 
       <li>  
        <div id="helper-headings"> 
         <div class="helper-box"> 
          <span>First Name:</span> 
         </div> 
         <div class="helper-box"> 
          <span>Last Name:</span> 
         </div> 
         <div class="helper-box-last"> 
          <span>Title:</span> 
         </div> 
        </div> 
       </li> 
       <li> 
        <div class="helper-box"> 
         <label class="helper"><input type="text" class="first-name" /></label> 
        </div> 
        <div class="helper-box"> 
         <label class="helper"><input type="text" class="last-name" /></label> 
        </div> 

        <div class="helper-box-last"> 
         <label class="helper"><select class="title"> 
          <option value="Select a Title" selected="selected">Select a Title</option> 
          <option value="Manager">Manager</option> 
          <option value="Planner">Planner</option> 
          <option value="Advisor">Advisor</option> 
          <option value="Staff">Staff</option> 
          <option value="Laborer">Laborer</option> 
         </select></label> 
        </div> 
        <div class="question"><a class="add-another" title="" href="">Add Helper</a></div><div class="add-more"></div></li> 
      </ol> 
     </fieldset> 
    </form> 
</div>

来源

2016-10-11 astro.one

当用户单击 “更新”，我觉得你的代码可能存在以下问题：

选定项目的标题内容为空
更新操作将从数组更改sessionStorage.helper对象。

修改后的代码是如下：

$('.add-more').on('click', '.update-helper', function(e){ 
    e.preventDefault(); 
    e.stopPropagation(); 

    var first_name = $(this).parent().parent().find('.first-name').val(); 
    var last_name = $(this).parent().parent().find('.last-name').val(); 
    var title = $(this).parent().parent().find('.helpers-title-options').val(); 

    var index = $(this).parent().parent().prevAll().length; 
    var key_values = {first_name: first_name, last_name: last_name, title: title}; 
    var help = JSON.parse(sessionStorage.helper); 
    help[index] = key_values; 
    sessionStorage.helper = JSON.stringify(help); 
});

https://jsfiddle.net/sept08/8e446cL8/

来源

2016-10-11 08:28:12 sept08

更新会话存储输入并选择字段

回答

相关问题