How to focus cursor using jquery for text box, while moving to next field , if it is empty,
AntonyRayan
15
Posting Whiz in Training
Recommended Answers
Jump to Post"Focus on a textbox while moving to the next textbox if it's empty"
You mean as in focus on the first non-empty textbox?
while moving to next field
Moving as in moving focus?
You'll have to be more clear.
You can use
.focus()to set focus, or.focusin()…
Jump to PostI don't know what you have and I don't know what you want, so I can't help you with anything other than general usage.
$("#myTextbox").focus();will set focus to an element with the id myTextbox. Be sure to call it after the elements have been created, for instance by …
All 6 Replies
Traevel
216
Light Poster
"Focus on a textbox while moving to the next textbox if it's empty"
You mean as in focus on the first non-empty textbox?
while moving to next field
Moving as in moving focus?
You'll have to be more clear.
You can use .focus() to set focus, or .focusin() and .focusout() for even more freedom.
AntonyRayan
15
Posting Whiz in Training
but it is not working for me
Traevel
216
Light Poster
I don't know what you have and I don't know what you want, so I can't help you with anything other than general usage.
$("#myTextbox").focus(); will set focus to an element with the id myTextbox. Be sure to call it after the elements have been created, for instance by using:
$(function(){
$("#myTextbox").focus();
});
On a side note, this has nothing to do with PHP.
AntonyRayan
15
Posting Whiz in Training
This is my index page::::
<html>
<head><title>Registration</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script src='http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js'></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script type="text/javascript">
window.onload = function () {
document.getElementById("name").focus();
};
</script>
<script type="text/javascript">
function validate()
{
if(document.register.name.value == "")
{
alert('Enter valid name');
document.register.name.focus();
return false;
}
else
if(document.register.email.value == "")
{
alert('Enter valid email');
document.register.email.focus();
return false;
}
else
if(document.register.password == "")
{
alert('Enter Password');
document.register.password.focus();
return false;
}
else
if(document.register.repeatpassword.value == "")
{
alert('Enter valid repeatpassword');
document.register.repeatpassword.focus();
return false;
}
else
if(document.register.day.value == "")
{
alert('Enter valid day');
document.register.day.focus();
return false;
}
else
if(document.register.month.value == "")
{
alert('Enter valid month');
document.register.month.focus();
return false;
}
else
if(document.register.year.value == "")
{
alert('Enter valid year');
document.register.year.focus();
return false;
}
else
if(document.register.phone.value == "")
{
alert('Enter valid phone');
document.register.phone.focus();
return false;
}
}
</script>
<script>
$(document).ready(function () {
$("#name").blur(function () {
var name = $(this).val();
if (name == '') {
$(function(){
alert('Enter your name');
$("#name").focus();
});
//document.getElementById('name').focus();
}
else{
$("#availability").html('<img src="loader.gif"> Checking availability.');
$.ajax({
url: "validation.php?uname="+name
}).done(function( data ) {
$("#availability").html(data);
});
}
});
});
</script>
<script type="text/javascript">
$(document).ready(function () {
$("#email").blur(function () {
var email = $(this).val();
if (email == '') {
alert('Enter Email');
$("#availability").html("");
}
else{
$.ajax({
url: "emailvalid.php?uemail="+email
}).done(function( data ) {
$("#availability").html(data);
});
}
});
});
</script>
<script language="javascript">
function checkEmail()
{
var email = document.getElementById('email');
var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{3})+$/;
if (!filter.test(email.value))
{
alert('Please provide a valid email address');
document.register.email.focus;
}
}
</script>
<script>
function checkPassword()
{
var pwd = document.getElementById("password").value;
// pwd = pwd.replace(/^\s+/g, ""); // strip leading spaces
var rpwd = document.getElementById("repeatpassword").value;
//rpwd = rpwd.replace(/^\s+/g, ""); // strip leading spaces
if(pwd != rpwd)
{
alert("Your password does not match! Try Again.");
document.getElementById("password").value = "";
document.getElementById("repeatpassword").value = "";
document.getElementById("password").focus();
}
}
</script>
<script type="text/javascript">
function numbersonly(e,length)
{
var unicode=e.charCode? e.charCode : e.keyCode
var maxlength=length;
if (unicode!=8)
{ //if the key isn't the backspace key (which we should allow)
if (unicode<48||unicode>57) //if not a number
return false //disable key press
}
}
</script>
<script type="text/javascript">
$(document).on('keydown', '#password', function(e) {
if (e.keyCode == 32) return false;
});
$(document).on('keydown', '#repeatpassword', function(e) {
if (e.keyCode == 32) return false;
});
</script>
<script type="text/javascript">
var reg = /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;
function PhoneValidation(phone)
{
var OK = reg.exec(phone.value);
if (!OK)
window.alert("phone number isn't valid");
}
</script>
<script type="text/javascript">
$(document).ready(function () {
$("#phone").blur(function () {
var phone = $(this).val();
if (phone == '') {
}
else{
$("#availability").html('<img src="loader.gif"> Checking availability.');
$.ajax({
url: "phonevalid.php?uphone="+phone
}).done(function( data ) {
$("#availability").html(data);
});
}
});
});
</script>
<style type="text/css">
body {
background-image:url('images/reg3.jpg');
background-size: 1400px 700px;
background-repeat: no-repeat;
}
#footer {
width:100%;
height:80px;
position:absolute;
bottom:0;
left:0;
<!--background:#ee5;-->
}
</style>
</head>
<body>
<div id="mktHeader" class="mktEditable">
<div align="right"><a href="https://twitter.com/"><img src="http://pages.zend.com/rs/zendtechnologies/images/Zend_TW_green.png" width="39"/></a></div>
<div align="right"><a href="https://www.facebook.com/"><img src="http://pages.zend.com/rs/zendtechnologies/images/Zend_FB_green.png" width="39"/></a></div>
<div align="right"><a href="https://www.linkedin.com/"><img src="http://pages.zend.com/rs/zendtechnologies/images/Zend_LI_green.png" width="39"/></a></div>
</div>
<div align="center">
<h3>User Registration</h3>
<table>
<form name="register" action="save.php" method="post" onSubmit="return(validate());" o>
<tr>
<td>
<label>Name</label></td>
<td><label>:</label>
<input type="text" name="name" id="name" placeholder="Name"/><br /><br />
<div id="availability"></div></td></tr>
<tr><td>
<label>Email</label></td>
<td><label>:</label>
<input type="email" name="email" id="email" placeholder="Email" onChange="return checkEmail()" /><br /><br />
<div id="availability"></div></td></tr>
<tr><td>
<label>Password</label></td>
<td><label>:</label>
<input type="password" name="password" id="password" placeholder="Password" onBlur="focusPassword()"/><br /><br></td></tr>
<tr><td>
<label>RepeatPassword</label></td>
<td><label>:</label>
<input type="password" name="repeatpassword" id="repeatpassword" placeholder="RepeatPassword" onBlur="checkPassword()"/><br /><br />
</td></tr>
<tr><td>
<label>Date of Birth</label></td>
<td><label>:</label>
<select name="day" >
<option value="">Day</option>
<?php for ($day = 1; $day <= 31; $day++) { ?>
<option value="<?php echo strlen($day)==1 ? '0'.$day : $day; ?>"><?php echo strlen($day)==1 ? '0'.$day : $day; ?></option>
<?php } ?>
</select>
<select name="month" >
<option value="">Month</option>
<?php for ($month = 1; $month <= 12; $month++) { ?>
<option value="<?php echo strlen($month)==1 ? '0'.$month : $month; ?>"><?php echo strlen($month)==1 ? '0'.$month : $month; ?></option>
<?php } ?>
</select>
<select name="year" >
<option value="">Year</option>
<?php for ($year = date('Y'); $year > date('Y')-100; $year--) { ?>
<option value="<?php echo $year; ?>"><?php echo $year; ?></option>
<?php } ?>
</select><br /><br />
<tr><td>
<label>Phone</label></td>
<td><label>:</label>
<input type="text" name="phone" id="phone" placeholder="Phone No" maxlength="10" onKeyPress="return numbersonly(event);PhoneValidation(this)"/><br /><br /><div id="availability"></div></td></tr>
<tr><td>
<input type="submit" name="submit" value="Register"/></td>
<td><a href="login.php"> Already a member?</a></td></tr>
</form>
</div>
</table>
</div>
</body>
</html>
focus event is not working????
Traevel
216
Light Poster
You have a validation when you lose focus (blur) and you have one when you press submit. When you press submit it works. My guess is you're mixing up what gets fired at blur and what gets fired at submit. None of your blurs seem to have focus calls.
FYI, you're not using jQuery's .focus() but the native version.
Be a part of the DaniWeb community
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.