All, we have an RFID application that is web based. We are trying to make display boards across our facility that shows information. I'm trying to make the webpage auto-login but I'm not having any luck. I've tried enumerating all tags/elements on the page but I'm not having any luck.
Access violation with the line below (because the element j_username isn't found, but it's clearly in the html snippet. I know I'm missing something simple. Can someone please help?
WebBrowser1.OleObject.Document.GetElementByID('j_username').
setAttribute('value', 'dempseyw');
here is the login code from the page I am trying to automate.
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<title>MobileView</title>
<style type="text/css">
.loginTextCss{
padding:0 0 0 22;
}
#javax_faces_developmentstage_messages{
display: none;
}
</style></head><body onload="document.getElementById('j_username').focus()" style="margin:0px; overflow: hidden;">
<div style="display:none" id="notLogedInMarker"></div>
<form action="http://dmh-rfidweb/asset-manager-web/j_spring_security_check" method="post">
<table border="0" align="center" height="100%" width="687" cellpadding="0" cellspacing="0">
<tr>
<td height="50%" valign="top">
<img src="http://dmh-rfidweb/asset-manager-web/images/spacer.gif" border="0" width="1" height="1" />
</td>
</tr>
<tr>
<td class="directionCss"><span style="font-size:12px; font-weight: bold; color: #0000FF; font-family:arial"></span>
</td>
</tr>
<tr>
<td height="427" valign="top" background="http://dmh-rfidweb/asset-manager-web/images/branding/healthcare/bg_login.jpg" style="background-repeat:no-repeat; color:#000000; font-family:arial, Helvetica, sans-serif; font-size:14px;">
<div style="width:200px;height:150px;float:right;">
<table border="0" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td style="padding:3 6 0 22;" valign="bottom">
<br clear="all" />
<a href="https://www.stanleyhealthcare.com/" target="new"><img src="http://dmh-rfidweb/asset-manager-web/images/branding/healthcare/logo_mobileview.gif" style="border:1; hspace:2;" />
</a>
</td>
</tr>
</table>
</div>
<br clear="all" />
<div style="height:50; padding:0 0 0 15;">
<div style="height:10;"></div>
</div>
<div class="loginTextCss"><label for="j_username">User Name:</label>
<br /><input id="j_username" name="j_username" type="text" value="" style="font-size:16px; width:170px;" />
<br />
<br /><label for="j_password">Password:</label>
<br /><input type="password" id="j_password" name="j_password" value="" style="font-size:16px; width:170px;" />
<br />
<div style="font-size:11;">
<input id="rememberMe" type="checkbox" name="_spring_security_remember_me" title="Remember me on this computer" checked="Checked" />
<label for="rememberMe" title="Remember me on this computer">Remember me on this computer</label>
</div>
<div style="padding-left:112px;padding-top:20;">
<input type="submit" value="Log In" style="padding:3 10 3 10;color:#000000; font-family:arial, Helvetica, sans-serif;font-size:14px;" />
</div>
</div>
</td>
</tr>
<tr>
<td height="50%" valign="top">
<img src="http://dmh-rfidweb/asset-manager-web/images/spacer.gif" border="0" width="1" height="1" />
</td>
</tr>
</table>
</form></body>
</html>
You have to locate the form, then you can locate and set the value of the element within the form.
Navigate to the webpage with TWebBrowser, then try the following. Note, this does not consider the possibility of frames.
function GetFormByNumber(document: IHTMLDocument2; formNumber: integer)
: IHTMLFormElement;
var
Forms: IHTMLElementCollection;
begin
Forms := document.Forms as IHTMLElementCollection;
if formNumber < Forms.Length then
Result := Forms.item(formNumber, '') as IHTMLFormElement
else
Result := nil;
end;
procedure SetFieldValue(theForm: IHTMLFormElement; const fieldName: string;
const newValue: string);
var
field: IHTMLElement;
inputField: IHTMLInputElement;
selectField: IHTMLSelectElement;
textField: IHTMLTextAreaElement;
begin
field := theForm.item(fieldName, '') as IHTMLElement;
if Assigned(field) then
begin
if field.tagName = 'INPUT' then
begin
inputField := field as IHTMLInputElement;
inputField.Value := newValue;
end
else if field.tagName = 'SELECT' then
begin
selectField := field as IHTMLSelectElement;
selectField.Value := newValue;
end
else if field.tagName = 'TEXTAREA' then
begin
textField := field as IHTMLTextAreaElement;
textField.Value := newValue;
end;
end
else
raise Exception.Create('HTML Field not found: ' + fieldName);
end;
procedure TForm1.Button2Click(Sender: TObject);
var
doc: IHTMLDocument2;
theForm: IHTMLFormElement;
begin
doc := WebBrowser.Document as IHTMLDocument2;
theForm := GetFormByNumber(doc, 0);
SetFieldValue(theForm,'j_username','dempseyw');
SetFieldValue(theForm,'j_password','pw');
theForm.submit;
end;
Related
I cant get any of the buttons using onclick to recognise the functions. I get an error "cant find variable". Im very new to all this and at a loss. It doesn't matter which button I click I have the same issues with all of them.
in the below code,
I click on <button onclick="show_admin()">Admin</button> which should call function show_admin().. What am I doing wrong please.
Inspector output
const char main_page[] PROGMEM = R"=====(
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset='UTF-8'">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="refresh" content="500; url=/">
<title>System Settings</title>
<body onload="show_admin()">
<div class="banner">
<h1>X Controller</h1>
</div>
<div class="split left">
<div class="centered">
These are my button
<button onclick="show_admin()">Admin</button>
<br/>
<button onclick="show_wifi()">WIFI</button>
<br/>
<button onclick="show_tags()">Tags</button>
<br/>
</div>
</div>
<div class="split right">
<div class="centered" id="showdata">
</div>
</div>
</body>
<script>
These are my functions
function show_admin() {var table_data = <h1>Admin Settings</h1><br/>%s<br/>
<form action="/ADMINSetting" method="POST">
<table><tr>
<td> User Name </td> <td> <input type="String" name="UserName" placeholder="%s"></td>
</tr><tr>
<td> Password </td> <td> <input type="String" name="UserPass" placeholder="%s">
</td></tr></table>
<input type="submit" value="Update Admin Details">
</form>
document.getElementById("showdata").innerHTML = table_data
}
function show_wifi() { var table_data = <h1>WIFI Settings</h1><br/>%s<br/>
<form action="/WIFISetting" method="POST">
<table>
<tr>
<td> SSID Network </td> <td> <input type="String" name="WifiSsid" placeholder="%s"></td>
</tr><tr>
<td> SSID Password </td> <td> <input type="String" name="SsidPass" placeholder="%s"></td>
</tr>
</table>
<input type="submit" value="Update Wifi Details">
</form>
document.getElementById("showdata").innerHTML = table_data
}
function show_tags() { let table_data = <h1>Tag Settings</h1><br/>%s<br/>
<form action="/DEVICESetting" method="POST">
<table>
<tr>
<td> Access Tag 1 </td> <td> <input type="String" name="TAG1" placeholder="%s"></td>
</tr>
<tr>
<td> Access Tag 2 </td> <td> <input type="String" name="TAG2" placeholder="%s"></td>
</tr>
<tr>
<td> Cleaner Tag 1 </td> <td> <input type="String" name="CTAG1" placeholder="%s"></td>
</tr>
</table>
<input type="submit" value="Update BLE Tag Details">
</form>
document.getElementById("showdata").innerHTML = table_data
}
</script>
</body>
</html>
)=====";
I have tried rearranging the function and moving its position. with no luck
Unless you have JSX installed, You can't just stick HTML elements into JavaScript like that. You will need to use quotes around all the HTML.
It looks like you're reusing the same tags anyway, why not stick all those tags into the HTML portion and update the values in Javascript? You can also update the CSS through JavaScript and set display:none if you want to hide an unused element.
I added the below to the html section
<div class="split right">
<div class="centered" id="showdata">
<form id="adminForm">
<table>
<tr>
<td> User Name </td>
<td>
<input type="String" name="UserName" placeholder="%s">
</td>
</tr>
<tr>
<td> Password </td>
<td>
<input type="String" name="UserPass" placeholder="%s">
</td>
</tr>
</table>
<input type="submit" value="Update Admin Details">
</form>
and the following to the script section
function admin(){
document.getElementById("wifiForm").style.display="none";
document.getElementById("tagForm").style.display="none";
document.getElementById("adminForm").style.display="block";
}
Top.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Top Page</title>
</head>
<body bgcolor="yellow">
<table border="0" width="100%">
<tr>
<td align="center" bgcolor="white">
<img src="./Img/Logo.jpg" alt="logo" />
</td>
<td align="center" bgcolor="white">
<h1 style="color: blue">Web Client Development</h1>
</td>
<td bgcolor="white" style="width: 500px; text-align: center">
<p>
<!-- <a href="./Forms/Pages/inputform.html" target="Content_Frame"
>User <br />
Logon</a
> -->
<a href="./Forms/Pages/userLogonForm.html" target=""
>User <br />
Logon</a
>
</p>
</td>
</tr>
</table>
</body>
</html>
In that 'user logon' area I want to open a UserLogon.html which goes like
UserLogon.html
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>User Logon Form</title>
<script type="text/javascript">
function submitCredentials() {
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
alert("Username: " + username + "\nPassword: " + password);
}
function resetCredentials() {
document.getElementById("userLogonForm").reset();
}
</script>
</head>
<body>
<form action="" id="userLogonForm">
<label for="username">Username : </label>
<input
type="text"
id="username"
name="username"
placeholder="Enter Username"
/>
<br /><br />
<label for="password">Password : </label>
<input
type="password"
id="password"
name="password"
placeholder="Enter Password"
/><br /><br />
<button type="button" onclick="submitCredentials()">Submit</button>
<button
type="button"
onclick="resetCredentials()"
style="margin-left: 100px"
>
Reset
</button>
</form>
</body>
</html>
My Top.html has three sections of <td> , One has a logo image, second one has a normal heading, the third is where I want to display my form which asks for username and password (UserLogon.html)
The problem is when I click on User Logon area it expands my UserLogon.html page for the entire area (I guess all three <td>), whereas I want to display that UserLogon.html form in my third <td> tag only. How do I keep the size fixed to that particular <td> only
Note: For the whole website I am using framesets
I have made code for auto generated text boxes in an HTML growing table. I want to save values from these text boxes to a mysql database using netbeans but I don't know how I get the ids of each text box while they are auto generating..
My code is here..please help me if there is any solution for this problem..
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
<meta name="dcterms.created" content="Tue, 24 Mar 2015 06:41:28 GMT">
<meta name="description" content="">
<meta name="keywords" content="">
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
var rowCount = 1;
function addMoreRows(frm) {
rowCount ++;
var recRow = '<p id="rowCount'+rowCount+'"><tr><td><input name="name" type="text" size="17%" maxlength="120" /></td><td><input name="email" type="text" maxlength="120" style="margin: 4px 5px 0 5px;"/></td><td><input name="mobile" type="text" maxlength="120" style="margin: 4px 10px 0 0px;"/></td></tr> <img src="./image/close.png" /></p>';
jQuery('#addedRows').append(recRow);
}
function removeRow(removeNum) {
jQuery('#rowCount'+removeNum).remove();
}
</script>
</head>
<body>
<table rules="all" style="background:#fff;">
<tr>
<td style="font-size:14px;" >Name</td>
<td style="font-size:14px;">Email</td>
<td style="font-size:14px;">Mobile</td>
<td><span style="font:normal 12px agency, arial; color:blue; text-decoration:underline; cursor:pointer;" onclick="addMoreRows(this.form);">
<img style=" padding-left: 12px;" src="./image/add.png" />
</span>
</td>
</tr>
<form action="" method="POST">
<tr id="rowId">
<td><input type="text" name="name" size="17%"/></td>
<td><input type="text" name="email" /></td>
<td><input type="text" name="mobile" /></td>
</form>
</table>
<div id="addedRows"></div>
</td>
</tr>
<td><input type="submit"></td>
</table>
</body>
</html>
I'm trying to tamper with my html table settings to set borders but I think my syntax is wrong. I've looked around online and tried multiple things with no success. Any suggestions?
For example, this code is applied to the first table but does not appear correctly on page.
<table BORDER="30" CELLPADDING="10" CELLSPACING="3" BORDERCOLOR="00FF00" width='80%' style="margin: 0 auto;">
</table>
HTML code is applied here: http://macrorevolution.com/calculators/bmr/
The only table settings that seem to work are "width='80%' style="margin: 0 auto;""
<?php
$answer = "";
$agev = "";
$feetv = "";
$inchesv = "";
$weightv = "";
$sex = "";
if(isset($_POST['agev']) && isset($_POST['feetv']) && isset($_POST['inchesv']) && isset($_POST['weightv']) && isset($_POST['sex'])) {
$agev = $_POST['agev'];
$feetv = $_POST['feetv'];
$inchesv = $_POST['inchesv'];
$weightv = $_POST['weightv'];
$sex = $_POST['sex'];
$totalheightv = $inchesv + ($feetv*12);
$heightcm = $totalheightv*2.54;
$weightkg = $weightv/2.2;
if($sex=='male') $answer = 66.47 + (13.75*$weightkg) + (5*$heightcm) - (6.75*$agev);
if($sex=='female') $answer = 665.09 + (9.56*$weightkg) + (1.84*$heightcm) - (4.67*$agev);
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Basal Metabolic Rate Calculator</title>
</head>
<body>
<div class="box pt20">
<table BORDER="30" CELLPADDING="10" CELLSPACING="3" BORDERCOLOR="00FF00" width='80%' style="margin: 0 auto;">
<td colspan="4">
<h4 style="background: #99FF99;">
<strong>BMR = Basal Metabolic Rate</strong> (similar to RMR = Resting Metabolic Rate). Your BMR represents the number of calories your body burns at rest. Regular routine of cardiovascular exercise can increase your BMR, improving your health and fitness when your body's ability to burn energy gradually slows down.
</h4>
</td>
</table>
<form method='post' action=''>
<table border='5' width='80%' font-family:Georgia; font-size:1; class="table" style="margin: 0 auto;" bgcolor="FFFFFF">
<tr class="calcheading">
<td colspan="2"><font size="10">MacroRevolution BMR Calculator</font></td>
</tr>
<tr class="calcrow">
<td>Age:</td>
<td><input type='text' name='agev' value="<?php echo $agev; ?>"/>Years</td>
</tr>
<tr class="calcrow2">
<td>Height:</td>
<td align="justify"><input type='text' name='feetv' value="<?php echo $feetv; ?>"/>Ft<input type='text' name='inchesv' value="<?php echo $inchesv; ?>"/>In</td>
</tr>
<tr class="calcrow">
<td>Weight:</td>
<td align="left"><input type='text' name='weightv' value="<?php echo $weightv; ?>"/>lbs</td>
</tr>
<tr class="gender">
<td colspan="2"><input type='radio' name='sex' value='male'>Male
<input type='radio' name='sex' value='female'>Female</td>
</tr>
<tr class="submit">
<td colspan="2"><input type='submit' class="button highlight small" value='Calculate'/></td>
</tr>
<tr class="calcrow">
<td colspan="2">Your BMR is <span style="background-color: #00CC33"><?php echo $answer?></span></td>
</tr>
</table>
</form>
<table border='0' width='80%' class="table" align="center" style="margin: 0 auto;">
<td colspan="4">
<h2 style="background: #99FF66;">Formula for BMR</h2>
<h4 style="background: #99FF66;">
If you want to manually calculate your BMR, use the (Harris-Benedict formula) <br> below. <br><br>
Men: BMR=66.47+ (13.75 x W) + (5.0 x H) - (6.75 x A) <br>
Women: BMR=665.09 + (9.56 x W) + (1.84 x H) - (4.67 x A) <br><br>
W = Weight in kilograms (lbs/2.2)<br>
H = Height in centimeters (inches x 2.54)<br>
A = Age in years
</h4>
</td>
</table>
</div>
</body>
</html>
<!-- ///////////////////////////////////////////////////////////////////////////////////////////-->
Avoid HTML attributes like border="30" cellpadding="10" cellspacing="3" bordercolor="#00ff00" and use CSS instead:
<style>
table {
border: 30px solid #00ff00;
}
</style>
Even better, move the styles to another file
<link rel="stylesheet" type="text/css" href="stylesheet.css">
I have my margin: 0 auto looking good in Chrome but it's not working in IE9. In IE9 the entire site is static against left of the screen. I added a simple reset css statement based on some suggestions but they are not helping.
In main.css:
html, body {
padding:0;
margin: 0;
}
body {
background-color: gray;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
}
.wrapper {
width: 1009px;
background-color:white;
border-style:solid;
border-color:#002663;
padding:5px;
margin: 0 auto;
margin-top:25px;
}
Updated: What the css looks like in IE's dev tools panel:
Can anyone see where I can make an improvement for IE? Thanks.
Update: actual html as requested:
<html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
<title>Search Page</title>
<!-- Hostname: VDDP03A-FAEF32A -->
<link rel="stylesheet" href="/CSA/styles/main.css" type="text/css" />
<link rel="stylesheet" href="/CSA/styles/smoothness/jquery-ui-1.8.10.custom.css" type="text/css" />
<script type="text/javascript" src="/CSA/scripts/jquery-1.10.2.min.js" ></script>
<script type="text/javascript" src="/CSA/scripts/jquery-ui-1.10.3.js" ></script>
<script type="text/javascript" src="/CSA/scripts/jquery.validate.js" ></script>
</head>
<body >
<div class="wrapper">
<table width="100%" border="0" cellpadding="0" style="margin:0;">
<tr>
<td>
<img src="/CSA/images/logo.jpg" width="300" align="top-left" border="0" style="margin:0;" alt="myLogo">
</td>
<td width="50%">
<br />
<h2 style="font-weight:normal;align:right;color:#002663;margin:0;">Title</h2>
</td>
<td>
</td>
</tr>
</table>
<hr color="#002663" style="margin:0;">
<form name="form1" method="post" action="/CSA/web/CSA.do" style="margin:0;">
<input type="hidden" name="searchType" value="myValue">
<table width="1000px" border="0" cellpadding="0" style="margin:0;">
<col width="285px" />
<col width="300px" />
<col width="278px" />
<col width="137px" />
<tr style="margin:0;">
<td colspan="4">
<h4 style="color:#002663;margin-bottom:10;margin-top:3;">Search 1:</h4>
</tr>
<tr style="margin:0;">
<td style=" padding-left:100px; padding-bottom:0px; width:185px;" >
options :
<input type="radio" name="options" value="OP1" style="border:none;">
OP1
<input type="radio" name="options" value="OP2" style="border:none;">
OP2
</td>
<td>
Search Criteria : <input type="text" name="criteria" maxlength="20" size="20" tabindex="1" value="" id="searchField1">
</td>
<td style="min-width: 268px;">
Date :
<input type="text" name="lossDate" maxlength="10" size="11" value="07/19/2013" id="datepicker">
</td>
<td style="min-width: 138px;">
<input type="submit" name="submit" tabindex="3" value="Search" id="submit" style="margin-top:5;">
<input type="reset" name="reset" tabindex="4" value="Reset" id="reset" style="margin-top:5;">
</td>
</tr>
</table>
</form>
<!-- Three more forms similar to the above -->
<hr color="#b0b1b2" style="margin:3;">
<table table width="1000px" border="0" cellpadding="0">
<tr style="margin:0;">
<td style="margin:0;">
<h4 style="color:#002663" style="margin-bottom:8;margin-top:3;">Search Results:</h4>
</td>
</tr>
<div styleId="errors" style="margin:0;">
</div>
</table>
</div>
</body>
</html>
<html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
The Doctype has to be the first thing in the document. It goes before the <html> start tag.
Putting it where you have it is both invalid and triggering of quirks mode (and in quirks mode, all sorts of things break).
Try adding margin:0 auto on your body tag
body {
/* background-position: 5px 5px;
background-repeat: no-repeat; */
background-color: gray;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
width: 1010px;
margin: 0 auto; /* <--*/
}
Try
body, html {
padding: 0;
margin: 0;
}
Look up reset css when you get a chance http://www.cssreset.com/
Update:
I would suggest you take the width off of the body tag and put it in a div.
http://jsfiddle.net/KMDuw/2/
My fiddle shows a fixed width div using auto margin. If you take off the body css, you will see some space.
Can you also post your html please