WebViewグラブフォームデータ

Question

HTML5とアンドロイドコードが混在した混合アプリケーションを作成しました。うまくいきましたが、いくつか問題があります。

私たちのアプリケーションには、人々が記入するフォーム（チェックボックスと対応するデータとコメントセクションがあります）があります。ユーザーは各チェックボックスをクリックできますが、クリックされたアイテムにデータを入力し、選択したデータと作成したコメントを取得する必要があります。

これを行うにはどのような方法が最適ですか？参考：データは表形式で表示され、フォームごとにチェックボックスの数が変わります。それらはすべて同じこと（または同じクラス）に関連しています。

私はJavaScriptインターフェイスを作成しましたが、フォームデータを解析する最適な方法を見つけ出すことに問題があります。

ありがとうございます！

  <form> 
      <div id="colors"> 

       <table> 
        <tr> 
         <th>More header</th><th>NOHTING</th><th>Header</th><th></th> 
        </tr> 
        <tr> 
         <label for="checkbox1" id="checkbox-0"> 
          <td class="stock">1261561</td> 
          <td class="etete">whatever</td> 
          <td class="gtgtg">random data</td> 
         </label> 
         <td class="add"><input type="checkbox" value="1" checked /></td> 
        </tr> 
        <tr> 
         <label for="checkbox2" id="checkbox-1"> 
          <td class="stock">1261563</td> 
          <td class="etete">something</td> 
          <td class="gtgtg">details here</td> 
         </label> 
         <td class="add"><input type="checkbox" value="2" checked /></td> 
        </tr> 
        <tr> 
         <label for="checkbox3" id="checkbox-2"> 
          <td class="stock">1261529</td> 
          <td class="etete">blah</td> 
          <td class="qtqtq">blah blah</td> 
         </label> 
         <td class="add"><input type="checkbox" value="3" checked /></td> 
        </tr> 
        <input type="hidden" id="hidden1" value="xxxxxx" /> 
        <input type="hidden" id="hidden2" value="xxxxxxxxxx" /> 
        <input type="hidden" id="hidden3" value="" /> 
        <input type="hidden" id="fah21" value="x" /> 
        <input type="hidden" id="asdf1" value="xxxx,xxx,xx" /> 
       </table> 
      </div> 
      <div id="footer"> 
       <textarea placeholder="Add Your Comments..."></textarea> 
       <div id="cancel"> 
        <img src="../images/cancel.png" height="50px" width="260px" onclick="goBack()"> 
       </div> 
       <div id="save"> 
        <img src="../images/save.png" width="260px" height="100px" onClick="parseForm()" /> 
       </div> 
      </div> 
     </form> 

私が理解できないものです。

クラス名とデータが変更されました。また、ユーザーがチェックボックスをクリックすると、このスクリプトが呼び出されます。

$(document).ready(function(){ 
    $('input[type=checkbox]').tzCheckbox({labels:['Add to whatever','Click to Add']}); 
}); 

javascriptのインタフェースは、そのJSON、生か何かかどうか、任意のデータを取ることができます - 私は仕事に私のコードを修正します。

Answer 1

これを行う最も簡単な方法は、次のようにjQueryの機能を含めることです。

$('form').submit(function() { 
     Android.processFormData(decodeURIComponent($("form").serialize())); 
     return false; 
    }); 

あなたのコードでは、そのためのJavaScriptのインタフェースを記述し、そのようにそれを添付することを持っていたら：

webview.addJavascriptInterface(new JavaScriptInterface(), "Android"); 

は、次に、あなたのコード内で、同様にこれを追加します。

private class JavaScriptInterface{ 
    JavaScriptInterface(){} 
    JavaScriptInterface(Context c){} 

    public void saveSheetAndClose(){ 
     webview.goBack(); 
    } 

    public void processFormData(String data) { 
      //I'm just splitting and spitting it out to the log. You'd need to write 
      //a parser here. 

     String[] tokens = data.split("[&]+"); 
     for (int i = 0 ; i<tokens.length; i++){ 

      if (tokens[i].contains("check")){ 
       //I use | in checkboxes to separate multidata 
       String Checkbox[] = tokens[i].split("[|]+"); 

       tokens[i] = "check"; 
       Log.i("TokenSplit", " " + tokens[i]); 
       for (int j=0; j<Checkbox.length; j ++) 
        if (!Checkbox[j].contains("check")) 
        Log.i("TokenSplit", "  " + Checkbox[j]); 
        //cheap way of removing check= if you have multiple values 
      }else{ 
       Log.i("TokenSplit", "" + tokens[i]); 
      } 
     } 
     saveSheetAndClose(); 
    } 
} 

注意、それは受け入れるのがベストだろうデータをparseFormData（）に格納し、ASyncプロセスにデータを送信して、UIThreadがロックされないようにします。これを必ず実行してください！