HTML Gui - How to retrieve input?

think · 02 Nov 2023, 11:10

Thanks @teadrinker. Unfortunately I have not enough knowledge to implement this. Any further tip would help...

teadrinker · 02 Nov 2023, 13:15

You don't have to do this in the context of an html document. You can simply create a Tab hotkey.

think · 02 Nov 2023, 14:14

Thanks for the tip. This works, I hope it's a correct way.

Code: Select all

html =
(
<form id="form">
   Name1: <input type="text" name="name1" id="1" ><br>
   Name2: <input type="text" name="name2" id="2" ><br>
   Name3: <input type="text" name="name3" id="3" ><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
WB.document.getElementById("1").focus()
max:=WB.document.getElementById("form").elements.length
return

Tab::
+Tab::
pos:=WB.document.activeElement.id+((A_ThisHotkey="Tab")?1:-1)
if (pos>max)
   pos:=1
if (pos<1)
   pos:=max
WB.document.getElementById(pos).focus()
return

think · 03 Nov 2023, 14:05

Hello, it's me again

I tested different form input tags and it generally works. However there are some which cannot be styled properly. For example
- <input type="number"> - there are no up/down arrows like in a browser
- <input type="range"> - slider looks ugly and very different as in a browser. I tried several styling settings with no luck.
Any idea how to change the look of those?

Code: Select all

html =
(
Number: <input type="number" ><br>
Range: <input type="range" ><br>
)
gui, add, ActiveX, w300 h200 vWB, about:<!DOCTYPE html><meta http-equiv="X-UA-Compatible" content="IE=edge">
WB.document.write(html)
gui, show
return

teadrinker · 03 Nov 2023, 15:12

No, I only know that the ActiveX WebBrowser control is very limited in its functionality as it uses a long outdated API.

think · 04 Nov 2023, 04:59

Thanks @teadrinker, I'll have to live with that.

If you allow me another question...
In the script below, html submit button submits the form and validates the input.
Is it possible to define a ahk button to have the same role without using html submit button?

And... how can Submit() function below continue with another routine in ahk script (goto/gosub doesn't work)?

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">
gui, add, button, w75 h25, Submit
WB.document.write(html)
gui, show

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

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

garry · 04 Nov 2023, 11:58

I tried this

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>
</form>
)
global WB
gui, add, ActiveX, w300 h100 vWB, about:<!DOCTYPE html><meta http-equiv="X-UA-Compatible" content="IE=edge">
gui, add, button, w75 h25 gA1, Submit
WB.document.write(html)
gui, show
return
;---------
guiclose:
exitapp
;---------
a1:
   value1 := WB.document.getElementById("name1").value
   value2 := WB.document.getElementById("name2").value
      if (value1="" or value2="" )
     {
	 msgbox, 262192, ,Missing value1 or value2
     return
	 }
   MsgBox % "Name1: " . value1 . "`nName2: " . value2
gosub,a2   ;- or you can use a button in GUI to run gLabel A2
return
;---------
A2:
msgbox,A2
return
;=========

think · 04 Nov 2023, 13:49

Thanks garry. However this does not validate the input (name1 is a required field).

Any ideas?

teadrinker · 04 Nov 2023, 14:06

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" style="visibility: hidden">
</form>
)
gui, add, ActiveX, w300 h100 vWB, about:<!DOCTYPE html><meta http-equiv="X-UA-Compatible" content="IE=edge">
gui, add, button, w75 h25, Submit
WB.document.write(html)
gui, show

WB.document.getElementsByTagName("form")[0].addEventListener("submit", Func("OnSubmit"))
return

ButtonSubmit() {
   global WB
   WB.document.getElementById("submit").click()
}

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

think · 06 Nov 2023, 08:36

Thanks @teadrinker, you did it again. I think I'm good with html now

The only thing is that the script is a part of a larger script inside a custom Input() function and there are other functionalities as well - example below.
In this case I need to submit the results of the form back to the function and continue with "Continue" routine inside the function (which is used for other purposes as well). I get an error: A Goto/Gosub must not jump into a block that doesn't enclose it.
Any idea how to resolve this?

Code: Select all

input()
return

Input(){
	global 
	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" style="visibility: hidden">
	</form>
	)
	gui, add, ActiveX, w300 h100 vWB, about:<!DOCTYPE html><meta http-equiv="X-UA-Compatible" content="IE=edge">
	gui, add, button, w75 h25, Submit
	gui, add, button, w75 h25 gContinue, Continue
	WB.document.write(html)
	gui, show
	WB.document.getElementsByTagName("form")[0].addEventListener("submit", Func("OnSubmit"))
	return

	Continue:
	gui, submit, nohide
	MsgBox % "Name1: " . value1 . "`nName2: " . value2
	return

return
}

ButtonSubmit() {
   global WB
   WB.document.getElementById("submit").click()
}

OnSubmit() {
   global WB
   value1 := WB.document.getElementById("name1").value
   value2 := WB.document.getElementById("name2").value
   Gui, Destroy
   gosub Continue
}

teadrinker · 06 Nov 2023, 08:52

Just format this block of code as a function, and use a function call instead of gosub.

think · 06 Nov 2023, 09:11

Do you mean to move Continue routine out of the Input() function?

teadrinker · 06 Nov 2023, 10:43

Exactly

think · 30 Nov 2023, 10:24

@teadrinker or anyone. I tried to combine two things I learned about in this topic.
Unfortunately when I enclose the inputs into the <form>, then addEventListener function is not working anymore - error: name1 is undefined.
Any idea how to solve this? Thanks.

Code: Select all

html =
(
<form>
Name1: <input type="text" id="name1" ><br>
Name2: <input type="text" id="name2" ><br>
</form>

<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

teadrinker · 30 Nov 2023, 11:14

I'm sure there's enough information in this topic to solve the problem, and in several different ways.

think · 30 Nov 2023, 11:47

@teadrinker , I know. However, I was trying to find a solution for a whole day today without success - after enclosing the inputs into the <form> the function doesn't work anymore. I admit I have limited html/javascript knowledge. Any tip?

teadrinker · 30 Nov 2023, 12:05

getElementById ?

think · 30 Nov 2023, 12:22

@teadrinker I'm not sure what you mean. The "addEventListener" is listening for the input of name1 and is replicating the value in the name2 while typing so they are always the same. It works well without a form. If the inputs are inside the form then it's not working. Sorry if I'm confusing...

teadrinker · 30 Nov 2023, 12:26

Can you you look at other code samples in this topic to get how to use getElementById?

think · 30 Nov 2023, 12:36

Ok, now I see what you mean... like this? Sorry for being slow!

Code: Select all

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

<script>
    n1 = document.getElementById("name1")
    n2 = document.getElementById("name2")
    n1.addEventListener("input", inputHandler);
    function inputHandler(event) {
        n2.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

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?

Re: HTML Gui - How to retrieve input?

Who is online