2016-03-27 12 views
0

フォームとして入力するフォームの値を更新して、リストとして表示しようとしています。フォームの値を取得してローカルストレージを使用して値を表示しようとしていますが、入力した値をクラスのdivタグ内に表示する方法がわかりません。提出された値を表示

どうすればいいですか?私は以下のコードを提供しています。

変更
$('#localStorageTest').submit(function() { 
    localStorage.clear(); 
    }); 

:あなたは値が形で提出されるはずですhttp://codepen.io/anon/pen/PNjQRQ?editors=1010

<div class="gettingValues"> getting form values 
    <input data-name="edit" type="button" value="Edit" name="editHistory"> 
    <input data-name="delete" type="button" name="deleteHistory" value="Delete"> 
</div> 

答えて

0

:私はあまりにもCodepenでそれを入れている

$('#localStorageTest').submit(function(e) { 
    e.preventDefault(); 
    var div = "<div><span>"+$('#name').val()+"</span><span>"+$('#email').val()+"</span></div>"; //add your data in span, p, input.. 
    $('.gettingValues').append(div); //apendd the div 
    $('#localStorageTest')[0].reset(); //clear the form 
    localStorage.clear(); 
}); 

しかし、あなたはその後、したい場合'編集'または '削除'ボタンをクリックしていくつかの機能をトリガーするには、バインド機能をアタッチし、どのユーザーが編集/削除するかを知るために 'id'または固有の識別子を設定する必要があります。

投稿したユーザーも保存したい場合は、$.get/$.post機能を追加できます。

希望すると助かります!

+0

私がcodepenで提出したとき...私はちょうどペンに投稿しました。値が投稿されました...しかし、ブラウザのdivタグ内の値を見る方法がわかりません。 –

+0

ドキュメント内に '$( '#localStorageTest')。submit(function(e){'関数を準備し、init()ではなく)jquery.jsを追加します(まだない場合) –

+0

はい、私はcodepenでそれを変更しましたが、まだ成功していません:(http://codepen.io/anon/pen/dMRmoZ?editors=1010 –

関連する問題