Android Question Enter text in web page

davelew1s

Active Member
Licensed User
Longtime User
I'm struggling with this I want to load a web page(which I can do) then programatically fill a textbox and then press submit. I searched the forum and tried many posts and libs but cannot get it work. Can someone point me in some direction or offer any help?
Thanks Dave.
 

davelew1s

Active Member
Licensed User
Longtime User
Thanks Erel and Martin that's helped me a little but only in as much as I don't know anything about js (i will have to read up on this) so if you can give me some help to get me going.
I can load the web page into a webview, I now want to enter eg 'AD1041' into ICAO24 address: and get the results.... the web page is "http://www.airframes.org". If you can just get me started that would be great.
Dave.
 
Upvote 0

warwound

Expert
Licensed User
Longtime User
Well i've managed to create some javascript to set the ICAO24 address input element, the javascript can hopefully be updated to set other form elements too.

But trying to submit the form using javascript kept telling me that the form had no submit() method.
After a little research i found this page: http://stackoverflow.com/questions/833032/submit-is-not-a-function-in-javascript.

If a form's submit button is named 'submit' then the form's default javascript submit() method has been overwritten - the submit() method no longer exists.
The same logic applies to the reset button name and the javascript reset() method.


FYI this is the HTML form:

PHP:
<form action="/" method="post">
  <fieldset>
  <legend> Aircraft database &nbsp; </legend>
  <table width="100%" class="no">
  <tbody><tr><td class="no">Registration:  </td><td class="no"><input type="text" value="" name="reg"> </td><td class="no small">[e.g. D-AIHA or daiha]</td><td rowspan="4" class="no">&nbsp;</td>
  <td align="right" width="10%" rowspan="4" class="no">
&nbsp; </td></tr>  
  <tr><td class="no">Selcal:  </td><td class="no"><input type="Text" value="" name="selcal"> </td><td class="no small">[e.g. AE-KQ or aekq]</td></tr>
  <tr><td class="no">ICAO24 address: </td><td class="no"><input type="Text" value="" name="icao24"> </td><td class="no small">[Mode-S address, default hex, or <input type="radio" value="D" name="t">dec <input type="radio" value="O" name="t">oct <input type="radio" value="B" name="t">bin]</td></tr>
  <tr><td class="no">&nbsp;  </td><td class="no"><input type="submit" value="submit" name="submit"> <input type="reset" value="reset" name="reset"> &nbsp; </td><td class="no small">... <a href="/nobots.php">no bots</a> ... &nbsp; </td></tr>
  </tbody></table>
  </fieldset>
  </form>

And a link to the Markup Validation Service.

And my javascript:

B4X:
var elements=document.forms[0].getElementsByTagName('fieldset')[0].getElementsByTagName('input');
var element;
for(var i=0, j=elements.length; i<j; i++){
   element=elements[i];
   switch(element.name){
     case 'reg':
       break;
     case 'selcal':
       break;
     case 'icao24':
       element.value='AD1041';
       console.log('icao24 set');
       break;
   }
}
//   document.createElement('form').submit.call(document.forms[0]);   //   doesn't work!

You can see that "stealing another form instance's submit() method" does not work.

Actually, i've been testing this using desktop Firefox browser, maybe the WebView (being a webkit based browser) will behave differently, the submit might work on a WebView.

I'll leave you to have a read and experiment.

Martin.
 
Upvote 0

davelew1s

Active Member
Licensed User
Longtime User
Well i've managed to create some javascript to set the ICAO24 address input element, the javascript can hopefully be updated to set other form elements too.

But trying to submit the form using javascript kept telling me that the form had no submit() method.
After a little research i found this page: http://stackoverflow.com/questions/833032/submit-is-not-a-function-in-javascript.

If a form's submit button is named 'submit' then the form's default javascript submit() method has been overwritten - the submit() method no longer exists.
The same logic applies to the reset button name and the javascript reset() method.


FYI this is the HTML form:

PHP:
<form action="/" method="post">
  <fieldset>
  <legend> Aircraft database &nbsp; </legend>
  <table width="100%" class="no">
  <tbody><tr><td class="no">Registration:  </td><td class="no"><input type="text" value="" name="reg"> </td><td class="no small">[e.g. D-AIHA or daiha]</td><td rowspan="4" class="no">&nbsp;</td>
  <td align="right" width="10%" rowspan="4" class="no">
