webview control: how do post data from the app to a field on the webpage? - android-webview

i would like to have full control over the webview control. for instance, i would like to know if it is navigating or if it has completed navigating to the desired page. I would then wish to push same data from the app like the user name and password to a field on the page that was opened by the webview.
Could you point me to some examples or tutorials please?
Thank you!

Rely on the following post for javascript injection:
Inject javascript into WebChromeClient
Now just change the underlying javascript. It is important to understand that the Javascript directly is affected by the HTML, so if the HTML is changed, the Javascript (and probably also your app, require an update).
So in case you got the following HTML:
<form action="#" autocomplete="on">
<input type="text" name="username" placeholder="Username" />
<input type="password" name="password" placeholder="Password" />
<button type="submit">Login</button>
</form>
The javascript would look like the following, to
set the username
set the password
autologin by clicking login button
$('input[name=\"username\"]').val('%#'); // 1.
$('input[name=\"password\"]').val('%#'); // 2.
$('.login').click(); // 3.
Now just load this by the webview:
public void onPageFinished(WebView view, String url)
{
String loadPasswordJS = "$('input[name=\"username\"]').val('%#'); $('input[name=\"password\"]').val('%#'); $('.login').click();";
view.loadUrl(loadPasswordJS);
}

Related

Posting from form on Razor Page returns blank page

If I create a form using form tag helper the submit button triggers the OnPost event
<form method="post" asp-page="login">
However if I use
<form method="post" action="/auth/login">
The OnPost event is not fired.
And yes, asp-page="login" translates tp "/auth/login".
Even if I use asp-page="login" and copy the url from the console inspector and paste onto my cshtml page, a blank page is returned.
Any thoughts?
You can try to add #Html.AntiForgeryToken() into the second form.When you use the second form,it will lose a hidden input which contains the antiforgery token.
<form method="post" action="/auth/login">
#Html.AntiForgeryToken()
<input type="submit" value="submit" />
</form>

Form action forwards me to another page showing JSON (JavaScript)

I have a simple (mostly-working) submission form:
<form action="http://127.0.0.1:3000/books" method="POST" class="addBook">
<input type="text" placeholder="Title" name="title" required>
<input type="text" placeholder="ISBN" name="isbn" required>
<button id="submitBook" type="submit" onclick="addingBooks()">Submit</button>
</form>
My form properly adds the input values to my database and it then appears in the DOM when I go back and refresh the page.
I have applied an preventDefault() function in my JavaScript code for the 'addingBooks()' function to stop it from submitting twice, but I am still unable to stop it from forwarding to the action page after submission which only shows the JSON of the submitted data.
If you need more then please let me know.
To prevent the default action of an event you'll need an event object to call preventDefault on. Some browser do in fact have a global event object but that might not be reliable.
The simplest option would be to return false from the onlick event, not from a function you call in it
<button id="submitBook" type="submit" onclick="addingBooks();return false;">Submit</button>
another simple and better solution would be to make the button be a regular button instead of a submit button and remove the preventDefault from addingBooks.
<button id="submitBook" type="button" onclick="addingBooks()">Submit</button>
another and even better solution would be to not use the onclick attribute at all, use the addEventListener function
document.getElementById('submitBook').addEventListener("click", function(e){
e.preventDefault();
//other stuff
});

Load image from web page, captcha, fill textfield

