We Keep Coding

Select options with the same CSS class and jQuery

I am new to jQuery/JS and I have this problem: You can run my code and see that count is not correct:
$('.form-control').change(function() {
countTotal();
});
$('.form-control').change(function() {
countTotal();
});
function countTotal() {
var level1 = parseInt($(".form-control :selected").val(), 10);
var level2 = parseInt($(".form-control :selected").val(), 10);
var total = level1 * level1;
$(".form-group > #riz").val(total);
$(".form-group > #riz").attr("disabled", true);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<div class="form-group">
<select class="form-control">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div class="form-group">
<select class="form-control">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div class="form-group">
<input id="riz">
</div>
<hr>
<div class="form-group">
<select class="form-control">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div class="form-group">
<select class="form-control">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div class="form-group">
<input id="riz">
</div>
My HTML has to stay the same, I have to find some way to jQuery work in this example and keep the HTML structure the same. If you have any idea how to solve this, feel free to comment or share code ideas.
I appreciate your help!

There is multiple problems with your code.
First, you are using the same id multiple times. ID must be unique.
Second, think this is wrong var total = level1 * level1; should be var total = level1 * level2;
Third, you don't need to use :selected in $(".form-control :selected").val(), since $(".form-control").val() will always take the value of the selected option, if your element is a select.
Now I have changed both your html and jquery so it will work to your requirement.
Demo
$('.form-control').change(function() {
countTotal($(this));
});
function countTotal(ele) {
var level1 = parseInt(ele.val() || 0, 10);
var level2 = parseInt(ele.siblings(".form-control").val() || 0, 10);
var total = level1 * level2;
ele.closest(".form-group").next().find(".riz").val(total);
ele.closest(".form-group").next().find(".riz").attr("disabled", true);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<div class="form-group">
<select class="form-control">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select class="form-control">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div class="form-group">
<input class="riz">
</div>
<hr>
<div class="form-group">
<select class="form-control">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select class="form-control">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div class="form-group">
<input class="riz">
</div>

Javascript dynamic insert form row by user

i have this problem:
I've created into my form a part of it where users can choose to insert from 0 to 10 row.
Each row contains 3 input.
Html code is:
<div class="form-row">
<div class="form-group col-md-3">
<label for="inputCity">Mesi a carico</label>
<select name="mesi_carico[]" id="inputState" class="form-control">
<option value="12">12</option>
<option value="11">11</option>
<option value="10">10</option>
<option value="9">9</option>
<option value="8">8</option>
<option value="7">7</option>
<option value="6">6</option>
<option value="5">5</option>
<option value="4">4</option>
<option value="3">3</option>
<option value="2">2</option>
<option value="1">1</option>
</select>
</div>
<div class="form-group col-md-3">
<label for="inputState">Min 3 anni?</label>
<select name="min_3_anni[]" id="inputState" class="form-control">
<option value="No">No</option>
<option value="Si">Si</option>
</select>
</div>
<div class="form-group col-md-3">
<label for="inputZip">% Detr. Spettante</label>
<select name="perc_carico[]" id="inputState" class="form-control">
<option value="100">100%</option>
<option value="50">50%</option>
</select>
</div>
</div>
Here my JSCode
$(document).ready(function() {
var max_fields = 10;
var wrapper = $(".container1");
var add_button = $(".add_form_field");
var x = 1;
$(add_button).click(function(e) {
e.preventDefault();
if (x < max_fields) {
x++;
$(wrapper).append('<div><div class="form-row">
<div class="form-group col-md-3">
<label for="inputCity">Mesi a carico</label>
<select name="mesi_carico[]" id="inputState" class="form-control">
<option value="12">12</option>
<option value="11">11</option>
<option value="10">10</option>
<option value="9">9</option>
<option value="8">8</option>
<option value="7">7</option>
<option value="6">6</option>
<option value="5">5</option>
<option value="4">4</option>
<option value="3">3</option>
<option value="2">2</option>
<option value="1">1</option>
</select>
</div>
<div class="form-group col-md-3">
<label for="inputState">Min 3 anni?</label>
<select name="min_3_anni[]" id="inputState" class="form-control">
<option value="No">No</option>
<option value="Si">Si</option>
</select>
</div>
<div class="form-group col-md-3">
<label for="inputZip">% Detr. Spettante</label>
<select id="inputState" class="form-control">
<option value="100">100%</option>
<option value="50">50%</option>
</select>
</div>
</div>Delete</div>'); //add input box
} else {
alert('You Reached the limits')
}
});
$(wrapper).on("click", ".delete", function(e) {
e.preventDefault();
$(this).parent('div').remove();
x--;
})
});
Unfortunately, it doesn't work.
Where is the issue?
And, I need to transfer the value array like array[0] array[1] array [2] ecc ecc... I'm not sure to do it.
Thanks for your help.

How To Control Input Type Dropdown Select Options Menu With Jquery

I am creating a web site. In this web site , there is a form. I have added 3 dropdown menus in this form like below. Now I want to when someone selects the number 5 from Adults menu , I want to show number 5 in the infants menu. And also I want t keep Adults + Children = 9. Then if this Total is below than 9 , I want to show that extra number in the infants menu. I mean like this ,
Adults + Children = 9
Adults = 5 and infants = 5
But , Adults + Children = 8
Adults = 5 , Children = 3 , it means there is still 1.
Now I want to show that 1 with infants , 1 + 5 = 6.
look below snippet
$(document).ready(function() {
var adults = parseFloat($('#adults').val());
var children = parseFloat($('#children').val());
var infants = $('#infants').val();
var Total = adults + children;
//$("#errorModal").html(Total);
var totalAdultChild = 9;
$('#adults').change(function() {
var adultValue = this.value;
if (this.value > 8) {
$("#children").prop('disabled', true);
} else {
$("#children").prop('disabled', false);
$('#children option').each(function(index, element) {
if ((totalAdultChild - adultValue) < this.value)
$(this).hide();
else
$(this).show();
});
$('#infants option').each(function(index, element) {
if (adultValue < this.value)
$(this).hide();
else
$(this).show();
});
}
});
//alert(Total);
});
<form class="form-horizontal" method="POST" action="#" enctype="multipart/form-data" id="signupForm">
<div class="col-md-4 col-sm-12 hero-feature">
<!-- Start Of The Col Class -->
Adults :
<select name="adults" class="form-control" id="adults">
<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>
<option value="8">8</option>
<option value="9">9</option>
</select> <br>
</div>
<div class="col-md-4 col-sm-12 hero-feature">
<!-- Start Of The Col Class -->
Children :
<select name="children" class="form-control" id="children">
<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>
<option value="8">8</option>
<option value="9">9</option>
</select> <br>
</div>
<div class="col-md-4 col-sm-12 hero-feature">
<!-- Start Of The Col Class -->
Children :
<select name="infants" class="form-control" id="infants">
<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>
<option value="8">8</option>
<option value="9">9</option>
</select> <br>
</div>
Search Flight Data
</form>
No Answer ??

Here is the solution as per your explanation:
$('#children').change(function() {
var children = $('#children').val();
var infants = $('#infants').val();
var adults = $('#adults').val();
var total_pending;
if((parseInt(adults) + parseInt(children)) < totalAdultChild){
total_pending = totalAdultChild - (parseInt(adults) + parseInt(children));
new_infants = parseInt(infants) + parseInt(total_pending);
$('#infants').val(new_infants);
}
});
});
DEMO: https://codepen.io/creativedev/pen/aKaJxW

Get Outer Html of a Click event of a Class and Check Where Another div with Specific Exists or Not

Code In Loop:
<div id="ActualDiv#(t)" class="MemberActualDiv">
<select name="MemberCountType#(t)" id="#("MemberCountType" + t)" class="MemberCountType form-control ">
<option selected="selected" value="">--Select--</option>
<option value="<">Less Than (≤)</option>
<option value=">">Greater Than (≥)</option>
<option value="=">Equal</option>
</select>
<select name="MemberCount#(t)" id="#("MemberCount" + t)" class="MemberCount form-control ">
<option selected="selected" value="">--Select--</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="8">7 Or More Than 7</option>
</select>
<button id="#("AddMore" + t)" class="AddMoreButton AddMoreButton0 btn btn-blue" type="button">Add More +</button>
</div>
JavaScript:
$(".AddMoreButton").click(function () {
//Check If Existing is being Added
var classname = $(this).attr("id");//.html();
var id1 = classname.replace("AddMore", "");
alert(classname);
classname = $('#AddMore' + id1).outerHTML();
alert(classname);
});
Dynamic Code Added Using Javascript
<div id="MemberDescriptionAdd1" class="MemberDescriptionAdd1" style="display:none;">
<select name="MemberCountTypeX" id="MemberCountTypeX" class="MemberCountTypeX form-control ">
<option selected="selected" value="">Condition</option>
<option value="<">Less Than (≤)</option>
<option value=">">Greater Than (≥)</option>
<option value="=">Equal</option>
</select>
<select name="MemberCountX" id="MemberCountX" class="MemberCountX form-control ">
<option selected="selected" value="">Members</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="8">7 Or More Than 7</option>
</select>
<button id="RemoveX" class="RemoveButtonX btn btn-blue" type="button">Remove</button>
</div>
Actual View
What Actually Happening Is On AddMore Button i want to added the Dynamic Div with incremental Id and Remove the Div on Remove Click
So What I'm trying to do is get the outer div of the button click AddMore and then will try to find class/id if exists.
If there is any other better Id I'm open to them as well
Dynamic Adding Jquery:
//Inside the Above Jquery Itself
var adddiv = $('#MemberCountDiv');
alert(adddiv.html());
var value = "MemberDescriptionAdd" + id;
adddiv.find('.MemberDescriptionAdd').attr('id', value);
adddiv.find('.MemberDescriptionAdd').attr('class', value);
alert(adddiv.html());
var divname = $('#ActualDiv' + id).append(adddiv.html());

jQuery if Form with Selects are Filled out, show div

I am look for a way to make it so that when the user selects an item form all the select (for which the value of the option is not nil) the div with id "js-market" is shown.
This is my html code:
<form class="js-chose">
<div class="col-md-6 col-xm-12">
<div class="form-group js-select">
<label>Select a Market</label>
<select class="form-control">
<option value='' disabled selected>Chose a Market</option>
<%Item.all.each do |item|%>
<option value="<%=item.id%>"><%=item.name.capitalize%></option>
<%end%>
</select>
</div>
</div>
<div class="col-md-6 col-xm-12">
<div class="form-group">
<label>Enter Market with:</label>
<select class="form-control js-select">
<option value='' disabled selected>Chose a Company</option>
<%Company.where(user_id: current_user.id).each do |company|%>
<option value="<%=company.id%>"><%=company.name%></option>
<%end%>
</select>
</div>
</div>
</form>
In short I need to make jQuery show the div with id="js-market" when both selects have been filled by the user and get the values of the selected items and assign them to a variable.
Thank you. Please let me know if I wasn't clear enough.

Example that works with multiple select elements
Link to jsfiddle
var counter = $('.select').length;
$('.select').change(function() {
$.each($('.select'),function(i,e) {
var t = $(this);
if (t.val() == undefined || t.val() == '') {
$('#js-market').fadeOut();
return;
}
if (i+1 == counter) {
$('#js-market').fadeIn();
}
});
});
#js-market {
display: none;
}
<select class="select">
<option value="">No Value</option>
<option value="value1">Value 1</option>
<option value="value2">Value 2</option>
<option value="value3">Value 3</option>
<option value="value1">Value 4</option>
</select>
<select class="select">
<option value="">No Value</option>
<option value="value1">Value 1</option>
<option value="value2">Value 2</option>
<option value="value3">Value 3</option>
<option value="value1">Value 4</option>
</select>
<select class="select">
<option value="">No Value</option>
<option value="value1">Value 1</option>
<option value="value2">Value 2</option>
<option value="value3">Value 3</option>
<option value="value1">Value 4</option>
</select>
<div id="js-market">Lorem ipsum</div>

See this fiddle
You can do this by onchange() event in javascript. In the fiddle specified above, what I do is that, I've placed 2 select boxes and a div with id demo will be shown only if two of the select boxes are selected.
HTML
<select id="mySelect1" onchange="myFunction()">
<option value="0">--Select--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select id="mySelect2" onchange="myFunction()">
<option value="0">--Select--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<div id="demo"></div>
JS
function myFunction() {
if (document.getElementById("mySelect1").value > 0 && document.getElementById("mySelect2").value > 0) {
document.getElementById("demo").style.display = "block";
} else document.getElementById("demo").style.display = "none";
}