WebView grabbing form data

Question

HTML5와 안드로이드 코드가 혼합 된 혼합 응용 프로그램을 작성했습니다. 잘 작동하지만 몇 가지 문제가 있습니다.

우리의 응용 프로그램에는 사람들이 작성하는 양식이 있습니다 (확인란과 해당 데이터 및 설명 섹션 포함). 그 사람은 각 확인란을 클릭 할 수 있지만 클릭 한 항목을 채우고 그들이 선택한 데이터와 그들이 작성한 설명을 가져와야합니다.

가장 좋은 방법은 무엇입니까? 참조 용 : 데이터가 표에 나열되고 양식 당 확인란 수가 변경됩니다. 그들 모두는 동일한 것 (또는 같은 클래스)과 관련이 있습니다.

자바 스크립트 인터페이스를 작성했지만 양식 데이터를 구문 분석하는 가장 좋은 방법을 찾지 못했습니다.

감사합니다.

  <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> 

parseForm()은 내가 알 수없는 것입니다.

클래스 및 데이터의 이름이 변경되었습니다. 사용자가 체크 박스를 클릭 할 때 또한,이 스크립트가 호출된다 :

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

자바 스크립트 인터페이스는 모든 데이터를 취할 수 있습니다, 그 JSON, 원료 또는 아무것도 여부 - 내 코드가 작동을 수정합니다.

Answer 1

이 작업을 수행하는 가장 쉬운 방법은 다음과 같이 JQuery와 함수를 포함하는 것입니다

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

당신은 당신의 코드에서, 그것을 위해 자바 스크립트 인터페이스를 작성하고 그래서처럼 장착하는 것이 일단 :

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가 잠기는 것을 방지합니다. 이 작업을 수행했는지 확인하십시오!