I'm trying to build a program with Javascript that I can use to automatically log into websites. The website I'm testing it on is ATT, as I'm trying to log in and look at my cell phone bill. when I run the program below, It takes me to an ATT page that says they are currently performing maintenance, and to try again later. I know this to be false as I was able to manually sign in just a few seconds later. I don't have a lot of experience with javascript, and much of this code has been pulled from other online sources, so I'm unsure if I'm missing something that needs to be included or it's simply a fact that ATT uses some other login type that this code does not work with. I tried looking at the pages source code, and I didn't see a reference to any type of form, not sure if that matters for this particular situation.
Here is the code:
<HTML>
<HEAD>
<TITLE>Login</TITLE>
<script>
<!--
function login() {
document.form1.action="https://www.att.com/";
document.form1.submit();
}
//-->
</script>
</HEAD>
<BODY onLoad="login()">
<FORM NAME="form1" id=form1 METHOD="POST">
<INPUT TYPE="hidden" NAME="userid" VALUE="Username">
<INPUT TYPE="hidden" NAME="password" VALUE="Password">
<input type="hidden" name="reqURI" value="/rhwc/smu">
</FORM>
</BODY>
</HTML>
You can do this I've tried it and it works:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=10" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
<meta http-equiv="pragma" content="no-cache" />
<title>Test</title>
</head>
<body>
<form method="post" action="https://www.att.com/olam/loginAction.olamexecute">
Username:<input type="text" name="wireless_num"/>
Password:<input type="password" name="pass"/>
<input type="hidden" value="YES" name="rememberme"/>
<input type="hidden" value="dotComLogin" name="actionEvent"/>
<input type="submit" value="Submit"/>
</form>
<script>
</script>
</body>
</html>
Wrong names
The names of your <input> elements don't match the names on the ATT site. The server won't expect the names you have, and won't process data in those fields.
Wrong action (probably)
I somehow doubt that the server-side script that handles logins on the ATT site is on the homepage. More likely it's on /login or /log-in, etc. If you POST the form to the wrong script, then no data will get processed from it and you don't get logged in.
The id and name attributes are not the same. It is the name attribute of the input field that is going to be send together with the value you type.
If you inspect the User ID field you can see the following HTML:
<input id="userid" class="text" name="wireless_num" ...>
In your code, you are submitting the username under the name 'userid'. However, it should be submitted under 'wireless_num'.
Related
After a number input submission I want to go from the index.html file to an other html file or something like that.
Can somebody help me?
That's the code i wrote:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="styles.css">
<link rel="icon" href="nick.jpg">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Bet</h1>
<form action="cool.html">
<label class="amountMoney" for="amountMoney">Input the amount of money you want. The money will be converted in dollars</label>
<h3>The value can't be more than 100 or less than 10</h3>
<input id="amountMoney" type="number" placeholder="Amount of money" min="10" max="100" required>
<button type="submit">Submit</button>
</form>
<script src="script.js" defer></script>
</body>
</html>
Btw I'm linking a different css file in cool.html
If you’re just using html (no scripting language) you need to do it this way, using the method and action parameters at the top of your form:
<form method="post" action="cool.html">
Or you can redirect to a new page after processing the form server side, if that applies to your case scenario.
How to send an HTML form containing an EasyUi DateBox?
The form cannot be submitted. Nothing happens when clicked on the Submit button. When I comment out the DateBox tag, the form is submitted OK.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DateBox example</title>
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h2>DateBox example</h2>
<form action="showDate.jsp">
<div>
<label for="item">Item name:</label>
<input type="text" id="item" name="itemName" required="required">
</div>
<br>
<div>
<label for="sdate">Shipment date:</label>
<input type="text" class="easyui-datebox" id="sdate"
name="shipmentDate" required="required">
</div>
<input type="submit">
</form>
</body>
</html>
This is the HTML form.
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>The date</title>
</head>
<body>
<p>Item name: <%= request.getParameter("itemName")%> </p>
<p>Shipment date: <%= request.getParameter("shipmentDate")%> </p>
</body>
</html>
This is the JSP page, which should receive the request parameters.
It looks like you're getting this issue because the EasyUI datebox control is hiding your textbox and inserting it's own textbox in the DOM. EasyUI isn't honoring the HTML5 required attribute on the newly added textbox. To add insult to injury, since your original textbox [now hidden] still has the required attribute, when Chrome attempts to validate it, validation fails and Chrome attempts to put focus back in your original textbox. Since your's is now hidden and can't receive focus, Chrome doesn't know what to do and stops the process at that point.
To get around this, my solution (if you want to continue to use HTML form validation) is to use EasyUI's api to initialize the EasyUI datebox control by making the markup as bare-bones as possible:
HTML:
<input type="text" id="sdate">
And initialize the EasyUI datebox and add the required attribute directly to the newly created EasyUI datebox (with a slightly reasonable date format pattern).
JavaScript:
$(document).ready(function () {
$('#sdate').datebox(); // Initialize the easyui datebox
// Make the easyui datebox honor HTML5 validation
$('#sdate').datebox('textbox').attr({
'required': 'true',
'pattern': '(?:(?:0[1-9]|1[0-2])[\/\\-. ]?(?:0[1-9]|[12][0-9])|(?:(?:0[13-9]|1[0-2])[\/\\-. ]?30)|(?:(?:0[13578]|1[02])[\/\\-. ]?31))[\/\\-. ]?(?:19|20)[0-9]{2}'
});
});
Working Codepen
Personally, I'm not a huge fan of this solution (or of EasyUI controls for that matter), because it is a work-around for what I perceive as deficiencies in the EasyUI controls, but this should work in a pinch for HTML5 validation.
Aside: The EasyUI datebox does have it's own required option that may be passed during initialization, but it's for working with EasyUI's custom validator and not HTML5 validation, as of the writing of this post.
Sources:
EasyUI Datebox Documentation
EasyUI Combo Documentation (Parent control of Datebox)
Stackoverflow: Various contributors (especially Ankit Sharma's answer)
I am learning Javascript. Please point me in the right direction! Also if you think my code is not efficient that is ok to tell me to.
I have this home page that takes the user's full name and I want to pass into the javascript and save it as a variable. The javascript returns an url back to the first page and then it gets redirected.
Here is the HTML I have:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test</title>
<link rel="stylesheet" type="text/css" href="css/indexstyle.css" />
</head>
<body>
<form name="form1" method="GET" action="create.js">
<p>Please type your name:</p>
<input type="text" id="username" class="textbox" name="username" required = "" placeholder="Type Your First and Last Name" autofocus><br>
<input type="submit" value="Join" class="orangebutton"><br>
</form>
</body>
</html>
The javascript has a variable that is named username = "".
I appreciate any help and direction pointing.
I try to get the value of the at the bottom pasted html code who stands on the first html page. I have another html page, which should be generated with the button "onclick". More precisely the code should create buttons in the next page.
Case1: radio-choice-1 is selected - it should create 4 buttons.
Case2: radio-choice-2 is selected - it should create 4 or 9 buttons.
Case3: radio-choice-3 is selected - it should create 9 or 16 buttons.
Case4: radio-choice-4 is selected - it should create 16 buttons.
I dont know how to get the value of the selected radio buttons then generate buttons on another page.
I actually have a bit of script(game.js):
$(document).ready(function(){
$('#radio-button-value').click(function(){
$("input[name='radio-button-gruppe']:checked".val());
});
});
first html page
<html>
<head>
<meta charset="utf-8" />
<title>newgame</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
<!-- Einstellungen zur Defintion als WebApp -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script src="game.js"></script>
</head>
<body>
<div data-role="main" class="ui-content">
<form>
<fieldset data-role="controlgroup">
<legend>Choose a mode:</legend>
<input type="radio" name="radio-choice" id="radio-choice-1" value="choice-1" checked="checked">
<label for="radio-choice-1">easy</label>
<input type="radio" name="radio-choice" id="radio-choice-2" value="choice-2">
<label for="radio-choice-2">medium</label>
<input type="radio" name="radio-choice" id="radio-choice-3" value="choice-3">
<label for="radio-choice-3">difficult</label>
<input type="radio" name="radio-choice" id="radio-choice-4" value="choice-4">
<label for="radio-choice-4">hard</label>
</fieldset>
<input type="button" id="radio-button-value" name="game" value="create game" class="button" data-theme="b"/>
</form>
</div>
<div data-role="footer">
</div>
</div>
</body>
</html>
I'm not sure what sort of solution you're looking for. But if you don't want to use something more deeply rooted, like the $_SESSION variable in php, you're probably looking for something like cookies. Here's a great page on cookies.
Also check out this tutorial from htmlgoodies.com on variable passing with javascript for some other ideas.
If you're okay with cookies, you can pretty much use what you already have, just clean up the jquery a little.
$(document).ready(function(){
$('#radio-button-value').click(function(){
var difficulty = $("input[name='radio-choice']:checked").val();
document.cookie = "gameDifficulty=" + difficulty + ";path=/";
});
});
See fiddle
hey there.
is there a way that if a user selects a radio button the rest of the form will fill out automatically?
most of the form is drop down menu's if that makes a difference.
thx
You could do this by making a function that fills out the form fields for you. Then setting that function to the onclick of the radio button. I have put together a quick and dirty example that does just this for you.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<script language="javascript">
function radioClick()
{
document.getElementById("txtField1").value = "Whatever you want!";
}
</script>
<body>
<input name="" type="radio" value="" onclick="radioClick()" />
<input id="txtField1"name="" type="text" />
</body>
</html>
Not working in Firefox! Just noticed that sorry, I'll figure it out in a sec!
Hey guys. Sorry I forgot that innerHtml was not supported by firefox. You can simply switch it to .value and it works in both.