2017-10-08 9 views
0

ユーザがチェックボックスをオンまたはオフにしたときにフォームを自動保存したい。私はonchangeを使用して1つをクリックするたびに発火させることを考えていましたが、それは私のページに150を超えるチェックボックスがあることを考えれば書くようです。チェックボックスの自動保存ノード

チェックボックスのための私のコードは次のとおりです。

<div class="form-check"> 
<label class="form-check-label"> 
    <input class="form-check-input" type="checkbox" value=""> 
    setting a 
</label> 
</div> 

私はまだで値を追加していないが、彼らはこれを行うための最善の方法は何{{ user.settings.a.aa }}

のようなものでしょうか?私はオンラインで見てきましたが、どちらの方法が適切で適切であるかはわかりません。

+0

を役に立てば幸い...

$('input.form-check-input').change(function() { var chkid = $(this).attr(id), chkvalue = $(this).val(); $.ajax({ type: 'POST', url: '/backend/recordcheckboxchange.js', data: { id: chkid, value: chkvalue }, dataType: 'json', async: true, success: function(data) { // Your backend file can return a JSON with the result, // so you can alert in case of error. For example... if (data.result) alert('ERROR: Fail changing the checkbox value'); } }); }); 

をチェックボックス識別子とパラメータとして値を送信して、あなたのnode.jsまたはexpress.jsバックエンドのファイルへのAJAX呼び出しを行いますので、変更を記録することができますすべてのチェックボックスに単一のリスナーが必要なだけなので、イベント委任を使用しますか? – skirtle

答えて

0

まず、HTMLの各チェックボックスを識別する方法があるはずです。その後

<div class="form-check"> 
    <label for="settinga" class="form-check-label"> 
    <input class="form-check-input" id="settinga" type="checkbox" value=""> 
    setting a 
    </label> 
</div> 
<div class="form-check"> 
    <label for="settingb" class="form-check-label"> 
    <input class="form-check-input" id="settingb" type="checkbox" value=""> 
    setting b 
    </label> 
</div> 
........... 

が一つだけのonchangeイベントを生成する必要があります...良いオプションは、それぞれに異なる id属性だろう(そして、あなたはまた、対応する labelため for属性を作成するためにそれを使用することができます)すべてを扱う発射されたとき、私はそれはおそらく、

+0

ありがとう、私はこれを午前中に実装しようとしています。モデルが/models/user.jsの下に見つかると、急なルートがどのように見えるのだろうかと思っています。その後、user.settings.it.settinga –

関連する問題