HTML Gui - How to retrieve input?

think · 29 Oct 2023, 09:44

Hi, I'm trying to create a simple gui using html with entry fields.
Could please someone teach me how to get the entered variable field data, in this case Name and Gender? Thanks.

Code: Select all

html:="
(
Name: <input type=""text"" id=""name"" name=""name""><br>
Gender: <select name=""gender"" id=""gender""><option value=""male"">Male</option><option value=""female"">Female</option></select>
)"
	
gui, add, ActiveX, w300 h100 vWB +ReadOnly -E0x200 -tabstop +VScroll, about:<!DOCTYPE html><meta http-equiv="X-UA-Compatible" content="IE=edge">
gui, add, button, w70 h25 gButtonShow, Show 
WB.document.write(html)
gui, show
return

ButtonShow:
msgbox %name%`n%gender%
return

mikeyww · 29 Oct 2023, 10:02

Just another option if you want it.

Code: Select all

#Requires AutoHotkey v1.1.33
genderList := "Male|Female|Transgender male|Transgender female|Other|Does not wish to disclose|Non-binary"
Gui Font, s10
Gui Add, Text  , w50, Name:
Gui Add, Text  , wp , Gender:
Gui Add, Edit  , w200 vname   gCheck   ym
Gui Add, DDL   , wp   vgender gCheck     , % genderList
Gui Add, Button, w262 Default Disabled xm, OK
Gui Show,, Information
Return

Check:
Gui Submit, NoHide
GuiControl % name = "" || gender = "" ? "Disable" : "Enable", OK
Return

ButtonOK:
Gui Submit
MsgBox 64, Result, % "Name:   " name "`nGender: " gender
Return

think · 29 Oct 2023, 11:37

Thanks. I know but would like specifically learn how to interact with html gui.

mikeyww · 29 Oct 2023, 12:24

OK. Will need some others to reply here.

teadrinker · 29 Oct 2023, 14:29

Code: Select all

msgbox % WB.document.getElementById("name").value . "`n" . WB.document.getElementById("gender").value

think · 29 Oct 2023, 14:53

Thanks Teadrinker, this is great!

May I ask another one? Is it possible to do the opposite, to set the input box value? In below script, Could we set the Name2 input value to be equal to Name1 after Name1 is entered? Thanks!
Also, it there a link with other possible html commands available?

Code: Select all

html:="
(
Name1: <input type=""text"" id=""name1"" name=""name1""><br>
Name2: <input type=""text"" id=""name2"" name=""name2""><br>
)"
gui, add, ActiveX, w300 h100 vWB +ReadOnly -E0x200 -tabstop +VScroll, about:<!DOCTYPE html><meta http-equiv="X-UA-Compatible" content="IE=edge">
gui, add, button, w70 h25 gButtonShow, Show 
WB.document.write(html)
gui, show
return

ButtonShow:
msgbox % WB.document.getElementById("name1").value . "`n" . WB.document.getElementById("name2").value
return

teadrinker · 29 Oct 2023, 15:35

Sure:

Code: Select all

ButtonShow:
input1 := WB.document.getElementById("name1")
input2 := WB.document.getElementById("name2")
input2.value := input1.value
return

think wrote: ↑link with other possible html commands available?

The links are there, but you have to have some experience to use them.
IHTMLDocument2 interface
IHTMLDocument3 interface
and so on.
The syntax used here is similar to JavaScript ES5 (outdated JavaScript version).

think · 29 Oct 2023, 15:58

Wow, that simple, thanks! And thanks for the links, greatly appreciated!

A small thing: would it be possible to replicate the entry so the same name would appear in both boxes while typing?

teadrinker · 29 Oct 2023, 16:19

Code: Select all

#Requires AutoHotkey v1

html =
(
Name1: <input type="text" name="name1"><br>
Name2: <input type="text" name="name2"><br>

<script>
    name1.addEventListener("input", inputHandler);

    function inputHandler(event) {
        name2.value = event.target.value;
    }
</script>
)
gui, add, ActiveX, w300 h100 vWB, about:<!DOCTYPE html><meta http-equiv="X-UA-Compatible" content="IE=edge">
WB.document.write(html)
gui, show
return

think · 30 Oct 2023, 11:50

Thank you so much @teadrinker , this is awesome, I've learned a lot.
I'm slowly progressing to create a html form. Few more questions.

- Is it possible to set the focus on the first field so you can start typing immediately? I tried "autofocus" attribute and "focus" method but it doesn't work. Script below.
- I need to add some validation. I added "<form>" tags, "required" attribute and "submit" button but cannot figure out how to connect it with my script - clicking the button should also close the gui window. Or should I somehow use ahk button for this?

Code: Select all

html =
(
<form>
Name1: <input type="text" name="name1" id="name1" autofocus required><br>
Name2: <input type="text" name="name2"><br><br>
<input type="submit" value="Submit">
</form>
)
gui, add, ActiveX, w300 h100 vWB, about:<!DOCTYPE html><meta http-equiv="X-UA-Compatible" content="IE=edge">
WB.document.write(html)
guicontrol, focus, WB
WB.document.getElementById("name1").focus()
gui, show
return

vmech · 30 Oct 2023, 12:04

Error in line 4. Must be name="name1" id="name1".

think · 30 Oct 2023, 15:55

