We Keep Coding

How to get all data-id input class value where the data-id is same as currently focused field data-id using jQuery?

I have input form html is below,
<input type="text" class="form-control featurecat-item featurecat" value="" data-id="1">
<input type="text" class="form-control featurecat-label featurecat" value="" data-id="1">
<input type="checkbox" class="filled-in featurecat-isactive featurecat" data-id="1">
<input type="text" class="form-control featurecat-item featurecat" value="" data-id="2">
<input type="text" class="form-control featurecat-label featurecat" value="" data-id="2">
<input type="checkbox" class="filled-in featurecat-isactive featurecat" data-id="2">
<input type="text" class="form-control featurecat-item featurecat" value="" data-id="3">
<input type="text" class="form-control featurecat-label featurecat" value="" data-id="3">
<input type="checkbox" class="filled-in featurecat-isactive featurecat" data-id="3">
<input type="text" class="form-control featurecat-item featurecat" value="" data-id="4">
<input type="text" class="form-control featurecat-label featurecat" value="" data-id="4">
<input type="checkbox" class="filled-in featurecat-isactive featurecat" data-id="4">
Here each group contains three fields(.featurecat-item, .featurecat-label, .featurecat-isactive) class where each group data-id is same.
Using the jquery function(on change/paste/keyup) I need to get the .featurecat-item, .featurecat-label, .featurecat-isactive class input value which data-id is same as the currently focused field data-id.
Following is my sample and not-complete jquery function,
$(document).ready(function(){
$(".featurecat").on("change paste keyup", function() {
//.........
// var current_id = Current focused field data-id
// Get the .featurecat-item, .featurecat-label, .featurecat-isactive class input value which data-id is equal to current_id
//.........
var item = $('.featurecat-item').val().replace(/,/g, "");
var label = $('.featurecat-label').val().replace(/,/g, "");
var isactive = ($(".featurecat-isactive").prop('checked') == true) ? 1 : 0;
var data = "item:"+item+"| label:"+label+"| isactive:"+isactive;
console.log(data);
});
});
How can I do this using in jQuery?

