抓住网页视图表单数据 [英] WebView grabbing form data

问题描述

我写了一个混合的应用程序，HTML5和Android code之间的混合 - 它的工作很好，但我有一个几个问题

I've written a blended application that is a mix between HTML5 and android code - It's working well but I'm having a few issues.

我们的应用程序有一个表格，人们会填写（与复选框和相应的数据和注释部分）。这个人可以点击每个复选框，但我需要填充项点击，抢他们选择数据，他们提出的意见。

Our application has a form that people will fill out, (with checkboxes and corresponding data and a comment section). The person can click each check box, but I need to populate the items the clicked, grab the data they were selecting and the comments they made.

什么是做到这一点的最好方法是什么？供参考：数据只是在表中列出，并复选框数每形态变化。他们都涉及到，虽然同样的事情（或同一类）。

What is the best way to do this? For reference: The data is just listed in a table and the number of check boxes changes per form. They all are related to the same thing though (or same class).

我已经写了一个JavaScript接口，但我有搞清楚解析表单数据的最佳方式的问题。

I've written a javascript interface, but I'm having issues figuring out the best way to parse the form data.

谢谢！

           <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（）是我想不通。

parseForm() is what I can't figure out.

类和数据的名称已被更改。此外，当用户点击复选框，这个脚本叫做：

The names of classes and the data have been changed. Also, when a user clicks the checkboxes, this script is called:

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

JavaScript的接口可以采取任何数据，无论是它的JSON，生的或任何东西 - 我会解决我的code工作。

The javascript interface can take any data, whether its JSON, raw or anything - I'll fix my code to work.

推荐答案

要做到这一点，最简单的方法是包含一个jQuery函数如下：

The easiest way to do this is to include a JQuery function as follows:

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

一旦你在你的code，编写JavaScript接口，并附​​加它像这样：

Once you have that in your code, write a javascript interface for it and attach it like so:

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

然后在你的code，添加此还有：

Then in your code, add this as well:

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（数据）和数据锁定发送给一个异步过程prevent的UIThread。确保你做到这一点！

Note, it would be best to accept the data in the parseFormData() and send the data to an ASync process to prevent the UIThread from locking up. Be sure you do this!

这篇关于抓住网页视图表单数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！