Good evening. In my application I need to send a request to a web page that needs a captcha. The image link is a .php and the captcha change every time I refresh the page. So, if I try to download the image "by link", I have a different captcha. What is the solution? Any idea? Thank you in advance.
EDIT: Now I have to fill the input and send the request to submit. This is the html source of textfields I have to fill:
<label class="ins" for="targ">Targa del veicolo:</label>
<input id="targ" name="targa" value="" type="text" size="20" maxlength="8" tabindex="2" />
<label for="inCaptchaChars">Codice di sicurezza:</label> <input type="text" id="inCaptchaChars" name="inCaptchaChars" tabindex="1004" onblur="ShutMeDown()">
And this is about the submit button:
<input type="submit" name="procedi" value="Calcola importo" />
What I have to do to proceed? I have to use ASIHTTP?
This might be a little convoluted, but it should work alright:
Use a webView, load the page, when the page loaded call some javascript on the webview (stringByEvaluatingJavascript) that gets the image size and offset. Resize the WebView frame to that size, and scroll the content to that offset. Disable user interaction and show the webview.
To get the element offset you can use this answer
Simply call:
[[webView stringByEvaluatingJavascript:#"function getOffset(el) { ..... } getOffset( document.getElementById('yourElId') ).left;"] floatValue];
not that you must pass the whole code to this method
To submit the captcha:
As before, call
[webView stringByEvaluatingJavascript :#"document.getElementsByName('procedi')[0].value = 'your captcha';"];
then do the same to call .click() on the submit button or .submit() on the form

How to detect which submit button was clicked when the names are unknown?

I know how to detect which submit button was clicked when I know the name values of each of the buttons. But what if the names are dynamic or defined by another component?
For example, here I can simply check the POST data from this <form> for either alpha or bravo:
<form>
<input type="submit" name="alpha" value="Alpha">
<input type="submit" name="bravo" value="Bravo">
</form>
But that's only because I know I should be looking for those names.
Is there a best practice for handling this type of situation? (Perhaps by rendering an element <input type="hidden" name="submit-button-names" value="dynamic_name1|dynamic_name2|etc">.) I would like a solution that doesn't require JavaScript.
Presuming you have control over the JSP displaying these buttons, just prefix the button names with a string you can look for in the POSTed data. For example prepending "dynamicbutton_" to all of the names like this
<form>
<input type="submit" name="dynamicbutton_alpha" value="Alpha">
<input type="submit" name="dynamicbutton_bravo" value="Bravo">
</form>
Then in your Servlet, look for values with this prefix by calling ServletRequest.getAttributeNames()
You could write a custom tag to set the different inputs to your form based on a list of parameters you give to the tag.
You would end up with the HTML looking something like this:
<form method="POST" action="SelectColour.do">
<p>Select your favorite colour: </p>
<formTags:select name='colour' size='1' optionsList='${applicationScope.colourList}'/>
<input type="SUBMIT" value="Click here to submit">
</form>
Here's a decent guide to creating custom tags.

Using anchor link for form submission

Can i use an anchor tag to submit a form? In this code i am using a submit button which is standard but how to use a anchor tag <a href=Cart?removeId=${cartItem.productId>Remove</a>
I tried this, but the doGet() method is being called in the servlet. I want to call the doPost() method obviously. So could i use a better approach.
<c:forEach items="${lstCart}" var="cartItem" varStatus="count">
<form action="Cart" method=Post>
<tr height="40px">
<td>${count.count}</td>
<td>${cartItem.productName}</td>
<td>${cartItem.quantity}</td>
<td>${cartItem.unitPrice}</td>
<td>${cartItem.totalPrice}</td>
<td>
<input type="hidden" name="id" value="${cartItem.productId}" />
<input type=submit value="x"></td>
</tr>
</form>
</c:forEach>
You need to use JavaScript to make an anchor link do a post. You might use CSS to style your submit button and make it look more like a link, though.
Yep as #JB said you can post the form using JScript. One example that comes to my mind is below with struts, here you are actually passing the product id as a variable to JS method (I changed the names so it matches your example).
<a href="#" onclick="removeProduct(${cartItem.productId})">
Remove
</a>
You can then have JS method to be
function removeProduct(productId) {
document.forms["formname"].elements["productId"].value =
productId;
document.forms["formname"].submitTestPost.click();
}
This also assumes the following is defined in the page (so JS can set it) and the submit property (tag SubmitTag). I am not sure in your case the setup but perhaps you can draw some points.
<input type="hidden" name="productId"/>