Set text to web textbox

Just starting out? Need help? Post your questions and find answers here.
Post Reply
punak
User
User
Posts: 81
Joined: Tue Sep 07, 2021 12:08 pm

Set text to web textbox

Post by punak »

hello
Is it possible to set strings on the textbox in the web page loaded in the webviewgadget?
actually, I want to detect the textbox of the web page and put a string on it. Is this possible by webview control?
Top
Quin
Addict
Addict
Posts: 1126
Joined: Thu Mar 31, 2022 7:03 pm
Location: Colorado, United States
Contact:
Contact Quin

Re: Set text to web textbox

Post by Quin »

How about the WebViewExecuteScript(#Gadget, JavaScript$) function?

SOmething like:

Code: Select all

WebViewExecuteScript(#MyWebView, "document.getElementById('textbox-id').value = 'new text';")
I didn't have time to fully test it, but something like that should get you started. :)
Top
punak
User
User
Posts: 81
Joined: Tue Sep 07, 2021 12:08 pm

Re: Set text to web textbox

Post by punak »

thank you
Is there a function that displays the name or ID of the controls on the web page?
Because I don't know its ID.
Top
DarkDragon
Addict
Addict
Posts: 2344
Joined: Mon Jun 02, 2003 9:16 am
Location: Germany
Contact:
Contact DarkDragon

Re: Set text to web textbox

Post by DarkDragon »

punak wrote: Sat Aug 31, 2024 6:03 am thank you
Is there a function that displays the name or ID of the controls on the web page?
Because I don't know its ID.
Is it always the same page or a different one every time? If always the same you can look it up in your favorite browser by pressing f12.

You can also enumerate all text fields with document.getElementsByTagName or document.querySelectorAll
bye,
Daniel
Top
punak
User
User
Posts: 81
Joined: Tue Sep 07, 2021 12:08 pm

Re: Set text to web textbox

Post by punak »

Can you give an example that returns the id or name of the web controls? Especially the inputs or text boxes...
I tried a lot but my problem still persists :|
Top
punak
User
User
Posts: 81
Joined: Tue Sep 07, 2021 12:08 pm

Re: Set text to web textbox

Post by punak »

Please help me, believe me, I couldn't write by myself, otherwise I wouldn't have asked you.
I don't know JavaScript syntax, just a piece of code that returns the ID or name of the controls on the screen would be great. I want to put my own text on the inputs of a web page whose IDs I don't know
Top
Fred
Administrator
Administrator
Posts: 18162
Joined: Fri May 17, 2002 4:39 pm
Location: France
Contact:
Contact Fred

Re: Set text to web textbox

Post by Fred »

May be you can ask ChatGPT for Javascript, it works properly. Using Quin command, I can successfully set a text in a web input. Here is an example to query a content of an input.

Code: Select all

Procedure TextContentCallback(JsonParameters$)
  
  Debug #PB_Compiler_Procedure +": " + JsonParameters$
  
  Dim Parameters.s(0)
  
  ; Extract the parameters from the JSON
  ParseJSON(0, JsonParameters$)
  ExtractJSONArray(JSONValue(0), Parameters())
  
  Debug "Parameter 1: " + Parameters(0)
    
  ProcedureReturn UTF8("")
EndProcedure

OpenWindow(0, 100, 100, 400, 400, "Hello", #PB_Window_SystemMenu | #PB_Window_Invisible)

WebViewGadget(0, 0, 0, 400, 400)
SetGadgetText(0, "file://" + #PB_Compiler_Home + "examples/sources/Data/WebView/webview.html")
  
; Show the window once the webview has been fully loaded
HideWindow(0, #False)

WebViewExecuteScript(0, "document.getElementById('my-input').value = 'new text';")

BindWebViewCallback(0, "getTextContent", @TextContentCallback())
WebViewExecuteScript(0, "getTextContent(document.getElementById('my-input').value);")

Repeat 
  Event = WaitWindowEvent()
Until Event = #PB_Event_CloseWindow
And the HTML file

Code: Select all

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="webview.css">
</head>
<body>

<input type="text" id="my-input" name="name" required minlength="4" maxlength="8" size="10" />
<script>
</script>
</body>
</html>
Top
punak
User
User
Posts: 81
Joined: Tue Sep 07, 2021 12:08 pm

Re: Set text to web textbox

Post by punak »

Thank you very much Fred. :D
This is a great example when I've built a web page myself and know what ID input is.
I want to find the input IDs of a site loaded in the webview control and fill them.
This is my main problem.
Top
Fred
Administrator
Administrator
Posts: 18162
Joined: Fri May 17, 2002 4:39 pm
Location: France
Contact:
Contact Fred

Re: Set text to web textbox

Post by Fred »

You can try this one to get the full HTML page, so you can parse it with the XML lib and get the ID you want:

Code: Select all

Procedure TextContentCallback(JsonParameters$)
  
  Debug #PB_Compiler_Procedure +": " + JsonParameters$
  
  Dim Parameters.s(0)
  
  ; Extract the parameters from the JSON
  ParseJSON(0, JsonParameters$)
  ExtractJSONArray(JSONValue(0), Parameters())
  
  Debug "Parameter 1: " + Parameters(0)
    
  ProcedureReturn UTF8("")
EndProcedure


Procedure PageLoadedCallback(JsonParameters$)
  
  WebViewExecuteScript(0, "document.getElementById('my-input').value = 'new text';")
  
  BindWebViewCallback(0, "getAsString", @TextContentCallback())
  WebViewExecuteScript(0, "getAsString(document.getElementById('my-input').value);")
  
  WebViewExecuteScript(0, "getAsString(document.documentElement.innerHTML);")
    
  ProcedureReturn UTF8("")
EndProcedure

OpenWindow(0, 100, 100, 400, 400, "Hello", #PB_Window_SystemMenu | #PB_Window_Invisible)

WebViewGadget(0, 0, 0, 400, 400, #PB_WebView_Debug)


SetGadgetText(0, "file://" + #PB_Compiler_Home + "examples/sources/Data/WebView/webview.html")

; Show the window once the webview has been fully loaded
HideWindow(0, #False)

; When loading a page, we need to wait for the load event before accessing the DOM
;
BindWebViewCallback(0, "pageLoaded", @PageLoadedCallback())
WebViewExecuteScript(0, "window.addEventListener('load', function () {pageLoaded(); })");

Repeat 
  Event = WaitWindowEvent()
Until Event = #PB_Event_CloseWindow[/code]
Top
User avatar
Caronte3D
Addict
Addict
Posts: 1355
Joined: Fri Jan 22, 2016 5:33 pm
Location: Some Universe

Re: Set text to web textbox

Post by Caronte3D »

punak wrote: Fri Sep 13, 2024 3:05 pm I want to find the input IDs of a site loaded in the webview control and fill them.
Load the page in your browser (i.e: Chrome), then push F12 and you can see (visually) the ID of the fields you are searching for.
After that, you can use the code on this thread to fill it on your program.
Top
punak
User
User
Posts: 81
Joined: Tue Sep 07, 2021 12:08 pm

Re: Set text to web textbox

Post by punak »

Thanks Fred, I haven't got the result yet, but maybe your codes will make me successful.

@Caronte3D : I did what you said and it showed me these. Which one is ID?

Code: Select all

<input _ngcontent-ial-c516="" type="text" autocomplete="off" formcontrolname="UserName" autofocus="" placeholder="uname" class="form-control myInput ng-dirty ng-valid ng-touched" style="direction: ltr; border-radius: 50px;">
Top
Quin
Addict
Addict
Posts: 1126
Joined: Thu Mar 31, 2022 7:03 pm
Location: Colorado, United States
Contact:
Contact Quin

Re: Set text to web textbox

Post by Quin »

Oh boy, that's some not very pretty HTML...
You could maybe use document.getElementsByClassName and use what it says for class.
Top
punak
User
User
Posts: 81
Joined: Tue Sep 07, 2021 12:08 pm

Re: Set text to web textbox

Post by punak »

@Quin , Can you give a codes example please?
Top
Post Reply

Return to “Coding Questions”