How to automate filling a simple form and clicking submit in JavaScript for a chrome extension
Question
Been trying to do this for days now, and have failed and have searched for examples but not found one yet that has helped.
I want to navigate through a web page by filling in the details and clicking submit programmatically.
the page is as follows:
<form method='post' action='login.php'>
<table>
<tr>
<td>Email Address: </td>
<td ><input type='Text' size='30' name='email'></td>
</tr><tr>
<td>Password: </td>
<td ><input type='password' size='30' name='password'></td>
</tr><tr>
<td colspan=2> </td>
</tr><tr>
<td> </td>
<td align='left'><input type='Submit' value='Log in'></td>
</tr>
<td colspan=2> </td>
<tr><td colspan=2><hr></td></tr>
</table>
</form>
I cant change the above existing web page, So want to include code in a chrome extension written in JavaScript to save me heaps of time at the moment I cant get passed the login page!
I have been a programmer in the distant past but am not fully versed with JavaScript syntax yet..
One of my problems is the form does not seem to have an ID.
Could anyone help?
Thanks for the help so far but I am still struggling so have added more detail. I have managed to do this submit in IE using VB in the past (from an Excel macro) using:
Sub PressSubmit(IE)
With IE.Document
Set elems = .getElementsByTagName("input")
For Each e In elems
If (e.getAttribute("value") = "Log in") Then
e.Click
Exit For
End If
Next e
IE.Document.all("email").Value = "me@email.address"
IE.Document.all("password").Value = "myPassword"
Call PressSubmit(IE)
But now I need to do the same on Chrome and I am struggling with JavaScript syntax which is new to me is there anyone that could give me a JavaScript version of this, or a better version, that I can learn from by example?
1 answers
solution1
0 2016-09-30 05:24:48
You can use document.querySelector() , Element.querySelector() , attribute selectors to set values at elements, call .click() on element to submit `
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form method='post' action='login.php'>
<table>
<tr>
<td>Email Address: </td>
<td>
<input type='Text' size='30' name='email'>
</td>
</tr>
<tr>
<td>Password: </td>
<td>
<input type='password' size='30' name='password'>
</td>
</tr>
<tr>
<td colspan=2> </td>
</tr>
<tr>
<td> </td>
<td align='left'>
<input type='submit' value='Log in'>
</td>
</tr>
<tr>
<td colspan=2> </td>
</tr>
<tr>
<td colspan=2>
<hr>
</td>
</tr>
</table>
</form>
<script>
var form = document.querySelector("form[action='login.php']");
var submit = form.querySelector("input[type='submit'][value='Log in']");
if (submit.length) {
form.querySelector("input[name='email']").value = "me@email.address";
form.querySelector("input[type='password']").value = "myPassword";
submit.click();
}
</script>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.