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)
Related
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'.
I am writing a PHP/MySQL system. On one form I have a number of data entry elements including a check box (called 'conflict'). If someone checks this box then I want a section to appear that show a text box ('notes').
I have never used jquery before and so am trying a simple example which just doesn't work for me as, instead of seeing the text box only when I check the checkbox, I see it all of the time.
The code I am using is shown below and both jquery.js and dependson.js are in the same folder as the page.
Can anybody help please? (Sorry this is such a basic question!)
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="dependson.js"></script>
</head>
<script>
$('#myText').dependsOn({
// The selector for the depenency
'#myCheck': {
// The dependency qualifiers
enabled: true,
checked: true
}
});
</script>
<form id="myForm">
<label for="myCheck">Check Me</label>
<input type="checkbox" id="myCheck">
<label for="myText">Input</label>
<input type="text" id="myText" value="">
</form>
<body>
</body>
</html>
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'm having some trouble getting the typeahead working in Bootstrap, and I've boiled the problem down to this short example. (I'm new to Bootstrap.) When I type in the input, no typeahead suggestions appear. Any ideas why this isn't working?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<label for="primaryCustName">Name:</label>
<input type="text" data-provide="typeahead" data-source="['Bob','Jim','Sue']" class="form-control" id="primaryCustName">
</div>
</body>
</html>
The typeahead function was removed from Bootstrap in v3. According to #mdo it was dropped "in favor of folks using Twitter's typeahead. Twitter's typeahead has more features than the old bootstrap-typeahead.js and less bugs."
Your two options from here are:
Use a port of Bootstrap v2 Typeahead, you can find one here.
Use Twitter Typeahead which can be found here.
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.