# In need of some help - Modal text input with cancel

**URL:** <https://discourse.nodered.org/t/in-need-of-some-help-modal-text-input-with-cancel/15125>\
**Category:** Dashboard\
**Created:** [4 September 2019 22:42 UTC](https://discourse.nodered.org/t/in-need-of-some-help-modal-text-input-with-cancel/15125 "2019-09-04T22:42:01Z")\
**Posts on this page:** 1\
**Showing post:** 10

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [8 September 2019 11:12 UTC](https://discourse.nodered.org/t/in-need-of-some-help-modal-text-input-with-cancel/15125/10 "2019-09-08T11:12:51Z")

</div>

This should get you started...

```auto
[{"id":"d7d1671e.9b2f88","type":"ui_template","z":"56fa9896.d15ed8","group":"dfb4a60f.d788f8","name":"","order":1,"width":"12","height":"7","format":"<div ng-bind-html=\"msg.payload\">\n</div> \n \n \n\n<p>Click the buttons to show and/or close the dialog window.</p>\n\n<button onclick=\"showDialog()\">Show dialog</button>\n<button onclick=\"closeDialog()\">Close dialog</button>\n\n<p><b>Note:</b> The dialog element is only supported in Chrome 37+, Safari 6+ and Opera 24+.</p>\n\n<dialog id=\"myDialog\">\n<h3>Please scan the QR Code</h3>\n\t\t\t<p>Please do not click on the screen, the cursor must be in the box while scanning the code</p>\n\t\t\t<input type=\"text\" id=\"return_value\" value=\"\" placeholder=\"Enter value\" onkeypress=\"myFunction(event)\"></dialog>\n<script>\nvar theScope = scope;\nvar x = document.getElementById(\"myDialog\"); \n\nfunction showDialog() { \n x.show(); \n} \n\nfunction closeDialog() { \n x.close(); \n} \n\nfunction myFunction(event) \n\t{\n\t console.log(event)\n \tif (event.keyCode === 13) \n \t\t{\n \t\t var data = $(\"#return_value\").val();\n\t console.log(\"sending value:\",data)\n\t theScope.send({payload:data});\n \tx.close();\n\t\t}\n \t}\n</script>\n \n ","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":620,"y":140,"wires":[["afd9fd14.bf0d5"]]},{"id":"afd9fd14.bf0d5","type":"debug","z":"56fa9896.d15ed8","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":770,"y":140,"wires":[]},{"id":"dfb4a60f.d788f8","type":"ui_group","z":"","name":"Barcode","tab":"48418b79.0f5834","disp":true,"width":"12","collapse":false},{"id":"48418b79.0f5834","type":"ui_tab","z":"","name":"Dashboard","icon":"dashboard","order":1}]

```

Copy the above flow, open your node-red, press `ctrl+i`, paste in the flow, deploy the flow, open the dashboard (`ctrl+shift+d`).

It may not be entirely what you want but it should get you started.

When the enter button is pressed (by you or the scanner) a `msg` will be sent to the debug window. Use the output in `msg.payload` to do what you need.

---

_[View the full topic](https://discourse.nodered.org/t/in-need-of-some-help-modal-text-input-with-cancel/15125)._