&nbsp; </td></tr>
  <tr><td class="no">Selcal:  </td><td class="no"><input type="Text" value="" name="selcal"> </td><td class="no small">[e.g. AE-KQ or aekq]</td></tr>
  <tr><td class="no">ICAO24 address: </td><td class="no"><input type="Text" value="" name="icao24"> </td><td class="no small">[Mode-S address, default hex, or <input type="radio" value="D" name="t">dec <input type="radio" value="O" name="t">oct <input type="radio" value="B" name="t">bin]</td></tr>
  <tr><td class="no">&nbsp;  </td><td class="no"><input type="submit" value="submit" name="submit"> <input type="reset" value="reset" name="reset"> &nbsp; </td><td class="no small">... <a href="/nobots.php">no bots</a> ... &nbsp; </td></tr>
  </tbody></table>
  </fieldset>
  </form>

And a link to the Markup Validation Service.

And my javascript:

B4X:
var elements=document.forms[0].getElementsByTagName('fieldset')[0].getElementsByTagName('input');
var element;
for(var i=0, j=elements.length; i<j; i++){
   element=elements[i];
   switch(element.name){
     case 'reg':
       break;
     case 'selcal':
       break;
     case 'icao24':
       element.value='AD1041';
       console.log('icao24 set');
       break;
   }
}
//   document.createElement('form').submit.call(document.forms[0]);   //   doesn't work!

You can see that "stealing another form instance's submit() method" does not work.

Actually, i've been testing this using desktop Firefox browser, maybe the WebView (being a webkit based browser) will behave differently, the submit might work on a WebView.

I'll leave you to have a read and experiment.

Martin.
H
Well i've managed to create some javascript to set the ICAO24 address input element, the javascript can hopefully be updated to set other form elements too.

But trying to submit the form using javascript kept telling me that the form had no submit() method.
After a little research i found this page: http://stackoverflow.com/questions/833032/submit-is-not-a-function-in-javascript.

If a form's submit button is named 'submit' then the form's default javascript submit() method has been overwritten - the submit() method no longer exists.
The same logic applies to the reset button name and the javascript reset() method.


FYI this is the HTML form:

PHP:
<form action="/" method="post">
  <fieldset>
  <legend> Aircraft database &nbsp; </legend>
  <table width="100%" class="no">
  <tbody><tr><td class="no">Registration:  </td><td class="no"><input type="text" value="" name="reg"> </td><td class="no small">[e.g. D-AIHA or daiha]</td><td rowspan="4" class="no">&nbsp;</td>
  <td align="right" width="10%" rowspan="4" class="no">
&nbsp; </td></tr>
  <tr><td class="no">Selcal:  </td><td class="no"><input type="Text" value="" name="selcal"> </td><td class="no small">[e.g. AE-KQ or aekq]</td></tr>
  <tr><td class="no">ICAO24 address: </td><td class="no"><input type="Text" value="" name="icao24"> </td><td class="no small">[Mode-S address, default hex, or <input type="radio" value="D" name="t">dec <input type="radio" value="O" name="t">oct <input type="radio" value="B" name="t">bin]</td></tr>
  <tr><td class="no">&nbsp;  </td><td class="no"><input type="submit" value="submit" name="submit"> <input type="reset" value="reset" name="reset"> &nbsp; </td><td class="no small">... <a href="/nobots.php">no bots</a> ... &nbsp; </td></tr>
  </tbody></table>
  </fieldset>
  </form>

And a link to the Markup Validation Service.

And my javascript:

B4X:
var elements=document.forms[0].getElementsByTagName('fieldset')[0].getElementsByTagName('input');
var element;
for(var i=0, j=elements.length; i<j; i++){
   element=elements[i];
   switch(element.name){
     case 'reg':
       break;
     case 'selcal':
       break;
     case 'icao24':
       element.value='AD1041';
       console.log('icao24 set');
       break;
   }
}
//   document.createElement('form').submit.call(document.forms[0]);   //   doesn't work!

You can see that "stealing another form instance's submit() method" does not work.

Actually, i've been testing this using desktop Firefox browser, maybe the WebView (being a webkit based browser) will behave differently, the submit might work on a WebView.

I'll leave you to have a read and experiment.

Martin.
Hi Martin!
Thanks for your reply and suggestions, I've spent the last week reading and experimenting, I've managed to get your script to work in Firefox(using scatchpad) the last part almost works but not 100%. So I thought I would try the script in your webviewextra lib, but having search this forum and the web cannot find the way to include js, I'm going to have to ask for another clue!
Even though I cannot do what I want it's not been a waste of time I have learnt a little about javascript and HTML learning is always good. Thanks in advance Dave.
Thanks in advance Dave.
 
