App Inventor and JavaScript


How to fill out a form of a webpage and click a button using some JavaScript

It hase been asked in the forum: How to automatically fill fields in a web page's form (when loaded in a webview)? and How to click a button? We can do it using some JavaScript, see the blocks below. Thank you Stefan for your snippet.

App Inventor Blocks

This is the test page I'm using
A clock component is used to inject the values after the page has been completely loaded.

HMTL Source of the example page

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="author" content="https://puravidaapps.com">
    <title>Test</title>
  </head>

  <body>
    <div>
      <form action="javascript:alert(document.getElementById('user').value + ' clicked the Submit button!');">
        <label for="user">user:</label><br>
        <input type="text" name="user" id="user" />
        <br><br>
        <label for="message">message:</label><br>
        <input type="text" name="message" id="message" />
        <br><br>
        <input type="submit" id="submit" value="Submit" />
      </form>
    </div>
  </body>
</html>

Screenshots

Note: the values are already available on the webpage, you can see them after button click.

Test

Tested successfully using a Nexus 5X running Android 7.

Questions and Answers

Q1: How can I push this button?

        <div class="buttonBar">
          <button type="submit" class="button" title="Send the message">
            <span class="caption">Send</span>
            <span class="ico">the message</span>
          </button>
          <p id="something"></p>
        </div>
      

A: The provided solution works only for elements, which have an id, here you can use the document.getElementById() method to get the element. In your case the button does not have an id (the button is the part in blue), therefore you have to use another method to identify the button, for example the method document.getElementsByClassName().
.

Q2: How can I get a multiline text? I tried \n, \r\n, <br> without success.
A: See this stackoverflow answer. Use <br> in your text as newline character and use the following modified inject procedure to replace <br> to get a new line
.

Q3: How can I check a radio button with no id?
A: See this stackoverflow question and answer.

Do you need help with your App Inventor project?

I can help you: for one hour I charge 25 USD.
Please contact me at info [at] puravidaapps [dot] com for details!
For questions about App Inventor, please use the App Inventor forum. Thank you.

Download


Developing and maintaining snippets, tutorials and extensions for App Inventor takes a lot of time.
I hope it saved some of your time. If yes, then you might consider to donate a small amount!

Donation amount:

or donate some mBTC to Bitcoin Address:
1Jd8kXLHu2Vkuhi15TWHiQm4uE9AGPYxi8
Bitcoin

Thank you! Taifun
 

Download aia file for App Inventor
Back to top of page ...

Creative Commons License
This work by Pura Vida Apps is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License
with attribution (name=Pura Vida Apps and link to the source site) required.


Home | Snippets | Tutorials | Extensions | News | Forums | Links | Search | Contact