App Inventor and JavaScript
How to fill out a form of a webpage and click a button using some JavaScriptIt 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.
This is the test page I'm using
A clock component is used to inject the values after the page has been completely loaded.
<!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>
Note: the values are already available on the webpage, you can see them after button click.
Tested successfully using a Nexus 5X running Android 7.
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.
App Inventor,
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!
or donate some mBTC to 
Address:
1Jd8kXLHu2Vkuhi15TWHiQm4uE9AGPYxi8
Thank you! Taifun
Download aia file for App Inventor
Back to top of page ...
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.
Site Content © 2010 - 2024 Pura Vida Apps using the
Foundation Framework.
icon from openclipart.org.