Upvote 0

warwound

Expert
Licensed User
Longtime User
Hi again.

Do you want to:
  • Inject javascript statements into the WebView, such as MyWebView.LoadUrl("javascript:alert('Hello World')")
  • Create a new <script> tag in the loaded web page, set the new <script> tag src atrribute and have an external javscript file loaded into the webapge?

Martin.
 
Upvote 0

davelew1s

Active Member
Licensed User
Longtime User
Thanks for the reply Martin. I want to use the script you wrote in post 5 in a WebView, the
'reg' 'selcal' 'icao' code will be in a B4a variable, I know how to get the results from the HTML page source but not how to run the script from a B4a app(if this is possible). if js can be run from within B4a that, I think would be easier for me. I have seen this done in 'Windows Script ' but the WS was a seperate app created in the main program and then run.
Does that help you know what I am trying to do?
Thanks Dave.
 
Upvote 0

warwound

Expert
Licensed User
Longtime User
OK, first thing i've done is to update the javascript:

PHP:
var elements = document.forms[0].getElementsByTagName('fieldset')[0].getElementsByTagName('input');
var element;
for (var i = 0, j = elements.length; i < j; i++) {
   element = elements[i];
   switch (element.name) {
     case 'reg':
       element.value = '%reg%';
       break;
     case 'selcal':
       element.value = '%selcal%';
       break;
     case 'icao24':
       element.value = '%icao24%';
       break;
   }
}

I've added placeholders for the various form field values %reg% etc.
Next i pasted the javascript into http://javascriptcompressor.com/, that removed all whitespace and line breaks and left me with this single line:

PHP:
var elements=document.forms[0].getElementsByTagName('fieldset')[0].getElementsByTagName('input');var element;for(var i=0,j=elements.length;i<j;i++){element=elements[i];switch(element.name){case'reg':element.value='%reg%';break;case'selcal':element.value='%selcal%';break;case'icao24':element.value='%icao24%';break}}

Now some b4a code:

B4X:
Sub Process_Globals

End Sub

Sub Globals
   Dim AirframesUrl As String="http://www.airframes.org/"
   Dim Icao24 As String="AD1041"
   Dim Reg As String=""
   Dim Selcal As String=""
   Dim WebView1 As WebView
   Dim WebViewExtras1 As WebViewExtras
End Sub

Sub Activity_Create(FirstTime As Boolean)
   WebView1.Initialize("WebView1")
   '   the WebChromeClient is used here so errors in the WebView are logged to the android log
   '   you don't need to add a WebChromeClient if you are not interested in seeing any error
   WebViewExtras1.addWebChromeClient(WebView1, "")
   Activity.AddView(WebView1, 0, 0, 100%x, 100%y)
   WebView1.LoadUrl(AirframesUrl)
End Sub

Sub Activity_Resume

End Sub

Sub Activity_Pause (UserClosed As Boolean)

End Sub

Sub WebView1_PageFinished (Url As String)
   Log("WebView1_PageFinished Url="&Url)
   If Url=AirframesUrl Then
     Dim Javascript As String="var elements=document.forms[0].getElementsByTagName('fieldset')[0].getElementsByTagName('input');var element;for(var i=0,j=elements.length;i<j;i++){element=elements[i];switch(element.name){case'reg':element.value='%reg%';break;case'selcal':element.value='%selcal%';break;case'icao24':element.value='%icao24%';break}}"
     Javascript=Javascript.Replace("%reg%", Reg)
     Javascript=Javascript.Replace("%selcal%", Selcal)
     Javascript=Javascript.Replace("%icao24%", Icao24)
     WebViewExtras1.executeJavascript(WebView1, Javascript)
     Log("The form should now be populated and ready to be submitted")
  
     '   ideally we'd add this javascript to the above Javascript String
     '   but it doesn't work so i've put it here for reference
     '   WebViewExtras1.executeJavascript(WebView1, "document.forms[0].submit()")
   End If
End Sub

It's a shame the javascript to call the form's submit() method does not work, i mentioned this in a previous post.
I'm not sure if there is a solution, maybe you could create a new form using javascript and this new form is exactly like the existing form except that it's submit() method works?

Martin.
 
Last edited:
Upvote 0

davelew1s

