0

Okay so I have been working on this code forever and I still cant get it to work right. I'm having two issues with my code.

  1. I'm trying to save the values for each input and select field and display them again when the page is refreshed.

  2. Every time a user types into the same input field a new key: value pair is created. I just want the same input field the user is typing into to update the sessionStoragein real time when the user changes its value.

If it helps I'm using JQuery and PHP. My JQuery code is located below

JQuery

$(document).ready(function(){
    var max_fields = 5;
    var x = 1;

    if(typeof(Storage) !== 'undefined'){
        $('.worker').on('click', function(e){
            e.preventDefault();
            e.stopPropagation();

            if(x < max_fields){
                x++;

                $(this).closest('li').find('div:eq(3)').append('<input type="text" name="first_name[]" class="first-name" /><input type="text" name="last_name[]" class="last-name" /><select name="title[]" class="title"><option value="Select a Title" selected="selected">Select a Title</option><option value="Boss">Boss</option><option value="Worker">Worker</option><option value="Manager">Manager</option></select>');

                sessionStorage.setItem('Data',$(this).closest('li').find('div:eq(3)').html());
            }
        });

        if(sessionStorage.getItem('Data')){
            $('.worker').closest('li').find('div:eq(3)').html(sessionStorage.getItem('Data')); 
        }
    }
}); 


var worker_record = [];
$(document).ready(function(){
    $('.worker').closest('li').find('div:eq(3)').on('input', function(){
        var fname = $('.first-name').val();
        var lname = $('.last-name').val();
        var wtitle = $('.title').val();
        var worker_data = {first_name: fname, last_name: lname, title: wtitle};
        worker_record.push(worker_data);
        for(var i=0; i<worker_record.length; i++){
            sessionStorage.newWorker = JSON.stringify(worker_record);
        }
    });
});

HTML 

<ul>
    <li>
        <div class="worker-container">
            <label class="worker-label"><input type="text" name="first_name[]" class="first-name" /></label>
        </div>

        <div class="worker-container">
            <label class="worker-label"><input type="text" name="last_name[]" class="last-name" /></label>
        </div>

        <div class="worker-container-last">
            <label class="worker-label">
                <select name="title[]" class="title">
                    <option value="Select a Title" selected="selected">Select a Title</option>
                    <option value="Boss">Boss</option>
                    <option value="Worker">Worker</option>
                    <option value="Manager">Manager</option>
                </select>
            </label>
        </div>
        <div class="add-more"></div>
        <div><a class="worker" href="">Add Another Worker</a></div>
    </li>
</ul>

Here is a link to my jsfiddle https://jsfiddle.net/qjp6uscu/

4

1 に答える 1

2

問題＃2の場合

getItemこのようなメソッドを使用して、既存の sessionStorage キーを取得できます。

  var worker_record = sessionStorage.getItem('newWorker');

存在しない場合は空の配列を初期化し、存在しない場合は解析します。

  if (!worker_record ) { 
    worker_record = [];
  } else {
    worker_record = JSON.parse(worker_record);
  }

worker_data をセッション ストレージにプッシュし、

  worker_record.push(worker_data);

メソッドを使用して、次のsetItemように更新されたキー/値を設定します。

  sessionStorage.setItem('newWorker', JSON.stringify(worker_record));
于 2016-08-02T06:07:48.607 に答える