In a form, I want to create a new form input on enter action. I coded this which is working but the cursor doesn't go to the new created input and stays on the same..
How can I move the cursor to the added input;
var counter = 1;
$('#form')
.on('keydown', function(e) {
if (e.which == 13 || e.keyCode == 13) {
e.preventDefault();
counter++;
var $template = $('.form-group').slice(-1).clone(true, true).find('input').end()
.find('.addInput').removeClass('addInput').addClass('removeInput').end()
.find('[name^="paleta-"]').attr('name', 'paleta-' + counter).val("").attr('tabindex', counter).val("").end()
.find('i').removeClass('fa-plus').addClass('fa-minus').end();
$template.insertAfter('.form-group:last');
}
})
// Remove button click handler
.on('click', '.removeInput', function() {
var $row = $('.form-group').slice(-1);
counter--;
$row.remove();
});
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-12 col-sm-12">
<form id="form" method="post" class="form-horizontal" role="form">
<fieldset>
<div class="form-group">
<label for="inputName" class="col-md-1 col-sm-1 control-label">Barcode</label>
<div class="col-md-2 col-sm-2">
<input type="text" class="form-control" name="paleta-1" tabindex="1">
</div>
<div class="col-md-1 col-sm-1">
<button type="button" class="btn btn-default addInput"><i class="fa fa-plus"></i></button>
</div>
</div>
<div class="row">
<div class="row myTop">
<div class="col-md-1">
<button type="submit" name="formAction" value="next" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
</fieldset>
</form>
</div>
</div>
Try adding $('.form-control:last').focus();
on addInput
click event.
Or find input by name as like below. Check the snippet for reference.
var inputName="paleta-"+counter;
$("input[name='"+inputName+"']").focus();
var counter = 1;
document.getElementById("form").onkeypress = function(e) {
var key = e.charCode || e.keyCode || 0;
if (key == 13) {
addInput();
e.preventDefault();
}
}
$('#form').on('click', '.addInput', function() {
addInput();
})
// Remove button click handler
.on('click', '.removeInput', function() {
var $row = $('.form-group').slice(-1);
counter--;
$row.remove();
});
function addInput() {
counter++;
var $template = $('.form-group').slice(-1).clone(true, true).find('input').end()
.find('.addInput').removeClass('addInput').addClass('removeInput').end()
.find('[name^="paleta-"]').attr('name', 'paleta-' + counter).val("").attr('tabindex', counter).val("").end()
.find('i').removeClass('fa-plus').addClass('fa-minus').end();
$template.insertAfter('.form-group:last');
var inputName = "paleta-" + counter;
$("input[name='" + inputName + "']").focus();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-md-12 col-sm-12">
<form id="form" method="post" class="form-horizontal" role="form">
<fieldset>
<div class="form-group">
<label for="inputName" class="col-md-1 col-sm-1 control-label">Barcode</label>
<div class="col-md-2 col-sm-2">
<input type="text" class="form-control" name="paleta-1" tabindex="1">
</div>
<div class="col-md-1 col-sm-1">
<button type="button" class="btn btn-default addInput"><i class="fa fa-plus"></i></button>
</div>
</div>
<div class="row">
<div class="row myTop">
<div class="col-md-1">
<button type="submit" name="formAction" value="next" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
</fieldset>
</form>
</div>
</div>