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.
Related
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 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 have a button test. Upon the click, the 2 labels, selectedZone and selectedLocation are set with 2 dummy values.
This works fine when the button is clicked for the first time. However after the first click, the page refreshes and the labels are not set.
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="language" content="en" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0-beta.1/jquery.mobile-1.3.0-beta.1.min.css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0-beta.1/jquery.mobile-1.3.0-beta.1.min.js"></script>
<script>
function test()
{
//alert("in test fn");
document.getElementById("selectedZone").innerHTML="ZONE TEST";
document.getElementById("selectedLocation").innerHTML="LOCATION TEST";
}
</script>
</head>
<body>
<button onclick="test();"> test </button>
<br/>
<br/>
<label style="font-color='yellow'"> ZONE </label>
<label id="selectedZone"></label>
<br/>
<br/>
<label style="font-color='yellow'"> LOCATION </label>
<label id="selectedLocation"></label>
</body>
</html>
P.S. justification for tagging jQuery Mobile: I actually have a popup. There is a button inside that popup. Upon click of that button, the same test() is to be called.
Is there any extra code to be written (Eg: Callback) for the labels to be set with the same values as selected in the dropdown of the popup?
You are missing the html opening tag before head
I'm having difficulty maintaining the disabled state of a check box when going back in the browser.
I've create these two sample pages to demonstrate my issue.
What do I need to do in order to ensure the checkbox remains disabled when returning to the previous page?
test1.html
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<form id="test" action="/">
System <input type="checkbox" id="chkSystem148" onclick="this.disabled = true;"/>
Go to test2
</form>
</body>
</html>
test2.html
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<input type="button" value="Go Back" onclick="history.back(-1); return false;" />
</body>
</html>
As mblase75 commented, use cookies. or other form of persistent storage, like localstorage. a hash might also work, don't remember on the spot if that adds to the history or if only in newer browsers that allow to push items to the history.