auto focus input text box in form on page load in jquery
Question
I am using bootstrap validation in my form when i give autofocus in my form field it worked correctly but i need to focus the text box field which doesnot have value on page load ....
I tried this but not working for me
$(document).ready(function(){
if($(':input:visible:first').val() != "")
{
$(this).next("input").focus();
}
});
Html Code:
@extends('layouts.app')
@section('content')
<div class="container">
@if(Session::has('success'))
<div class="alert alert-success" data-dismiss="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
{{ Session::get('success') }}
</div>
@endif
<div class="alert alert-warning alert-dismissible" id="confrence-info" role="alert" style="display:none">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<div class="conferenceHTML"></div>
</div>
<div class="row">
<div class="col-md-12">
<div class="panel panel-primary">
<div class="panel-heading"><b>New Conference Request</b></div>
<div class="panel-body">
<div class="row">
<div class="col-md-10">
{{ Form::open(['route'=>'addnew.store', 'class' => 'form-horizontal', 'data-toggle'=>'validator']) }}
<input type="hidden" name="_token" value="{{{ csrf_token() }}}" />
<input type="hidden" name="user_id" value="{{Cookie::get('uid')}}"/>
<div class="form-group">
<label class="control-label col-md-6" for="email">Your Email<span> *</span></label>
<div class="col-md-6">
<input type="text"
class="form-control"
pattern="^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,100}(?:\.[a-z]{6})?)$"
data-error="Please enter your email address"
data-pattern-error="Please enter valid email address"
id="email"
name="email"
required
value="{{ Cookie::get('uemail') }}" />
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-6" for="conferencename">Conference Name<span> *</span></label>
<div class="col-md-6">
<input type="text" class="form-control conference-name typeahead tt-query" data-error="Please enter the conference name" maxlength="350" id="conferencename" name="conferencename" required />
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-6" for="firstname">Your First Name<span> *</span></label>
<div class="col-md-6">
<input type="text" maxlength="25" value="{{ Cookie::get('ufn') }}" id="firstname" data-error="Please enter your first name" class="form-control" name="firstname" required/>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-6" for="lastname">Your Last Name<span> *</span></label>
<div class="col-md-6">
<input type="text" maxlength="25" value="{{ Cookie::get('uln') }}" id="lastname" data-error="Please enter your last name" name="lastname" class="form-control" required/>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-6" for="conferenceurl">Conference Website<span> *</span></label>
<div class="col-md-6">
<input type="url" pattern="((http|https)://)?[\w-]+(\.[\w-]+)+([\w.,@?^=%&:/~+#-]*[\w@?^=%&/~+#-])?" placeholder="http://www.nrg.com" data-error="Please enter in correct format eg: http://www.nrg.com" class="form-control" id="conferenceurl" name="conferenceurl" required />
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-6" for="description">Conference Description<span> *</span></label>
<div class="col-md-6">
<textarea class="form-control" id="description" name="description" data-error="Please enter the description" rows="3" required></textarea>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-6" for="industry">Industry Conference primarily applies to?<span> *</span></label>
<div class="col-md-6">
<textarea class="form-control" maxlength="500" data-error="Please enter this field" id="industry" name="industry" cols="10" rows="2" required></textarea>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-6" for="business">Why is this conference relevant to the business?<span> *</span></label>
<div class="col-md-6">
<textarea class="form-control" id="business" name="business" data-error="Please enter this field" maxlength="2000" rows="3" required></textarea>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-6" for="notes">Conference Notes</label>
<div class="col-md-6">
<textarea class="form-control" id="notes" name="notes" rows="4"></textarea>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-6" for="frequency">Conference Frequency<span> *</span></label>
<div class="col-md-6">
<select class="form-control" id="frequency" name="frequency" data-error="Please select anyone of this fields" required="required">
<option value="">Select</option>
<option value="LOY">Less than once a Year</option>
<option value="OAY">Once a Year</option>
<option value="MTY">Multiple times a Year</option>
</select>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group text-center pull-right">
<div class="col-md-12">
<a href="{{URL::previous()}}" class="btn btn-default">Cancel</a>
{{ Form::submit('Submit',['class' => 'btn btn-success']) }}
</div>
{{ Form::close() }}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
var ele = $('input').filter(':visible:first');
if(ele.val() != "")
{
ele.parents('.form-group').next().find('input').trigger('focus');
}
});
</script>
@endsection
In this I want to focus the cursor on next input field if the previous text box have value...Please help me how to achieve this?
2 answers
solution1
1 2017-04-28 10:57:43
this will focus any one field so you have to make one similar style in class for rest blank fields.
check below code and live snippet
$('.main input[type="text"]').each(function(i){
var chec = $('.main input[type="text"]').eq(i).val();
if(chec==""){
$(this).addClass("custom-outline");
$(this).focus();
}
})
$(document).ready(function(){ $('.main input[type="text"]').each(function(i){ var chec = $('.main input[type="text"]').eq(i).val(); if(chec==""){ $(this).addClass("custom-outline"); $(this).focus(); } }) });
.custom-outline { outline: #438aff; outline-width: thin; outline-style: solid } .custom-outline:focus { outline: #438aff; outline-width: thin; outline-style: solid; padding: 3px 0; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="main"> <input type="text" value="Something here"> <input type="text"> <input type="text"> <input type="text" value=""> <input type="text" value="ok"> <input type="text" value=""> </div>
solution2
0 ACCPTED 2017-04-28 09:23:01
$(document).ready(function() {
var ele = $('input').filter(':visible:first');
if (ele.val() != "") {
ele.parents('.form-group').next().find('.col-md-
6').children().trigger('focus');
}
});
Please try this one.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How to focus on a form input text field on page load using jQuery?
Setting focus on an HTML input box on page load
Setting focus on a text box on page load
Auto-focus input box in toggleable text/input fields
Focus Input Box On Load
Jquery setting time to input box on page load
Javascript focus on input box on load
Auto Resize Text to Fit Form Input with jQuery
Select text box on page load jQuery
Text box on page load automatically selected with jQuery
Related Tags