Home/ Questions/Q 8908407
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T03:10:16+00:00

I am trying to get data from a form in Dart webComponent. The following

  • 0

I am trying to get data from a form in Dart webComponent. The following LoginComponent is defined.
doLogin function is not called when submit button is clicked. Tried placing on-click handler on submit button but that does not work either.

<html><body>
<element name="x-login" constructor="LoginComponent" extends="div">
<template >
    <form id='loginForm' on-submit='doLogin()'>
        <div>
            <h1>Login :</h1>
            <label for="loginName">Login name</label>
            <input type="text" required="required" data-bind="value:loginId" />
            <label>Password</label>
            <input type="password" required="required" data-bind="value:pwd" />
            <input type='submit' value="Login" />
            <input type='button' data-action="click:doCancel" value="Cancel" />               
            <span>{{errorMessage}}</span></div>
        </div>
    </form>      
</template>

<script type="application/dart">
  import 'package:web_components/web_components.dart';      
  import 'ouremr.dart';  
  import 'dart:html';

  class LoginComponent extends WebComponent {
  String errorMessage=""; 
  String loginId='';
  String pwd='';                     
  }                               

    void doLogin(e) {
    print("in do login");
      e.preventDefault();          
      print(loginId);
      print(pwd);

      }  

    void doCancel(e) {
    e.preventDefault();
      errorMessage=' ';         
      style.display='none';
    }                       
  }           
</script>
</element>
</body></html>

doLogin function is not called when form is submitted.
Tried following but that does not work either: 

<input type='submit' value="Login" on-click='onLogin()'/>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    thanks for the question! Really cool to see you playing with Dart’s Web UI libraries.

    I cleaned up your code, and with a few tweaks, it works!

    • Put the handlers like doLogin into the LoginComponent class
    • Had an extra </div> in your template
    • Add $event to your on-click expressions

    See here for the code:

    <!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    <title>login_page</title>
    <link rel="components" href="login_form.html">
  </head>
  <body>
    <h1>login_page</h1>

    <x-login></x-login>

    <script type="application/dart">main() {}</script>
    <script type="text/javascript" src="https://dart.googlecode.com/svn/branches/bleeding_edge/dart/client/dart.js"></script>
  </body>
</html>

    and

    <!DOCTYPE html>
<html><body>
<element name="x-login" constructor="LoginComponent" extends="div">
<template >
    <form id='loginForm' on-submit='doLogin($event)'>
        <div>
            <h1>Login :</h1>
            <label for="loginName">Login name</label>
            <input type="text" required="required" data-bind="value:loginId" />
            <label>Password</label>
            <input type="password" required="required" data-bind="value:pwd" />
            <input type='submit' value="Login" />
            <input type='button' on-click="doCancel($event)" value="Cancel" />               
            <span>{{errorMessage}}</span>
        </div>
    </form>      
</template>

<script type="application/dart">
  import 'package:web_components/web_components.dart'; 
  import 'dart:html';

  class LoginComponent extends WebComponent {
   String errorMessage=""; 
   String loginId='';
   String pwd=''; 

    void doLogin(Event e) {
      print("in do login");
      e.preventDefault();          
      print(loginId);
      print(pwd);
    }  

    void doCancel(Event e) {
      e.preventDefault();
      errorMessage=' ';         
      style.display='none';
    }                       
  }          
</script>
</element>
</body></html>

    Hope that helps!

    (note, the above code works with version 0.2.7 of dart_web_components)

    • 0