To get data attribute use .data('id') or .attr('data-id')
To select element with this data attribute use [data-id="...."] selector
Also to check for :checked you can use .is(':checked')
$(document).ready(function(){
$(".featurecat").on("change paste keyup", function() {
//.........
// var current_id = Current focused field data-id
// Get the .featurecat-item, .featurecat-label, .featurecat-isactive class input value which data-id is equal to current_id
//.........
var ThisInput = $(this);
var data_id = ThisInput.data('id');
var item = $('.featurecat-item[data-id="'+data_id +'"]').val();//.replace(/,/g, "");
var label = $('.featurecat-label[data-id="'+data_id +'"]').val();//.replace(/,/g, "");
var isactive = ($('.featurecat-isactive[data-id="'+data_id+'"]').is(':checked')) ? 1 : 0;
var data = "item:"+item+"| label:"+label+"| isactive:"+isactive;
console.log(data);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="form-control featurecat-item featurecat" value="" data-id="1">
<input type="text" class="form-control featurecat-label featurecat" value="" data-id="1">
<input type="checkbox" class="filled-in featurecat-isactive featurecat" data-id="1">
<input type="text" class="form-control featurecat-item featurecat" value="" data-id="2">
<input type="text" class="form-control featurecat-label featurecat" value="" data-id="2">
<input type="checkbox" class="filled-in featurecat-isactive featurecat" data-id="2">
<input type="text" class="form-control featurecat-item featurecat" value="" data-id="3">
<input type="text" class="form-control featurecat-label featurecat" value="" data-id="3">
<input type="checkbox" class="filled-in featurecat-isactive featurecat" data-id="3">
<input type="text" class="form-control featurecat-item featurecat" value="" data-id="4">
<input type="text" class="form-control featurecat-label featurecat" value="" data-id="4">
<input type="checkbox" class="filled-in featurecat-isactive featurecat" data-id="4">

Add row automatically when focused on last input in the form

I'm stuck on part of my project where user should just keep filling the form and new lines should be added automatically when user focused on last input in the form. I'm not forged in JS/jQ so maybe one of you could help me... It is working but still just from the 1st line, not from the duplicated ones. Thanks is advance
<form class="form-inline" method="post" action="loadin.php">
<!-- form header -->
<hr>
<div class="form-group">
<select class="form-control" name="vendor" id="vendor">
<?php
foreach($vendors_ as $v){
echo"<option value='".$v['ID']."'>".ucfirst($v['name'])."</option>";
}
?>
</select>
<input type="text" class="form-control" name="invoice" id="invoice" placeholder="Faktrura">
<input type="text" class="form-control" name="date" id="date" placeholder="Datum" value="<?php echo date("Y-m-d") ?>">
<button type="submit" name="LoadItems" class="btn btn-default"><i class="fa fa-check" aria-hidden="true"></i> Nahrát</button>
</div>
<hr>
<!-- form lines -->
<div class="duplicate" style="margin-bottom: 5px;">
<div class="form-group">
<input type="hidden" class="form-control cleanVal" name="row[]" id="row">
<select class="form-control" name="category[]" id="category">
<?php
foreach($types_ as $t){
echo"<option value='".$t['ID']."'>".ucfirst($t['name'])."</option>";
}
?>
</select>
<input type="text" class="form-control cleanVal" name="item[]" id="item" placeholder="Položka">
<input type="text" class="form-control cleanVal" name="package[]" id="package" placeholder="Balení">
<input type="text" class="form-control cleanVal" name="amount[]" id="amount" placeholder="Množství">
<input type="text" class="form-control cleanVal" name="price[]" id="price" placeholder="Cena">
<input type="text" class="form-control cleanVal" name="atest[]" id="atest" placeholder="Atest">
<input type="text" class="form-control cleanVal" name="batch[]" id="batch" placeholder="Sarže">
<input type="text" class="form-control cleanVal" name="expire[]" id="expire" placeholder="Expirace" style="width:80px">
<input type="text" class="form-control cleanVal x" name="vat[]" id="vat" placeholder="DPH" style="width:45px">
</div>
</div>
</form>
$(".duplicate:last input").focus(function() {
count++;
var $clone = $('.duplicate:last').clone();
$clone.find("input,select").each(function(){
$(this).attr({
id: $(this).attr("id") + count,
});
});
$("form").append($clone);
$(".duplicate:last .cleanVal").val('');

Event delegation allows us to attach a single event listener, to a parent element, that will fire for all descendants matching a selector, whether those descendants exist now or are added in the future.
As last element is being changed every time new elements are appended, listen the event on the parent body or any other fixed parent.
var count = 0;
$('body').on('focus', ".duplicate:last input", function() {
count++;
var $clone = $('.duplicate:last').clone();
$clone.find("input,select").each(function() {
$(this).attr({
id: $(this).attr("id") + count,
});
});
$("form").append($clone);
$(".duplicate:last .cleanVal").val('');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form class="form-inline" method="post" action="loadin.php">
<hr>
<div class="form-group">
<select class="form-control" name="vendor" id="vendor">
</select>
<input type="text" class="form-control" name="invoice" id="invoice" placeholder="Faktrura">
<input type="text" class="form-control" name="date" id="date" placeholder="Datum" value="">
<button type="submit" name="LoadItems" class="btn btn-default"><i class="fa fa-check" aria-hidden="true"></i> Nahrát</button>
</div>
<hr>
<div class="duplicate" style="margin-bottom: 5px;">
<div class="form-group">
<input type="hidden" class="form-control cleanVal" name="row[]" id="row">
<select class="form-control" name="category[]" id="category">
</select>
<input type="text" class="form-control cleanVal" name="item[]" id="item" placeholder="Položka">
<input type="text" class="form-control cleanVal" name="package[]" id="package" placeholder="Balení">
<input type="text" class="form-control cleanVal" name="amount[]" id="amount" placeholder="Množství">
<input type="text" class="form-control cleanVal" name="price[]" id="price" placeholder="Cena">
<input type="text" class="form-control cleanVal" name="atest[]" id="atest" placeholder="Atest">
<input type="text" class="form-control cleanVal" name="batch[]" id="batch" placeholder="Sarže">
<input type="text" class="form-control cleanVal" name="expire[]" id="expire" placeholder="Expirace" style="width:80px">
<input type="text" class="form-control cleanVal x" name="vat[]" id="vat" placeholder="DPH" style="width:45px">
</div>
</div>
</form>
Fiddle Demo

You must define your focus event as bellow:
$('body').on('focus', ".duplicate:last input", function() {
// codes here
}

ajax data into input fields with same id

i need to add a ajax data in to input fields with same id.
new rows can be added by clicking add row button. all rows generated with same ids and classes. i'm trying to add ajax data in to text fields in change of first select box on each row. how do i set data only for the changed row.
Dynamic form
<tr>
<td>
<select class="form-control itemId" id="itemId" required="required" name="item_id[]">
<option value="" selected="selected">Select an item</option><option value="1">Toyota Front Buffer</option>
<option value="2">Mitsubishi Lancer Right Door</option>
</select>
</td>
<td>
<input class="form-control item_description" id="item_description" placeholder="Not Required | Optional" name="item_description[]" type="text">
</td>
<td>
<input class="form-control" placeholder="Add Units" id="units" required="required" name="units[]" type="text">
</td>
<td>
<input class="form-control" placeholder="Add Rate" id="rate" required="required" name="rate[]" type="text">
</td>
<td>
<input class="form-control" id="amount" placeholder="Add Hrs and Rate" name="amount[]" type="text">
</td>
</tr>
<tr>
<td>
<select class="form-control itemId" id="itemId" required="required" name="item_id[]">
<option value="" selected="selected">Select an item</option><option value="1">Toyota Front Buffer</option>
<option value="2">Mitsubishi Lancer Right Door</option>
</select>
</td>
<td>
<input class="form-control item_description" id="item_description" placeholder="Not Required | Optional" name="item_description[]" type="text">
</td>
<td>
<input class="form-control" placeholder="Add Units" id="units" required="required" name="units[]" type="text">
</td>
<td>
<input class="form-control" placeholder="Add Rate" id="rate" required="required" name="rate[]" type="text">
</td>
<td>
<input class="form-control" id="amount" placeholder="Add Hrs and Rate" name="amount[]" type="text">
</td>
</tr>
Ajax code
$("#dynamic-tbl").on('change', 'select', function(e){
var item_id = e.target.value;
var self = this;
$.get('/ajax-item?item_id=' + item_id, function(data){
$.each(data, function(index, itemObj){
$(this).closest('#item_description').val(itemObj.name);
$(this).closest('#rate').val(itemObj.sale_price);
});
});
});

Try this.,
$.each(data, function(index, itemObj){
$(self) // use self not this
.closest('tr') // get the parent(closest) tr
.find('input[name="item_description[]"]')// now find the item_description by name as id must be unique
.val(itemObj.name);
$(self)
.closest('tr')
.find('input[name="rate[]"]')
.val(itemObj.sale_price);
});

How to pass value of one input to Multiple input?

I have multi input field like below
<td width="25%">
<input name="interest" id="interest" type="text" size="6" maxlength="6" />%
<input name="interest1" id="interest1" type="text" size="6" maxlength="6" />%1
..................
</td>
Now I want pass same value of one input field to other four input fields? how I will pass ? any idea ?

Just Try this.,
$("#interest").change(function(){
$('.myinput').val($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="interest" id="interest" type="text" size="6" maxlength="6" />%
<input name="interest1" class="myinput" type="text" size="6" maxlength="6" />%1
<input name="interest2" class="myinput" type="text" size="6" maxlength="6" />%2
<input name="interest3" class="myinput" type="text" size="6" maxlength="6" />%3
<input name="interest4" class="myinput" type="text" size="6" maxlength="6" />%4

jquery validation doesn't respond

<form class="admission" name="form" method="POST" action="#" enctype="multipart/form-data" id="new_student">
<h2> Student Details </h2>
<p>Fields marked with <span class="necessary-field">*</span> must be filled.</p>
<label>Admission number
<span class="small">Add your name</span>
</label>
<input type="text" name="Admission_number" id="Admission_number"/><br/>
<label>Admission Date
<span class="small">Add your name</span>
</label>
<input type="text" name="Admission_Date" id="Admission_Date" /><br/>
<h2>Personal Details</h2><p></p>
<label>First Name</label>
<input type="text" name="first_name" id="first_name" /><br/>
<label>Middle Name</label>
<input type="text" name="middle_name" id="middle_name" /><br/>
<label>Last Name
<span class="small">Last name or Surname</span>
</label>
<input type="text" name="last_name" id="last_name" /><br/>
<label>Course </label>
<select id="student_batch_id" name="student_batch_id">
<option value="11">10 - 2010 A</option>
<option value="14">LKG</option>
</select><br/>
<label>Date of Birth</label>
<input type="text" name="dob" id="dob"/><br/>
<label>Gender</label>
<select id="gender" name="gender">
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
<label>Blood Group</label>
<select id="student_blood_group" name="student_blood_group"><option value="">Unknown</option>
<option value="A+">A+</option>
<option value="A-">A-</option>
<option value="B+">B+</option>
<option value="B-">B-</option>
<option value="O+">O+</option>
<option value="O-">O-</option>
<option value="AB+">AB+</option>
<option value="AB-">AB-</option></select>
<label>Identification Marks</label>
<input type="text" name="id_mark_1" id="id_mark_1" /><br/>
<label> </label>
<input type="text" name="id_mark_2" id="id_mark_2" /><br/>
<label>Place of Birth</label>
<input type="text" name="birth_palace" id="birth_palace" /><br/>
<label>Nationality</label>
<input type="text" name="nationalaity" id="nationalaity" /><br/>
<label>Mother Tongue</label>
<input type="text" name="mother_tongue" id="mother_tongue" /><br/>
<label>Religion</label>
<input type="text" name="religion" id="religion" /><br/>
<label>Cast</label>
<input type="text" name="cast" id="cast" /><br/>
<label>Creed</label>
<input type="text" name="creed" id="creed" /><br/>
<label>category</label>
<select id="student_category_id" name="category_id]">
<option value="">Select a Category</option>
<option value="1">GENERAL</option>
<option value="2">SC/ST</option>
<option value="3">OBC</option>
<option value="4">OEC</option>
<option value="5">NRI</option>
</select><br/>
<h2>Contact Details</h2><p></p>
<label>Address Line1</label>
<input type="text" name="address_line1" id="address_line1" /><br/>
<label>Address Line2</label>
<input type="text" name="address_line2" id="address_line2" /><br/>
<label>Locality</label>
<input type="text" name="locality" id="locality" /><br/>
<label>City</label>
<input type="text" name="city" id="city" /><br/>
<label>State</label>
<input type="text" name="state" id="state" /><br/>
<label>PIN</label>
<input type="text" name="pin_num" id="pin_num" /><br/>
<label>Telephone</label>
<input type="text" name="telephone" id="telephone" /><br/>
<label>Mobile</label>
<input type="text" name="mobile" id="mobile" /><br/>
<label>Upload User Photo</label>
<span class="small">Upload User Photo (60KB max)</span>
<input id="student_photo" name="student_photo" type="file" >
<input type="submit" value="NEXT">
<br/>
</form>​
This form is to be validated. I include these below js files to the page.
<script src="../JavaScript/jquery.js" type="text/javascript"></script>
<script src="../JavaScript/jquery.validate.js" type="text/javascript"></script>
And add the java script code:-
<script type="text/javascript">
$(document).ready(function(){
$("#new_student").validate({
rules: {
Admission_number: {
required: true,
minlength: 2
},
Admission_Date: "required"
},
messages: {
Admission_Date: "This is a comment form. Why in the heck would you leave the comment blank?",
Admission_number: {
required: "Stand up for your comments or go home.",
minlength: jQuery.format("You need to use at least {0} characters for your name.")
}
}
});
});
</script>
I am new to jquery but. I couldnt understand where the mistake is
here is the jsFiddle link http://jsfiddle.net/abelkbil/cVjez/

It's working for me...
http://jsfiddle.net/cVjez/10/
All I did was change the jQuery version to 1.7.2 and then added the jQuery.validation.js file from the Microsoft Ajax CDN
Maybe double check that the jquery and jquery validation js libraries are being loaded... the relative path might be wrong or something along those lines.