Get Value of a Button on a website

MIT App Inventor Help
1

Hi,

is there any possibility to get the value of a website button (webview) and read it into the app?

Example:

A website has three buttons, each with different value

Value 1 is 111
Value 2 is 222
Value 3 is 333

When button 1 is clicked save value 1 to tinydb
When button 2 is clicked save value 2 to tinydb
When button 3 is clicked save value 3 to tinydb

1 Like
2

Is it your website / html ?

3

You should use some JavaScript.

1 Like
4

With the Web component

5

Well that's true only for static sites.
For dynamic sites you must use Webviewer component.
Or CustomWebView if you looking for some adventure. :nerd_face:

1 Like
6

Its html/php

7

but is it your code/website or someone elses. Did you write and host the website? If you have control of the code then you can add some html/javascript to help return the values you are after to your app. Otherwise you have to rely on how the original coder built the web page to guide on how to grab the data.

1 Like
8

Yes, its fully mine, i can add whatever i want

9

You need something like this to start off with:

<!DOCTYPE html>
<html>
<body>

<button onclick="myFunction1()">Click Button 1</button>
<button onclick="myFunction2()">Click Button 2</button>
<button onclick="myFunction3()">Click Button 3</button>

<p id="demo"></p>

<script>
function myFunction1() {
  document.getElementById("demo").innerHTML = "Button 1, Hello";
}
function myFunction2() {
  document.getElementById("demo").innerHTML = "Button 2, Greetings";
}
function myFunction3() {
  document.getElementById("demo").innerHTML = "Button 3, Goodbye";
}
</script>

</body>
</html>

then replace the setting of "demo" with the webviewstring:

<!DOCTYPE html>
<html>
<body>

<button onclick="myFunction1()">Click Button 1</button>
<button onclick="myFunction2()">Click Button 2</button>
<button onclick="myFunction3()">Click Button 3</button>

<p id="demo"></p>

<script>
function myFunction1() {
  window.AppInventor.setWebViewString("Button 1, Hello");
}
function myFunction2() {
 window.AppInventor.setWebViewString("Button 2, Greetings");
}
function myFunction3() {
window.AppInventor.setWebViewString("Button 3, Goodbye");}
</script>

</body>
</html>

Using the webviewstringChange block you can capture the value of the webviewstring and assign to your tinydb.

You may want to test if the page is being viewed in your app (and not on a computer/elsewhere) so that the webviewstring works (it is only an object in an AppInventor app)

1 Like
10

Thats it !!!

Thank you very much @TIMAI2 !!!!!

11

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.