dodgem/radio_01.html at master · timschmidt/dodgem · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<!DOCTYPE html>
<html>
	<head>
		<title>Dodgem - an exercise in integrating Dojo and Emscripten</title>
		<meta charset="utf-8">
		<link rel="stylesheet" href="include/dijit/themes/claro/claro.css" type="text/css">
		<script src="include/dojo/dojo.js" data-dojo-config="parseOnLoad: true, async: true, isDebug: true"></script>
		<script>
        require([
        "dijit/layout/BorderContainer",
	      "dijit/layout/ContentPane",
        "dijit/form/TextBox",
        "dijit/form/Button",
        "dijit/form/RadioButton",
        "dojo/parser",
        "dojo/dom",
        "dojo/dom-construct",
        "dojo/domReady!"
		  ],
		function(BorderContainer, ContentPane, TextBox, Button, RadioButton, parser, Dom, DomConstruct){

		  // FORM OBJECTS

      var radioOne = new RadioButton({
        checked: false,
        value: "tea",
        name: "drink",
      }, "radioOne").startup();

      var radioTwo = new RadioButton({
        checked: true,
        value: "milk",
        name: "drink",
      }, "radioTwo").startup();

      var radio3 = new RadioButton({
        checked: false,
        value: "coffee",
        name: "drink",
      }, "radio3").startup();

		  var text_item1 = new TextBox({
            name: "item1",
            style: "width: 40%;",
            value: "" /* no or empty value! */,
          }, "form1_item1");

      var text_item2 = new TextBox({
            name: "item2",
            style: "width: 40%;",
            value: "" /* no or empty value! */,
          }, "form1_item2");

      var text_item3 = new TextBox({
            name: "item3",
            style: "width: 40%;",
            value: "" /* no or empty value! */,
          }, "form1_item3");

      var button1 = new Button({
			  name: "button1",
			  label: "Push me!"
		  }, "form1_button1");

      var button2 = new Button({
			  name: "button2",
			  label: "Drink Choice"
		  }, "form1_button2");

          text_item1.on('change', function(){
			  // call C++ from here

			  text_item3.set('value', "text changed!");
		  });

      button1.on('click', function(){
			  // call C++ from here
			  text_item3.set('value', "button pushed!");
      });

      button2.on('click', function(){
			  // call C++ from here
			  text_item3.set('value', "Put Drink Choice here?");
      });

        });
	</script>
	</head>
<body class="claro">
    <div id="form1_div">
		<form id="form1">
      <input type="radio" name="drink" id="radioOne" checked value="tea"/> <label for="radioOne">tea</label> <br />
      <input type="radio" name="drink" id="radioTwo" value="milk"/> <label for="radioTwo">milk</label> <br />
      <input type="radio" name="drink" id="radio3" value="coffee"/> <label for="radio3">coffee</label>
      <br /><br />
      <button data-dojo-type="dijit/form/Button" type="button">
        Show form submit value
        <script type="dojo/on" data-dojo-event="click">
            require(["dojo/dom"], function(dom){
                 with(dom.byId('form1'))with(elements[0])with(elements[checked?0:2])alert(name+'='+value);
                 return false;
            });
        </script>
      </button>
      <input id="form1_button2"></input>
      <br />
      <p><label>Item 1: <input id="form1_item1"></label></p>
      <p><label>Item 2: <input id="form1_item2"></label></p>
      <p><label>Item 3: <input id="form1_item3"></label></p>
      <p><input id="form1_button1"></p>
		</form>
    </div>
</body>
</html>