how to clone div bassed select option - javascript

i have select option with count of numbers so i need now when user choose any number clone div tag personal information by this number ex: - select 8 clone 8 time ..
i try do that by use( for loop )but i have problem when run i see clone over this number ex:- choose 8 clone 16 time
this is html code and my try js code
$('#c3').change(function() {
$('.cloneHere').empty();
var count = $('#c3').val();
for (i = 1; count > i; i++) {
var clone = $('.rowClone').clone();
$('.cloneHere').append(clone);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='col-xs-3'>
<label for="">count of person</label>
<select class='form-control select2' name="" id="c3">
<option value="" selected disabled hidden>Choose here</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
<div class='col-md-12'>
<div class='box box-primary'>
<div class='box-header with-border'>
<h3 class='box-title'>Information of Person</h3>
</div>
<div class='form-group'>
<div class='box-body rowClone2'>
<div class=' row'>
<div class=' col-sm-3'><label for="">Person 1</label></div>
</div>
<div class='row rowClone'>
<div class='col-xs-6 col-md-3'>
<input type="text" class="form-control">
</div>
<div class='col-xs-6 col-md-3'>
<input type="text" class="form-control">
</div>
<div class='col-xs-6 col-md-3'>
<input type="tel" class="form-control">
</div>
<div class='col-xs-6 col-md-3'>
<input type="text" class="form-control">
</div>
</div>
<br>
<div class="row cloneHere">
</div>
</div>

The problem you are facing comes from this line: var clone = $('.rowClone').clone();
the first clone is fine because only 1 .rowClone exist, next time multiple .rowClone exist and it appends all of those.
You have 2 solutions, either use var clone = $('.rowClone:first').clone(); or move var clone = $('.rowClone').clone(); before your for loop
Demo of the problem, run it and look at the console
$('#c3').change(function() {
$('.cloneHere').empty();
var count = $('#c3').val();
for (i = 1; count > i; i++) {
console.log("Number of .rowClone that exist = " + $('.rowClone').length)
var clone = $('.rowClone').clone();
$('.cloneHere').append(clone);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='col-xs-3'>
<label for="">count of person</label>
<select class='form-control select2' name="" id="c3">
<option value="" selected disabled hidden>Choose here</option>
<option value="8">8</option>
</select>
</div>
<div class='col-md-12'>
<div class='box box-primary'>
<div class='box-header with-border'>
<h3 class='box-title'>Information of Person</h3>
</div>
<div class='form-group'>
<div class='box-body rowClone2'>
<div class=' row'>
<div class=' col-sm-3'><label for="">Person 1</label></div>
</div>
<div class='row rowClone'>
<div class='col-xs-6 col-md-3'>
<input type="text" class="form-control">
</div>
<div class='col-xs-6 col-md-3'>
<input type="text" class="form-control">
</div>
<div class='col-xs-6 col-md-3'>
<input type="tel" class="form-control">
</div>
<div class='col-xs-6 col-md-3'>
<input type="text" class="form-control">
</div>
</div>
<br>
<div class="row cloneHere">
</div>
</div>
</div>
</div>
</div>

Related

get the selected item added dynamically jquery

I managed to dynamically add input fields using this code :
My HTML :
<div class="row">
<div class="col-12">
<div class="card mb-4 form_field_outer ">
<div class="card-body form_field_outer_row ">
<form>
<div class="form-row">
<div class="form-group col-md-4">
<label for="inputState">Casting</label>
<select id="id_casting" class="form-control" name="id_casting">
<option selected>Choose...</option>
#foreach($castings as $casting)
<option data-id="{{$casting->id_casting}}" value="{{$casting->id_casting}}">{{$casting->nom.' '.$casting->prenom}}</option>
#endforeach
</select>
</div>
<div class="form-group col-md-4">
<label for="inputState">Type de contrat</label>
<select id="id_modele_contrat" class="form-control" name="id_modele_contrat">
<option selected>Choose...</option>
<option>...</option>
</select>
</div>
<div class="card-body ">
<button type="button" class="btn btn-outline-warning mb-1 remove_node_btn_frm_field">Delete</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
My script :
$(document).ready(function(){
$("body").on("click",".add_new_frm_field_btn", function (){
console.log("clicked");
var index = $(".form_field_outer").find(".form_field_outer_row").length + 1;
$(".form_field_outer").append(
`
<div class="col-12">
<div class="card-body form_field_outer_row">
<div class="form-row">
<div class="form-group col-md-4">
<label for="inputState">Casting</label>
<select id="id_casting" class="form-control" name="id_casting">
<option selected>Choose...</option>
#foreach($castings as $casting)
<option data-id="{{$casting->id_casting}}" value="{{$casting->id_casting}}">{{$casting->nom.' '.$casting->prenom}}</option>
#endforeach
</select>
</div>
<div class="form-group col-md-4">
<label for="inputState">Type de contrat</label>
<select id="id_modele_contrat" class="form-control" name="id_modele_contrat">
<option selected>Choose...</option>
<option>...</option>
</select>
</div>
<div class="card-body ">
<button type="button" class="btn btn-outline-warning mb-1 remove_node_btn_frm_field">Delete</button>
</div>
</div>
</div>
</div>
`);
$(".form_field_outer").find(".remove_node_btn_frm_field:not(:first)").prop("disabled", false);
$(".form_field_outer").find(".remove_node_btn_frm_field").first().prop("disabled", true);
});
});
No, I'm trying to get the id_casting of each selected item in selecbox for each added rows
So I tried the following scipt :
<script type="text/javascript">
$(document).ready(function(){
$("#id_casting").change(function(){
console.log("clickk");
let id_casting = $(this).find("option:selected").data("id");
console.log(id_casting);
});
});
/* });*/
</script>
Bu this script get only the id_casting of the first row and when I add a new row and I select item from select-box it doesn't get the id_casting of the selected item of select-box added
dynamically.

javascript to limit form options on multiple level children inputs

I have the following form, in summary:
kingdom --> phylum --> class --> order --> family --> genus...
If the kingdom = Animalia then the phylum options should be a certain list.
Following on, if the phylum then = Chordata the next drop down input option should be a certain list.
To continue, if the class = Mammalia the next drop down input option should be a certain list... etc.
So a hierarchical form with many dependant levels.
I've looked and tried a few examples, but I can't find a way to do this. Any ideas/suggestions?
Here's the bootstrap html:
<div class='col-12 left'>
<div class='form-group'>
<label for='uname'>kingdom</label>
<!-- <input type='text' class='form-control' name='kingdom' value ='Animalia' placeholder='Animalia' > -->
<select class="form-control" name='kingdom'>
<option>Animalia</option>
<option>Plantae</option>
<option>Fungi</option>
<option>Protista</option>
<option>Monera</option>
</select>
<div class='valid-feedback'>Valid.</div>
<div class='invalid-feedback'>Please fill out this field.</div>
</div>
</div>
<div class='col-12 left'>
<div class='form-group'>
<label for='uname'>phylum/division</label>
<!-- <input type='text' class='form-control' name='phylum' value ='Chordata' placeholder='Chordata' > -->
<select class="form-control" name='phylum'>
<option>Chordata</option>
<option>Annelid</option>
<option>Arthropod</option>
<option>Bryozoa</option>
<option>Cnidaria</option>
<option>Echinoderm</option>
<option>Mollusc</option>
<option>Nematode</option>
<option>Platyhelminthes</option>
<option>Rotifer</option>
<option>Sponge</option>
</select>
<div class='valid-feedback'>Valid.</div>
<div class='invalid-feedback'>Please fill out this field.</div>
</div>
</div>
<div class='col-12 left'>
<div class='form-group'>
<label for='uname'>class</label>
<!-- <input type='text' class='form-control' name='class' value ='Mammalia' placeholder='Mammalia' > -->
<select class="form-control" name='class'>
<option>Mammalia</option>
<option>Aves</option>
<option></option>
<option></option>
<option></option>
<option></option>
<option></option>
<option></option>
<option></option>
<option></option>
<option></option>
</select>
<div class='valid-feedback'>Valid.</div>
<div class='invalid-feedback'>Please fill out this field.</div>
</div>
</div>
<div class='col-12 left'>
<div class='form-group'>
<label for='uname'>order</label>
<!-- <input type='text' class='form-control' name='order' value ='Artiodactyla' placeholder='Artiodactyla' > -->
<select class="form-control" name='order'>
<option>Artiodactyla</option>
<option>Aegotheliformes</option>
<option>Perissodactyla</option>
<option></option>
<option></option>
<option></option>
<option></option>
<option></option>
<option></option>
<option></option>
<option></option>
</select>
<div class='valid-feedback'>Valid.</div>
<div class='invalid-feedback'>Please fill out this field.</div>
</div>
</div>
<div class='col-12 left'>
<div class='form-group'>
<label for='uname'>family</label>
<!-- <input type='text' class='form-control' name='family' value ='Bovidae' placeholder=' Bovidae' > -->
<select class="form-control" name='family'>
<option>Bovidae</option>
<option>Aegothelidae</option>
<option>Equidae</option>
<option>Delphinidae</option>
<option></option>
<option></option>
<option></option>
<option></option>
<option></option>
<option></option>
<option></option>
</select>
<div class='valid-feedback'>Valid.</div>
<div class='invalid-feedback'>Please fill out this field.</div>
</div>
</div>
<div class='col-12 left'>
<div class='form-group'>
<label for='uname'>genus</label>
<input type='text' class='form-control' name='genus' value ='Capra' placeholder='Capra' >
<select class="form-control" name='genus'>
<option>Capra</option>
<option>Ovis</option>
<option>Aegotheles</option>
<option>Oreamnos</option>
<option>Equus</option>
<option>Orcinus</option>
<option></option>
<option></option>
<option></option>
<option></option>
<option></option>
</select>
<div class='valid-feedback'>Valid.</div>
<div class='invalid-feedback'>Please fill out this field.</div>
</div>
</div>
<div class='col-12 left'>
<div class='form-group'>
<label for='uname'>subgenus</label>
<input type='text' class='form-control' name='subgenus' value ='Capra (aegagrus) hircus' placeholder='Capra (aegagrus) hircus' >
<div class='valid-feedback'>Valid.</div>
<div class='invalid-feedback'>Please fill out this field.</div>
</div>
</div>
<div class='col-12 left'>
<div class='form-group'>
<label for='uname'>elementName</label>
<!-- <input type='text' class='form-control' name='elementName' value ='a' placeholder='' > -->
<select class="form-control" name='elementName'>
<option>Cranium</option>
<option>Mandible</option>
<option>Teeth</option>
<option>Rib</option>
<option>Humerus</option>
<option>Ulna</option>
<option>Radius</option>
<option>Carpal</option>
<option>Metacarpal</option>
<option>Femur</option>
<option>Patela</option>
<option>Fibula</option>
<option>Tarsal</option>
<option>Metatarsal</option>
<option>Scapula</option>
<option>Vertebrae</option>
<option>Middle Phalanx</option>
<option>Phalanx</option>
<option>Tibia</option>
<option>Astragalus</option>
<option>Calcaneus</option>
<option>Proximal Phalanx</option>
</select>
<div class='valid-feedback'>Valid.</div>
<div class='invalid-feedback'>Please fill out this field.</div>
</div>
</div>
maybe little bit lazy, but it works
if you thought similar
<div class="form-group" >
<select class="form-control" id="sel0">
<option value="0">Choose</option>
<option value="1">Audi</option>
<option value="2">BMW</option>
</select>
<br>
<select class="form-control dispnone" id="sel1_1">
<option value="0">Choose</option>
<option value="1">A4</option>
<option value="2">RS8</option>
</select>
<select class="form-control dispnone" id="sel1_2">
<option value="0">Choose</option>
<option value="1">E36</option>
<option value="2">X5</option>
</select>
<select class="form-control dispnone" id="sel2_1">
<option value="0">Choose</option>
<option value="1">120LE</option>
<option value="2">140LE</option>
</select>
<select class="form-control dispnone" id="sel2_2">
<option value="0">Choose</option>
<option value="1">cyl8</option>
<option value="2">cyl16</option>
</select>
<script type="text/javascript">
$(document).ready(function() {
var select_nums = 3;
$("#sel0").change(function() {
var ch = $("#sel0").val();
if(ch==0){
for (var i = 1; i < select_nums; i++) {
$('#sel1_'+i).css({'display':'none'});
}
$('#sel1_'+ch).css({'display':'block'});
}else if(ch==1){
for (var i = 1; i < select_nums; i++) {
$('#sel1_'+i).css({'display':'none'});
}
$('#sel1_'+ch).css({'display':'block'});
}else if(ch==2){
for (var i = 1; i < select_nums; i++) {
$('#sel1_'+i).css({'display':'none'});
}
$('#sel1_'+ch).css({'display':'block'});
}
});
$("#sel1_1").change(function() {
var ch = $("#sel1_1").val();
if(ch==0){
for (var i = 1; i < select_nums; i++) {
$('#sel2_'+i).css({'display':'none'});
}
$('#sel2_'+ch).css({'display':'block'});
}else if(ch==1){
for (var i = 1; i < select_nums; i++) {
$('#sel2_'+i).css({'display':'none'});
}
$('#sel2_'+ch).css({'display':'block'});
}else if(ch==2){
for (var i = 1; i < select_nums; i++) {
$('#sel2_'+i).css({'display':'none'});
}
$('#sel2_'+ch).css({'display':'block'});
}
});
});
</script>
I extracted a portion of your html and got it working using an event listener to hide the unwanted options. I hope it helps:
I only considered the first two categories to show the example 'Animalia' and 'Plantae' and considered two subsets of options for each. The change event on the select tag triggers the code to hide and show as required.
function hideSubset(selectedValue){
let secondChoice = document.querySelector('#secondChoice');
let firstChoice = document.querySelector('#firstChoice');
if (selectedValue === 'Animalia'){
secondChoice.style.display = 'none';
firstChoice.style.display = 'block';
} else {
firstChoice.style.display = 'none';
secondChoice.style.display = 'block';
}
}
let mainChoice = document.querySelector('#mainChoice');
mainChoice.addEventListener('change', function(){
hideSubset(mainChoice.value);
}, false);
<div class='col-12 left'>
<div class='form-group'>
<label for='uname'>kingdom</label>
<!-- <input type='text' class='form-control' name='kingdom' value ='Animalia' placeholder='Animalia' > -->
<select class="form-control" name='kingdom' id="mainChoice">
<option>Choose one</option>
<option>Animalia</option>
<option>Plantae</option>
</select>
<div class='valid-feedback'>Valid.</div>
<div class='invalid-feedback'>Please fill out this field.</div>
</div>
</div>
<div class='col-12 left' id="firstChoice">
<div class='form-group'>
<label for='uname'>Options for Animalia</label>
<!-- <input type='text' class='form-control' name='phylum' value ='Chordata' placeholder='Chordata' > -->
<select class="form-control" name='phylum'>
<option>Chordata</option>
<option>Annelid</option>
<option>Arthropod</option>
<option>Bryozoa</option>
<option>Cnidaria</option>
<option>Echinoderm</option>
</select>
<div class='valid-feedback'>Valid.</div>
<div class='invalid-feedback'>Please fill out this field.</div>
</div>
</div>
<div class='col-12 left' id="secondChoice">
<div class='form-group'>
<label for='uname'>Options for Plantae</label>
<!-- <input type='text' class='form-control' name='phylum' value ='Chordata' placeholder='Chordata' > -->
<select class="form-control" name='phylum'>
<option>Mollusc</option>
<option>Nematode</option>
<option>Platyhelminthes</option>
<option>Rotifer</option>
<option>Sponge</option>
</select>
<div class='valid-feedback'>Valid.</div>
<div class='invalid-feedback'>Please fill out this field.</div>
</div>
</div>
It shows like this on my side. I use bootstrap 4
Looks like this when loading
When choosing Animalia
When choosing Plantae

Last-child not working inside iteration of div

In browser, the HTML is generated dynamically and is rendered as
<div id="dynamic-relationship-details">
<div id="count-status0" class="relationship-container form-group">
<div class="col-sm-1"></div>
<div class="col-sm-2">
<select id="relationship-type0" class="form-control"><option value="">Select Relationship</option><option value="Father">Father</option><option value="Mother">Mother</option><option value="Brother">Brother</option><option value="Sister">Sister</option><option value="Spouse">Spouse</option><option value="Guardian">Guardian</option></select>
</div>
<div class="col-sm-3">
<input type="text" name="relationship-type-name0" id="relationship-type-name0" class="form-control" placeholder="Name"></div><div class="col-sm-2"><input type="text" name="relationship-type-contact0" id="relationship-type-contact0" class="form-control" placeholder="Contact Number">
</div>
<button value="count-status0" class="remove-relationship-field btn btn-danger"><i class="fa fa-trash"></i></button>
</div><div id="count-status1" class="relationship-container form-group">
<div class="col-sm-1"></div>
<div class="col-sm-2">
<select id="relationship-type1" class="form-control"><option value="">Select Relationship</option><option value="Father">Father</option><option value="Mother">Mother</option><option value="Brother">Brother</option><option value="Sister">Sister</option><option value="Spouse">Spouse</option><option value="Guardian">Guardian</option></select>
</div>
<div class="col-sm-3">
<input type="text" name="relationship-type-name1" id="relationship-type-name1" class="form-control" placeholder="Name"></div><div class="col-sm-2"><input type="text" name="relationship-type-contact1" id="relationship-type-contact1" class="form-control" placeholder="Contact Number">
</div>
<button value="count-status1" class="remove-relationship-field btn btn-danger"><i class="fa fa-trash"></i></button>
</div>
</div>
The code is
// Relationship details Array
$(".relationship-container").each(function(i, obj) {
var $this = $(this);
$this.find("select").each(function() {
var relationshipTypeValue = $(this).val();
var relationshipName =$this.find("input[type=text]:first-child").val();
var relationshipContactNumber =$this.find("input[type=text]:last-child").val();
var innerRelationshipArray = {};
innerRelationshipArray = {
relationshipTypeValue: relationshipTypeValue,
relationshipName: relationshipName,
relationshipContactNumber: relationshipContactNumber
};
relationship_details_array.push(innerRelationshipArray);
});
});
I am trying to fetch values of contact numbers i.e with id's relationship-type-contact(n) values in the line "
var relationshipContactNumber =$this.find("input[type=text]:last-child").val();"
This is fetching values of first-child textboxes in the variable relationshipContactNumber in the loop.
Please help !!!
This should work, use the .first() and .last() selectors.
Another way, if you have access to alter the HTML, is to add class names for the input fields and select them by using that instead.
function getData() {
var relationship_details_array = [];
// Relationship details Array
$(".relationship-container").each(function(i, obj) {
var $this = $(this);
$this.find("select").each(function() {
var relationshipTypeValue = $(this).val();
var relationshipName = $this.find("input[type=text]").first().val();
var relationshipContactNumber = $this.find("input[type=text]").last().val();
var innerRelationshipArray = {};
innerRelationshipArray = {
relationshipTypeValue: relationshipTypeValue,
relationshipName: relationshipName,
relationshipContactNumber: relationshipContactNumber
};
relationship_details_array.push(innerRelationshipArray);
});
});
console.log(relationship_details_array);
}
$("#getData").on("click", getData);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="getData">Show data in console log</button>
<div id="dynamic-relationship-details">
<div id="count-status0" class="relationship-container form-group">
<div class="col-sm-1"></div>
<div class="col-sm-2">
<select id="relationship-type0" class="form-control">
<option value="">Select Relationship</option>
<option value="Father">Father</option>
<option value="Mother" selected>Mother</option>
<option value="Brother">Brother</option>
<option value="Sister">Sister</option>
<option value="Spouse">Spouse</option>
<option value="Guardian">Guardian</option>
</select>
</div>
<div class="col-sm-3">
<input type="text" name="relationship-type-name0" id="relationship-type-name0" class="form-control" value="Mommy" placeholder="Name">
</div>
<div class="col-sm-2">
<input type="text" name="relationship-type-contact0" id="relationship-type-contact0" class="form-control" value="1234" placeholder="Contact Number">
</div>
</div>
<div id="count-status1" class="relationship-container form-group">
<div class="col-sm-1"></div>
<div class="col-sm-2">
<select id="relationship-type1" class="form-control">
<option value="">Select Relationship</option>
<option value="Father" selected>Father</option>
<option value="Mother">Mother</option>
<option value="Brother">Brother</option>
<option value="Sister">Sister</option>
<option value="Spouse">Spouse</option>
<option value="Guardian">Guardian</option>
</select>
</div>
<div class="col-sm-3">
<input type="text" name="relationship-type-name1" id="relationship-type-name1" class="form-control" value="Daddy" placeholder="Name">
</div>
<div class="col-sm-2">
<input type="text" name="relationship-type-contact1" id="relationship-type-contact1" class="form-control" value="5678" placeholder="Contact Number">
</div>
</div>
</div>

Jquery Chained multiple not working

Using Jquery chained module, chained select works but with multiple parents doesn't work.
I tried to remove bootstrap, validator, bootcomplete ... without success.
I also tried with other names and values .
Can someone help me ? Thanks.
<form class="form-horizontal" id="formulaire" role="form" data-toggle="validator"">
<hr/>
<header class="row" style="margin-bottom: 20px;">
<div class="col-md-12"><h3 class="text-center">FORMATION</h2></div>
</header>
<div class="row">
<div class="col-md-4 form-group">
<label for="formation" class="col-md-4 control-label">Intitulé de la formation<span style="color: red">*</span> :</label>
<div class="col-md-8">
<select id="formation" class="form-control" name="formation" required >
<option value=""></option>
<option value="1">BTS Assistant Manager</option>
<option value="2">Gestionnaire des ressources humaines</option>
</select>
<div class="help-block with-errors"></div></div>
</div>
<div class="col-md-4 form-group">
<label for="niveau" class="col-md-4 control-label">Année<span style="color: red">*</span> :</label>
<div class="col-md-8">
<select id="niveau" class="form-control" name="niveau" required >
<option value=""></option>
<option class="1" value="1">BTS 1</option>
<option class="1" value="2">BTS 2</option>
<option class="2" value="5">BAC+3</option>
</select>
<div class="help-block with-errors"></div></div>
</div>
<div class="col-md-4 form-group">
<label for="sect" class="col-md-4 control-label">Section<span style="color: red">*</span> :</label>
<div class="col-md-8">
<select id="section" class="form-control" name="section" required >
<option value=""></option>
<option class="1\1" value="1">S1</option>
<option class="1\1" value="2">S2</option>
<option class="1\1" value="3">S3</option>
<option class="1\2" value="1">S1</option>
<option class="2\5" value="1">S1</option>
<option class="2\5" value="2">S2</option>
</select>
<div class="help-block with-errors"></div></div>
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">Envoyer</button>
</div>
</form>
</div><!-- /.container -->
<script type="text/javascript" src="http://127.0.0.1/assets/js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="http://127.0.0.1/assets/js/bootstrap.js"></script>
<script type="text/javascript" src="http://127.0.0.1/assets/js/validator.min.js"></script>
<script type="text/javascript" src="http://127.0.0.1/assets/js/jquery.bootcomplete.js"></script>
<script type="text/javascript" src="http://127.0.0.1/assets/js/jquery.chained.min.js"></script>
<script type="text/javascript">
$('#etudiant_adresse_code_postal').bootcomplete(
{
url:'../ajax/codepostal/',
method:'post',
minLength:2
}
);
$('#etudiant_adresse_ville').bootcomplete(
{
url:'../ajax/commune/',
minLength : 0,
method:'post',
formParams:
{
'cp' : $('#etudiant_adresse_code_postal')
}
}
);
$('#niveau').chained('#formation');
$("#section").chained("#formation, #niveau");
</script>

Jquery get value of select in div above

I have the following HTML form. I'm trying to get the value of the .plotNumber select and also the value of the sub_category field.
Note: The user is able to add new rows to the form, so there may be multiple blocks of <div class="standard-row add-admin-row input-row">.
My code so far (which works) apart from the plot and category is:
$('.wrapper').on('input', '.inp-calculate', function(e)
{
var input = $(this);
//var plot = input.val(); // get plot id
//var category = input.val(); // get category id
var units = input.val(); // get units
$.post('checkUnits.php', {
plot_id: plot,
category_id: category,
units: units
}, function(data) {
var data = $.parseJSON(data);
if(data[0] !== true) {
alert(data);
input.focus();
input.val('');
}
});
});
I have tried the following solutions which do not work:
$(this).parent().siblings().find('.plotNumber').val();
HTML Code:
<form class="commentForm add-project-form clearfix" id="addWorksheet">
<div class="box box3 clearfix">
<div id="messages"></div>
<div class="sectionbox">
<fieldset class="clonable">
<legend><span>Worksheet</span></legend>
<p class="error-summary error-message"></p>
<div class="standard-row add-admin-row input-row">
<label class="ib">
<span class="label-stacked">Employee</span>
<span class="plain-select">
<select class="inp" data-myname="worksheet[*][employee]" name="employee">
<option value="">Select one...</option>
<option value="1">Test 1</option>
</select>
</span>
</label>
<label class="ib">
<span class="label-stacked">Week ending</span>
<span class="plain-select">
<select class="inp" data-myname="worksheet[*][week_ending]" name="week_ending">
<option value="">Select one...</option>
<option value="Sunday 22 Nov 2015">Sunday 22 Nov 2015</option>
</select>
</span>
</label>
<label class="ib">
<span class="label-stacked">Project</span>
<span class="plain-select">
<select class="inp project" data-myname="worksheet[*][project]" name="project">
<option value="">Select one...</option>
<option value="2">TEST</option>
</select>
</span>
</label>
</div>
<div class="standard-row wsheet-row input-row">
<label class="ib plothead ">
<span class="label-stacked">Plot Number</span>
<span class="plain-select">
<select class="inp plotNumber plotheadclone" data-myname="worksheet[*][plots][!][plot_number]" name="plot_number">
<option value="">Select one...</option>
<option value="6672">444</option>
<option value="6673">555</option>
<option value="6674">666</option>
</select>
</span>
</label>
<div class="plot-offset clearfix">
<div class="standard-row wsheet-row input-row" id="5438">
<label class="ib">
<span class="label-stacked">Category</span>
<select class="inp inp220 inp-disabled" readonly="" data-myname="worksheet[*][plots][!][sub_category][]" name="sub_category">
<option value="5438">NON LABOUR</option>
</select>
</label>
<label class="ib"><span class="label-stacked">Total</span>
<input class="inp inp110 data-addup-total inp-calculate" data-myname="worksheet[*][plots][!][total_cost][]" name="total_cost" value="0.00" type="text">
<input data-myname="worksheet[*][plots][!][price][]" name="price" value="" type="hidden">
<input data-myname="worksheet[*][plots][!][number_units][]" name="number_units" value="" type="hidden">
</label>
</div>
<div class="standard-row wsheet-row input-row" id="5240">
<label class="ib">
<span class="label-stacked">Category</span>
<select class="inp inp220 inp-disabled" readonly="" data-myname="worksheet[*][plots][!][sub_category][]" name="sub_category">
<option value="5240">1ST FIX CYLINDER</option>
</select>
</label>
<label class="ib">
<span class="label-stacked">Price</span>
<input class="inp inp110 inp-disabled" readonly="" data-myname="worksheet[*][plots][!][price][]" name="price" value="£40.00" type="text"></label>
<label class="ib"> <span class="label-stacked">Number</span>
<input class="inp inp55 inp-calculate" data-myname="worksheet[*][plots][!][number_units][]" name="number_units" value="" type="text"></label><label class="ib"><span class="label-stacked">Total</span><input class="inp inp110 inp-disabled data-addup-total" readonly="" data-myname="worksheet[*][plots][!][total_cost][]" name="total_cost" value="£0.00" type="text"></label>
</div>
<div class="wsheet-labour-total">LABOUR: £80.00</div>
<div class="wsheet-nonlabour-total">NON LABOUR: £0.00</div>
<div class="wsheet-final-total">TOTAL CLAIM: £80.00</div>
</div>
</div>
</fieldset>
<div class="reveal-plot showingPlot"> Choose another plot</div>
</div>
<!-- end section box -->
<hr class="divider">
<div class="clonable">
<div class="clone empty"></div>
<div class="cb">
<div>
<p class="add remove-data"><i class="sprite minus2"></i> <span>Remove last row</span></p>
</div>
<div>
<p class="add add-data add-another-worksheet-employee"><i class="sprite plus2"></i> <span>Add another worksheet</span></p>
</div>
</div>
</div>
<div class="save-submit">
<button class="button" type="submit" data-url="addWorksheet.php" data-id="#addWorksheet">Submit</button>
</div>
</div>
<!-- end box -->
</form>
Can someone help find the solution?
You're not traversing far enough up the DOM with .parent() since the select is contained in a <div> three levels above .inp-calculate. How about:
$(this).closest('fieldset').find('.plotNumber').val();
Try like following. Hope this will help you.
var container=$(this).closest('.standard-row.add-admin-row.input-row');
var plot=container.find('.plotNumber').val();
var category=container.find('.inp220').val();

Categories