Get the edited html content using inner HTML

[Sunsiha]

Am loading html content in webview. It's loading perfectly. It has input field, radio, checkbox etc. It's kind of form. So after loading this HTML content I Can edit and submit the HTML response to the backend side. Here am facing an issue, if I try to edit something and try to get inner html or getHtml content am not getting the newly changed html content. It's always getting the loaded html content.

body: Column(children: <Widget>[
      Expanded(
        child: InAppWebView(
          initialData: InAppWebViewInitialData(
              data: '<div id="form-response">' +
                  widget.htmlTemplate +
                  '</div>'),
          initialOptions: InAppWebViewGroupOptions(
              crossPlatform: InAppWebViewOptions(javaScriptEnabled: true)),
          onLoadStop: (InAppWebViewController controller, url) async {

          },
          onWebViewCreated: (InAppWebViewController controller) {
            _webViewController = controller;
            _webViewController.addJavaScriptHandler(
                handlerName: 'handleResponse',
                callback: (args) {
                  log('args===$args');
                });
          },
          onConsoleMessage: (controller, consoleMessage) {
            print(consoleMessage);
          },
            gestureRecognizers: <
                Factory<OneSequenceGestureRecognizer>>{
              Factory<VerticalDragGestureRecognizer>(
                      () => VerticalDragGestureRecognizer()),
              Factory<HorizontalDragGestureRecognizer>(
                      () => HorizontalDragGestureRecognizer()),
              Factory<ScaleGestureRecognizer>(
                      () => ScaleGestureRecognizer()),
            },
        ),
      ),
      GestureDetector(
        behavior: HitTestBehavior.opaque,
        onTap: () async {
          // var a=await _webViewController.getHtml();
          // print('test1====');
          // log(a!);
          // var html = await _webViewController.evaluateJavascript(
          //     source:
          //         "window.document.getElementsByTagName('html')[0].outerHTML;");
          var response=getResponse('S');
          log('response$response');
          var html = await _webViewController.evaluateJavascript(
              source: response);
          // "window.document.getElementsByTagName('html')[0].innerHTML;");
          // String docu = await _webViewController.evaluateJavascript(source:
          // 'document.getElementById("form-response").innerHTML') as String;
          //
          log('test====');
          // log(html);
        },
        child: Text(
          Strings.m081,
          style: AppStyle().regularStyle.copyWith(
              fontWeight: FontWeight.w600,
              fontSize: AppStyle.fontSize14,
              color: const Color(0xff1973B9)),
        ),
      )
    ])
    ```
My use case: I have a webView inside flutter app. Webview renders a HTML content. Page contains html textfields and radio buttons, checkboxes. I want to receive the changes of HTML when we click on submit button. Note: The HTML content is getting from backend. And it's dynamic, so to add onClick in each textfield, radio, checkbox it's not practical. And the same HTML web also using.

1. How to get the edited html response?
2. Is it is happening because the controller am calling in onLoadStop and onWebViewCreated?
3. Is there a way to receive the text changes stream of a webview textfield/radio/checkbox in flutter?
4. Is there in any onstate change for controller?

[github-actions[bot]]

👋 @Sunsiha

NOTE: This comment is auto-generated.

Are you sure you have already searched for the same problem?

Some people open new issues but they didn't search for something similar or for the same issue. Please, search for it using the GitHub issue search box or on the official inappwebview.dev website, or, also, using Google, StackOverflow, etc. before posting a new one. You may already find an answer to your problem!

If this is really a new issue, then thank you for raising it. I will investigate it and get back to you as soon as possible. Please, make sure you have given me as much context as possible! Also, if you didn't already, post a code example that can replicate this issue.

In the meantime, you can already search for some possible solutions online! Because this plugin uses native WebView, you can search online for the same issue adding android WebView [MY ERROR HERE] or ios WKWebView [MY ERROR HERE] keywords.

Following these steps can save you, me, and other people a lot of time, thanks!