Thanks, corrected and it works now.

Any idea about the second question?
- I need to add some validation. I added "<form>" tags, "required" attribute and "submit" button but cannot figure out how to connect it with my script - clicking the button should also close the gui window. Or should I somehow use ahk button for this?

teadrinker · 30 Oct 2023, 17:34

Code: Select all

html =
(
<form>
Name1: <input type="text" name="name1" id="name1" autofocus required><br>
Name2: <input type="text" name="name2" id="name2"><br><br>
<input type="submit" id="submit" value="Submit">
</form>
)
gui, add, ActiveX, w300 h100 vWB, about:<!DOCTYPE html><meta http-equiv="X-UA-Compatible" content="IE=edge">
WB.document.write(html)
guicontrol, focus, WB
WB.document.getElementById("name1").focus()
gui, show

WB.document.getElementById("submit").addEventListener("click", Func("Submit"))
return

Submit() {
   global WB
   if ((value1 := WB.document.getElementById("name1").value) != "") {
      value2 := WB.document.getElementById("name2").value
      Gui, Destroy
      MsgBox % "Name1: " . value1 . "`nName2: " . value2
   }
}

or

Code: Select all

html =
(
<form>
Name1: <input type="text" name="name1" id="name1" autofocus required><br>
Name2: <input type="text" name="name2" id="name2"><br><br>
<input type="submit" id="submit" value="Submit">
</form>
)
gui, add, ActiveX, w300 h100 vWB, about:<!DOCTYPE html><meta http-equiv="X-UA-Compatible" content="IE=edge">
WB.document.write(html)
guicontrol, focus, WB

GetElem := ObjBindMethod(WB.document, "getElementById")
GetElem.Call("name1").focus()
gui, show

GetElem.Call("submit").addEventListener("click", Func("Submit"))
return

Submit() {
   global GetElem
   if ((value1 := GetElem.Call("name1").value) != "") {
      value2 := GetElem.Call("name2").value
      Gui, Destroy
      MsgBox % "Name1: " . value1 . "`nName2: " . value2
   }
}

think · 31 Oct 2023, 08:52

Thanks, works great! I may be having many entry fields with different validations. I see in this code I need to create an ahk validation too for each field to prevent closing the window... is there a way to avoid this and only rely on html validation?

teadrinker · 31 Oct 2023, 11:21

Code: Select all

html =
(
<form id="form">
Name1: <input type="text" name="name1" id="name1" autofocus required><br>
Name2: <input type="text" name="name2" id="name2" required><br><br>
<input type="submit" id="submit" value="Submit">
</form>
)
gui, add, ActiveX, w300 h100 vWB, about:<!DOCTYPE html><meta http-equiv="X-UA-Compatible" content="IE=edge">
WB.document.write(html)
guicontrol, focus, WB

GetElem := ObjBindMethod(WB.document, "getElementById")
GetElem.Call("name1").focus()
gui, show

GetElem.Call("form").addEventListener("submit", Func("Submit"))
return

Submit() {
   global GetElem
   value1 := GetElem.Call("name1").value
   value2 := GetElem.Call("name2").value
   Gui, Destroy
   MsgBox % "Name1: " . value1 . "`nName2: " . value2
}

think · 01 Nov 2023, 11:39

Thank you very much

think · 02 Nov 2023, 06:44

Any idea why is Tab key not working for moving from field to field? Thanks

Code: Select all

html =
(
<form id="form">
   Name1: <input type="text" name="name1" id="name1" ><br>
   Name2: <input type="text" name="name2" id="name2" ><br>
   Name3: <input type="text" name="name3" id="name3" ><br>
</form>
)
gui, add, ActiveX, w300 h150 vWB, about:<!DOCTYPE html><meta http-equiv="X-UA-Compatible" content="IE=edge">
WB.document.write(html)
gui, show

teadrinker · 02 Nov 2023, 08:47

No corresponding handler?

think · 02 Nov 2023, 09:12

teadrinker wrote:No corresponding handler?

Sorry, I don’t understand what you mean.

teadrinker · 02 Nov 2023, 09:47

When you press a key while a browser window is active, a keydown event fires. The browser monitors this event and reacts to it, but the appropriate event listener function must be written to do this. There may not be such an listener in ActiveX, but you can write it yourself.

HTML Gui - How to retrieve input?

HTML Gui - How to retrieve input?

Re: HTML Gui - How to retrieve input?

Re: HTML Gui - How to retrieve input?

Re: HTML Gui - How to retrieve input?

Re: HTML Gui - How to retrieve input?

Re: HTML Gui - How to retrieve input?

Re: HTML Gui - How to retrieve input?

Re: HTML Gui - How to retrieve input?

Re: HTML Gui - How to retrieve input?

Re: HTML Gui - How to retrieve input?

Re: HTML Gui - How to retrieve input?

Re: HTML Gui - How to retrieve input?

Re: HTML Gui - How to retrieve input?

Re: HTML Gui - How to retrieve input?

Re: HTML Gui - How to retrieve input?

Re: HTML Gui - How to retrieve input?

Re: HTML Gui - How to retrieve input?

Re: HTML Gui - How to retrieve input?

Re: HTML Gui - How to retrieve input?

Re: HTML Gui - How to retrieve input?

Who is online