<HTML>
<HEAD>
<title>Login</title>
<script type="text/javascript" src="http://script.auction.co.kr/common/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(":input[name='txtPassword']").blur(function(e){
$(this).css("background-color","white");
});
$(":input[name='txtPassword']").focus(function(e){
$(this).css("background-color","#FDFCDC");
});
$(":input[name='txtID']").blur(function(e){
$(this).css("background-color","white");
});
$(":input[name='txtID']").focus(function(e){
$(this).css("background-color","#FDFCDC");
});
});
</script>
</HEAD>
<body>
<form id="Form1" method="post" runat="server">
<div id="body">
<input type="text" id="txtID" name="txtID" CssClass="txt" Width="130px" tabIndex="1"></input>
<input type="password" id="txtPassword" name="txtPassword" Width="130px" TextMode="Password" tabIndex="2"></input>
</div>
</form>
</body>
Here is a code I wrote.
In this code, I feel very uncomfortable , that's because
two TextBoxes act almost same.
But I 'm not able to make this code shorter..
I think there must be optimal code.
I know below code work same. But I hope to attach the control name or ID. to read code easily
$(":input").blur(function(e){
$(this).css("background-color","white");
});
$(":input").focus(function(e){
$(this).css("background-color","#FDFCDC");
});
Like this:
$("#txtID, #txtPassword").focus(function(e){
$(this).css("background-color","#FDFCDC");
}).blur(function(e){
$(this).css("background-color","white");
});
Or, better yet:
<style type="text/css">
#txtID, #txtPassword {
background-color: white;
}
#txtID:active, #txtPassword:active {
background-color: #FDFCDC;
}
</style>
Related
I want to make a WEB page move screen transition in ajax .
I wrote in one.html
<html>
<head>
<meta charset="UTF-8">
<title>Top</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="jquery.pjax.js"></script>
</head>
<script type="text/javascript">
$(function() {
$.pjax({
area: '#main'
});
$(document).bind('pjax:render', function() {
$('#main').attr({
'class': 'fadeInUp'
});
});
});
</script>
<body>
<p>
name
</p>
<input type="text" name="name" size="10">
<p class="button">Next</p>
</body>
</html>
in two.html
<p>
age
</p>
<input type="text" size="10">
<p class="button">Next</p>
But when I put Next button in one.html,Page not found (404)
Request URL:http://127.0.0.1:8000/app/two.html error happens.
I cannot understand why such an error happens.What is wrong in my codes?How should I fix this?
http://127.0.0.1:8000/app/two.html
so the link you can set blow:
<p class="button">Next</p>
I am currently working in jsp. I need to get the value of input on text box while a buttton is clicked. My code is given below. While running it produces output which disappears in seconds. I need a stable output (text in textbox) when button is clicked.
<html>
<head>
<style type="text/css">
body {
background-color: #cccccc;
}
tab{ padding-left: 4em; }
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<form>
<title>Businesscard Management</title>
</head>
<body>
<br><br><br><br><br><br>
<h2> Search : <input type="text" class="textbox" size="75" id="myText" autofocus="true" name="searchinput"/></h2>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
document.getElementById("myText").value="ertyu";
}
</script>
</body>
</html>
First of all you have some errors in your code markup. You have just one opened <form> tag inside of <head> tag. Also I noticed that you're trying to set styles for tab but this is not appropriate tag. And you forgot to close </html> tag. Be careful when writing code, better to use code indention for better reading and it could prevent plenty of errors.
regarding your code:
<html>
<head>
<style type="text/css">
body {
background-color: #cccccc;
}
tab {
padding-left: 4em;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Businesscard Management</title>
</head>
<body>
<br><br><br><br><br><br>
<form action="/">
<h2> Search : <input type="text" class="textbox" size="75" id="myText" autofocus="true" name="searchinput"/></h2>
<input type="button" onclick="myFunction()" value="Try it"/>
<p id="demo"></p>
</form>
<script>
function myFunction() {
document.getElementById("myText").value = "ertyu";
}
</script>
</body>
</html>
I've move <form> tag to it desired position. And replaced <button> with <input type="button"> to prevent form submitting. So regarding your code when you press Try it button you will assign "ertyu" text to the input value. And if you want to get value of it, just use document.getElementById("myText").value
On clicking the radio button nothing happens, why?
<html>
<head>
<link type="text/css" rel="stylesheet" href="css/bootstrap.css" />
<script type="text/javascript" src="jquery.js">
$("input[name='check1']",$('#Search_By')).change(function()
{
alert('yo');
});
</script>
</head>
<body class="well">
<form action="/abc/readservlet" method="post">
<div class="well" id="Search_By">
<h3><b/>Search BY</h3>
<input type="Radio" name="check1" value="Search BY Key"> Key<br/><br/>
<input type="Radio" name="check1" value="Search By Tablename"> Tab_name
<br/>
</div>
On clicking radio button nothing happens...
If your <script> tag has a src attribute, its contents will be ignored, so your code isn't going to actually run at all.
You need to put your code into a separate script tag and run the code when the document is ready:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#Search_By input[name='check1']")).change(function() {
alert('yo');
});
});
</script>
Or put both of those script tags at the very bottom of the <body> tag.
The javascript code to create the onchange handler should be as follows. Try it out.
...
$("#Search_By input[name='check1']").change(
function()
{
alert('yo');
});
...
I have list of Items and a search box. if search term entered into the search box the matched text should appear with bold letters in the list irrespective of the case(case insensitive).
I have done up to some level but later i dont know how to do it, as i am new to the jquery.
<html>
<head>
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".SearchElement").keyup(function(){
keyword = $(".SearchElement").val();
if(keyword.length>=3){
var content = $(".wrapperbox ul li").text();
test = content.match(/keyword/gi)
if(test){
//alert(test);
}
}
});
});
</script>
</head>
<body>
<form action="">
<label>SearchTerm:</label> <input type="text"
name="SearchBox" value="" class="SearchElement" />
</form>
<div class="wrapperbox">
<ul>
<li>TestString</li>
<li>testString</li>
<li>Kanigiri</li>
<li>KANIGIRI</li>
</ul>
</div>
</body>
</html>
How can i do that, any help will be greatly appriciated. Thank you
<html>
<head>
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#SearchElement").keyup(function(){
keyword = $("#SearchElement").val();
if(keyword.length>=3){
$(".wrapperbox ul li").each(function(index) {
var content = = $(this).text());
test = content.match(/keyword/gi);
if (test){
$(this).replaceWith( "<li><b>" + $(this).text() + "</b></li>" );
}
});
}
});
});
</script>
</head>
<body>
<form action="">
<label>SearchTerm:</label> <input type="text"
name="SearchBox" id="SearchBox" value="" class="SearchElement" />
</form>
<div class="wrapperbox">
<ul>
<li>TestString</li>
<li>testString</li>
<li>Kanigiri</li>
<li>KANIGIRI</li>
</ul>
</div>
</body>
</html>
use an ID to reference your form input
use a each() loop
basically fiddle about and find replace within that loop (I did a weak version - untested, and based on your code, to help you) but hopefully you can see where I am going
I am sure there is a proper term for it but don't know it. How can I make a small note pop up when a user is on each field? Like let's say they go to name field; then as soon as they click on the name field on the right side, I want a small note to show up giving them a message like "make sure you use full name". I want to do this for a couple of fields I have. How can I do this?
Are you looking for ToolTips? Checkout these collection from smashing magazine.
I use this plugin for what you are asking. JQuery tooltip
FlowPlayer.org has a good jQuery tooltip plugin that you can use.
Check this for a demo of using it on a form(it suits your requirement)
Here is a simple example: http://jsbin.com/iruyo3
Code pasted here for reference too.
<!doctype html>
<html>
<head>
<title></title>
<style type="text/css">
html,body,h1,h2,h3,h4,h5,p,ul,li,form,button { margin:0; padding:0 }
body { font:normal 62.5% tahoma; margin:20px }
#myForm .note { display:none; }
#myForm fieldset { border:0 }
#myForm label { width:100px; float:left; height:25px; line-height:25px; text-align:right; padding-right:10px }
</style>
</head>
<body>
<form id="myForm">
<fieldset>
<label>Name</label>
<input type="text" name="fullname">
<span class="note">Enter your full name.</span>
</fieldset>
<fieldset>
<label>Company</label>
<input type="text" name="fullname">
<span class="note">Enter your work place.</span>
</fieldset>
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function() {
$('#myForm input:text').focus(function(){
$('.note').hide();
$(this).next().fadeIn();
});
});
</script>
</body>
</html>