HTML Gui - How to retrieve input?
Re: HTML Gui - How to retrieve input?
Thanks @teadrinker. Unfortunately I have not enough knowledge to implement this. Any further tip would help...
-
- Posts: 4411
- Joined: 29 Mar 2015, 09:41
- Contact:
Re: HTML Gui - How to retrieve input?
You don't have to do this in the context of an html document. You can simply create a Tab hotkey.
Re: HTML Gui - How to retrieve input?
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
Re: HTML Gui - How to retrieve input?
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?
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
-
- Posts: 4411
- Joined: 29 Mar 2015, 09:41
- Contact:
Re: HTML Gui - How to retrieve input?
No, I only know that the ActiveX WebBrowser control is very limited in its functionality as it uses a long outdated API.
Re: HTML Gui - How to retrieve input?
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)?
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
}
Re: HTML Gui - How to retrieve input?
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
;=========
Last edited by garry on 04 Nov 2023, 14:40, edited 1 time in total.
Re: HTML Gui - How to retrieve input?
Thanks garry. However this does not validate the input (name1 is a required field).
Any ideas?
Any ideas?
-
- Posts: 4411
- Joined: 29 Mar 2015, 09:41
- Contact:
Re: HTML Gui - How to retrieve input?
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
}
Re: HTML Gui - How to retrieve input?
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?
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
}
-
- Posts: 4411
- Joined: 29 Mar 2015, 09:41
- Contact:
Re: HTML Gui - How to retrieve input?
Just format this block of code as a function, and use a function call instead of gosub.
Re: HTML Gui - How to retrieve input?
Do you mean to move Continue routine out of the Input() function?
-
- Posts: 4411
- Joined: 29 Mar 2015, 09:41
- Contact:
Re: HTML Gui - How to retrieve input?
@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.
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
-
- Posts: 4411
- Joined: 29 Mar 2015, 09:41
- Contact:
Re: HTML Gui - How to retrieve input?
I'm sure there's enough information in this topic to solve the problem, and in several different ways.
Re: HTML Gui - How to retrieve input?
@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?
-
- Posts: 4411
- Joined: 29 Mar 2015, 09:41
- Contact:
Re: HTML Gui - How to retrieve input?
getElementById ?
Re: HTML Gui - How to retrieve input?
@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...
-
- Posts: 4411
- Joined: 29 Mar 2015, 09:41
- Contact:
Re: HTML Gui - How to retrieve input?
Can you you look at other code samples in this topic to get how to use getElementById?
Re: HTML Gui - How to retrieve input?
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
Who is online
Users browsing this forum: Spawnova and 262 guests