Question

我的Dart应用程序遇到了问题。它似乎只在我的表单中检索我的日期字段而不是其余部分。下面是我简单表格的代码。如果您需要更多信息，请询问，我将很乐意将其取消。

HTML：

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    <title>DomainSort</title>
    <link rel="stylesheet" href="domainsort.css">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
  <script>
  $(function() {
    $( "#datepicker" ).datepicker();
  });
  </script>
  </head>
  <body>

  <form id="domainfilter"  role="form" action="">
  <div class="form-group">
  <label for="domain">Domain: </label>
  <input type="text" class="form-control" id="domain" value="" placeholder="Type domain"/>
  <br/>
  <label for="asset"">Asset: </label>
  <br/>
  <select id="asset" class="btn btn-default">
  <option value="Asset 1">Asset Type 1</option>
  <option value="Asset 2">Asset Type 2</option>
  <option value="Asset 3">Asset Type 3</option>
  <option value="Asset 4">Asset Type 4</option>
  <option value="Asset 5">Asset Type 5</option>
  </select>
  <br/>
  <br/>
  <label for="range1">IP Range 1: </label>
  <input type="text" class="form-control" id="range1" value="" placeholder="First three digits"/>
  <br/>
  <label for="range2">IP Range 2: </label>
  <input type="text" class="form-control" id="range2" value="" placeholder="Middle three digits"/>
  <br/>
  <label for="range3">IP Range 3: </label>
  <input type="text" class="form-control" id="range3" value="" placeholder="Last three digits"/>
  <br/>
  <label for="datepicker">Date: </label>
  <input type="text" class="form-control" id="datepicker" placeholder="Choose a date">
  <br/>
  </div>
  <button id="submit" class="btn btn-primary">Go</button>
  </form>

    <script type="application/dart" src="domainsort.dart"></script>
    <script src="packages/browser/dart.js"></script>
  </body>
</html>

DART代码：

import 'dart:html';
import 'dart:convert';

void main() 
{
  FormElement form = querySelector("#domainfilter");
  ButtonElement button = querySelector("#submit");

  button.onClick.listen((e){

    var req = new HttpRequest();

    req.onReadyStateChange.listen((ProgressEvent e){

      if(req.readyState == HttpRequest.DONE)
      {
        print("Submission successful");
      }
      else
      {
        print("Submission unsuccessful");
      }
    });

    req.open("POST", form.action);
    req.send(JSON.encode(serializeForm(form)));

    print(JSON.encode(serializeForm(form)));

  });

}

serializeForm(FormElement form)
{
  var data = {};

  form.querySelectorAll("input,select").forEach((Element el)
  {
    if(el is InputElement)
    {
      data[el.name] = el.value;
    }

  });

  return data;
}

Answer 1

您的HTML无效

在HTML5中你必须使用

<input type="text" class="form-control" id="domain" value="" placeholder="Type domain"></input>

而不是

<input type="text" class="form-control" id="domain" value="" placeholder="Type domain"/>

请参阅Are (non-void) self-closing tags valid in HTML5?

Answer 2

问题是我没有在Dart代码中正确定位正确的DOM元素。我需要检索元素ID而不是名称。

Google Dart未检索所有表单元素值

2 个答案: