送信ボタンをクリックせずにデータを送信

Question

入力がいっぱいの行で表を作成したいとします。アイデアは、入力の各行がバックエンドの1つのオブジェクトに結びついているということです。ユーザーがデータを入力しなくなったら、行を「サブミット」する必要があります。

私は主にフロントエンドと頼りなさそうバックエンドエンジニアので、私は次のような効果を得るためにいくつかのアプローチが何思ったんだけど：MVCの意味で（

私はバックエンドの「アクション」を呼びたいです）、ユーザーが現在の行に入力を停止し、次の行に入ったとき。

私はonblurとonfocusoutについて読んだことがありますが、どちらも私が望んでいないようです。 Onblurは入力単位であり、onfocusoutはユーザーが同じ行をタブで移動しても入力が残されるたびにトリガーされます。さらに、onfocusoutはまだFirefoxでサポートされていません。

私のアプリはgrailsですが、私は標準のg：form（grails form）の習慣を迂回し、何らかのjavascriptソリューションを使用しています。私はそれが何であるか分かりません。

私が一般的なフロントエンドソリューションについてもっと学びたいので、どんな議論にも役立ちます。これを簡単にするためのJavaScriptフレームワークがあれば、私に教えてください。

Answer 1

JavaScriptを使用していつでもフォームを送信できます。任意のイベント（ユーザーの理想的なもの、必要な他のイベントのぼかしなど）にフォームの送信機能を添付することができます。その後、イベントが発生した場合は、フォームを送信する関数を呼び出すことができます。あなたはJavaScriptで、各行の開始値を記憶することができる

function idealUser(){//you call that function according to requirement 
setTimeout(function(){ 
    submitForm(); 
},5000); 
} 
function submitForm(){ 
document.getElementByID('formId').submit(); 
} 

Answer 2

以下の例を参照してください。行にonfocusイベントの関数を追加して、フォーカスを当てた行が変更されているかどうかを確認します。

次に、フォーカスされた行が変更されると、jsは、保存された値とは異なる値を持つ行があるかどうかを確認できます。フォーカスが外れている行の値が以前に保存された値と異なる場合は、変更された行情報をバックエンドに送信します。

また、変更がサーバーに送信された後、jsの格納された行の値を更新します。

Answer 3

テーブル行から移動するときに検証して送信します。

ここにいくつかのコードとデモがあります。私はあなたが行を離れるときにボタンのクリックをトリガーしましたが、あなたはサーバー側のコードを呼び出すためにajaxを使用するかもしれません。

$("table").on("blur", ".row", function(e){ 
 
\t //check if all input fields are filled \t 
 
    var cols = $(this).find(".col"); 
 
    var filled = true; 
 
    cols.each(function(i, v){ 
 
    \t if($(v).val().length==0){ 
 
    \t filled = false; 
 
    } 
 
    }); 
 
    
 
    //if not moving out of the last input field then don't submit 
 
    if(e.target !== $(this).find("input").last()[0]){ 
 
    \t return; 
 
    } 
 
    
 
    //If filled trigger click for submission 
 
    if(filled){ 
 
    \t //in reality, you may use ajax here to call your backend code 
 
    \t $("#submit-btn").trigger("click"); 
 
    } \t 
 
}); 
 

 

 
$("#submit-btn").on("click", function(){ 
 
\t alert("Submit Clicked!"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<table> 
 
<tr id="row1" class="row"> 
 
    <td><input class="col" value=""></td> 
 
    <td><input class="col" value=""></td> 
 
    <td><input class="col" value=""></td> 
 
</tr> 
 
<tr id="row2" class="row"> 
 
    <td><input class="col" value=""></td> 
 
    <td><input class="col" value=""></td> 
 
    <td><input class="col3"value=""></td> 
 
</tr> 
 

 
</table> 
 
<input type=button value=submit id=submit-btn>