Creating a simple HTML form for collecting user input, which is then displayed in a paragraph using both HTML and JavaScript when a button is clicked. The form takes the user's name through a text box: This is the original HTML code:
<!DOCTYPE html>
<html>
<body>
<p> Enter your name to win a game console! Winners will be announced in 4 days.</p>
Type your name here: <input id="thebox" type="text" name="value" value=""><br>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById("thebox").value;
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>
UPDATED FORM
<form name="albert" action="" method="POST">
<label for="firstname"> First Name </label>
<br /><br />
<input type="text" name="firstname" id="firstname" />
<input type="submit" name="sbumit" value="Submit" />
</form>
I am attempting to retrieve the value of the input box "thebox" in Android on button click. I have tried various methods involving injecting a JS file, but my lack of expertise in JS has led to unsuccessful attempts. Here is the content of my inject.js file:
document.getElementsByTagName('form')[0].onsubmit = function () {
var objAccount;
var str = '';
var inputs = document.getElementsByTagName('thebox');
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].name.toLowerCase() === 'thebox') {
objAccount = inputs[i];
}
}
if(objAccount != null) {
str += objAccount.value;
}
window.AndroidInterface.processHTML(str);
return true;
};
Following the instructions, I attempted to modify my MainActivity in Android with the following code:
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
WebView webView = new WebView(this);
this.setContentView(webView);
// enable javascript
WebSettings webSettings = webView.getSettings();
webSettings.setJavaScriptEnabled(true);
webView.addJavascriptInterface(new JavaScriptInterface(), "AndroidInterface");
// catch events
webView.setWebViewClient(new WebViewClient(){
@Override
public void onPageFinished(WebView view, String url) {
try {
view.loadUrl("javascript:" + buildInjection());
} catch (IOException e) {
e.printStackTrace();
}
}
});
webView.loadUrl("http://someurl.com");
}
A nested class created inside the MainActivity:
class JavaScriptInterface {
@JavascriptInterface
public void processHTML(String formData) {
Log.d("AWESOME_TAG", "form data: " + formData);
}
}
The method responsible for injecting the code:
private String buildInjection() throws IOException {
StringBuilder buf = new StringBuilder();
InputStream inject = getAssets().open("inject.js");// file from assets
BufferedReader in = new BufferedReader(new InputStreamReader(inject, "UTF-8"));
String str;
while ((str = in.readLine()) != null) {
buf.append(str);
}
in.close();
return buf.toString();
}
I am looking to extract values from an HTML form shown in a WebView on Android. Is this achievable? If so, how can I do it and in which variable will the value be stored? Your explanation would be greatly appreciated. Thank you.