0

I'm having trouble with my Dart application. It seems to only retrieve my date field in my form and not the rest of them. Below is the code to my simple form. If you need more information please ask and I will be happy to off it.

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

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;
}
user3757992
  • 159
  • 6

2 Answers2

0

Your HTML is not valid

In HTML5 you have to use

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

instead of

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

see Are (non-void) self-closing tags valid in HTML5?

Community
  • 1
  • 1
Günter Zöchbauer
  • 490,478
  • 163
  • 1,733
  • 1,404
0

The issue was that I was not properly targeting the correct DOM element in the Dart code. I needed to retrieve the element ID and not the name.

user3757992
  • 159
  • 6