Active Member
Licensed User
Longtime User
Hi Martin! thanks for taking the time to help me I do appreciation it(and I have shown it ).
It all works great just what I wanted. I had to change this line:-
var elements = document.forms[0] to
var elements = document.forms[1] (I see 2 forms in the source code I assume 0 and 1)
this now works every time with '0' it only worked once.
this line
"document.forms[0].submit()"
almost works I changed forms[0] to forms[1] which as you said doesn't seem to do anything so in the I saved a copy of the page source code

changed this line " <form method="/">" to "<form action="https://www.paypal.com/cgi-bin/webscr" method="post">"

ran it and that works it goes to paypal so, I'm still working on this one.
I may have to settle for touching the submit button.

Thanks again Dave.
 
Upvote 0

warwound

Expert
Licensed User
Longtime User
The form action attribute should be the URL of the original web page:

PHP:
<form action="http://www.airframes.org/" method="post">

As you said you were trying to run the form as a local asset i put this web page together:

PHP:
<!DOCTYPE html>
<html>
   <head>
     <title>airframes</title>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     <script type="text/javascript">
       function setFormFieldValue(fieldName, fieldValue){
         document.forms.form1[fieldName].value=fieldValue;
       }
       function submitForm(){
         document.forms.form1.submit.focus();
         document.forms.form1.submit.click();
       }
     </script>
   </head>
   <body>
     <div>
       <form action="http://www.airframes.org/" id="form1" method="post">
         <table>
           <tr>
             <td>Registration:</td>
             <td><input type="text" name="reg" value=""></td>
           </tr>
           <tr>
             <td>Selcal:</td>
             <td><input type="Text" name="selcal" value=""></td>
           </tr>
           <tr>
             <td>ICAO24:</td>
             <td><input type="Text" name="icao24" value=""></td>
           </tr>
           <tr><td>Mode-S address, default hex, or:</td>
             <td><input type="radio" name="t" value ="D">dec</td>
           </tr>
           <tr>
             <td></td>
             <td><input type="radio" name="t" value ="O">oct</td>
           </tr>
           <tr>
             <td></td>
             <td><input type="radio" name="t" value ="B">bin</td>
           </tr>
           <tr>
             <td><input type="reset" name="reset" value="reset"></td>
             <td><input type="submit" name="submit" value="submit"></td>
           </tr>
         </table>
       </form>
     </div>
   </body>
</html>

I've recreated the original form giving it an id of 'form1' making it easier to reference from javascript.

The setFormFieldValue() function can be used to set form field values from b4a.
The submitForm() function is used to auto-submit the form.
You could remove these javascript functions and instead directly execute the equivalent javascript from b4a - it's up to you.

Tested and working code:

B4X:
Sub Process_Globals

End Sub

Sub Globals
   Dim AirframesUrl As String="file:///android_asset/airframes.html"
   Dim Icao24 As String="AD1041"
   Dim Reg As String=""
   Dim Selcal As String=""
   Dim WebView1 As WebView
   Dim WebViewExtras1 As WebViewExtras
End Sub

Sub Activity_Create(FirstTime As Boolean)
   WebView1.Initialize("WebView1")
   '   the WebChromeClient is used here so errors in the WebView are logged to the android log
   '   you don't need to add a WebChromeClient if you are not interested in seeing any error
   WebViewExtras1.addWebChromeClient(WebView1, "")
   Activity.AddView(WebView1, 0, 0, 100%x, 100%y)
   WebView1.LoadUrl(AirframesUrl)
End Sub

Sub Activity_Resume

End Sub

Sub Activity_Pause (UserClosed As Boolean)

End Sub

Sub WebView1_PageFinished (Url As String)
   Log("WebView1_PageFinished Url="&Url)
   If Url=AirframesUrl Then
     Dim Javascript As StringBuilder
     Javascript.Initialize
     Javascript.Append("setFormFieldValue('icao24', '")
     Javascript.append(Icao24)
     Javascript.append("');")
     Javascript.Append("submitForm();")
     WebViewExtras1.executeJavascript(WebView1, Javascript.ToString)
   End If
End Sub

Project attached and the HTML webpage is in the project's Files folder.

Martin.
 

Attachments

  • FormValues_20131024.zip
    6.8 KB · Views: 411
Upvote 0

davelew1s

Active Member
Licensed User
Longtime User
Hi Martin!
I have just been re-reading your last reply and noticed that my reply to it is not there(don't know why I posted 2 weeks ago), but your code works great exactly as I wanted , thanks again for all your help.
Dave.
 
Upvote 0
Top