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>
Related
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.
I'm trying to update the value of selectbox option after click. It should subtract the selected value to itself.
<div class="pull-left col-xs-12 col-sm-4 col-md-4">
<label for="rooms" style="color:black">No. of rooms: </label>
<select required tabindex="10" id="selectBoxStandard" name="n_rooms">
<option value="0">0</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 class="button-style-1" style="padding-bottom:80px" style="padding-bottom:40px"><a href="javascript:standardRoom()" ><i class="fa fa-calendar"></i><span class="mobile-visibility">BOOK
</span></a></div>
standardRoom function
function standardRoom()
{
$('#selectBoxStandard option').val(Number($("#selectBoxStandard").val()) - Number($("#selectBoxStandard option").val()));
}
If the selected value is 3 after click the remaining value should update to:
<div class="pull-left col-xs-12 col-sm-4 col-md-4">
<label for="rooms" style="color:black">No. of rooms: </label>
<select required tabindex="10" id="selectBoxStandard" name="n_rooms">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
To remove last childs from #selectBoxStandard based on option value:
$('button').on('click', standardRoom);
function standardRoom() {
$('#selectBoxStandard').find("option:nth-last-child(-n+" + $('#selectBoxStandard').val() + ")").remove();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="pull-left col-xs-12 col-sm-4 col-md-4">
<label for="rooms" style="color:black">No. of rooms: </label>
<select required tabindex="10" id="selectBoxStandard" name="n_rooms">
<option value="0">0</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>
<button>Update</button>
</div>
This will work but could probably be done a bit easier or better:
function standardRoom(){
var last_option = $('#selectBoxStandard option:last-child').val();
var selected_option = $('#selectBoxStandard').val();
$("#selectBoxStandard option").each(function() {
if($(this).val() > (last_option - selected_option)){
$(this).remove();
}
});
}
add this js
let total = 7
function changed(){
let selBox = document.getElementById('selectBoxStandard');
let value = selBox.value;
//remove all options
while(selBox.children.length > 0) selBox.removeChild(selBox.children[0]);
//add new options according to value;
for(let i = 0;i<7-value+1;i++){
selBox.innerHTML += `<option value="${i}">${i}</option>`
}
//resets value
selBox.value = value;
}
add onchange on ur select
<select onchange="changed()" required tabindex="10" id="selectBoxStandard" name="n_rooms">
if you want to change on btn click use this
<div onclick="changed()" class="button-style-1" style="padding-bottom:80px" style="padding-bottom:40px"><a href="javascript:standardRoom()" ><i class="fa fa-calendar"></i><span class="mobile-visibility">BOOK
</span></a></div>
I have a form has a lot of selects inside divs so i want when the user submits the form if there are two div or more have the
same value, form example the first has this value : 1 one and the third has
the same value so don't submit and return false, so is there any way javascript or jquery can help me to do that?
$("form").submit(function() {
alert("2 div or more have the same value, please change them");
return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div>
<select class="number">
<option value="">select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select class="letter">
<option value="">select</option>
<option value="one">one</option>
<option value="two">two</option>
<option value="three">three</option>
</select>
</div>
<div>
<select class="number">
<option value="">select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select class="letter">
<option value="">select</option>
<option value="one">one</option>
<option value="two">two</option>
<option value="three">three</option>
</select>
</div>
<div>
<select class="number">
<option value="">select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select class="letter">
<option value="">select</option>
<option value="one">one</option>
<option value="two">two</option>
<option value="three">three</option>
</select>
</div>
<input type="submit"/>
</form>
You can try this javascript code keeping your html
$("form").submit(function(event)
{
var selects = $('select');
selects.each(function(i,select1){
var found = false;
selects.each(function(j,select2){
if(i!=j && select1.value == select2.value){
alert("2 div or more have the same value, please change them");
found = true;
event.preventDefault();
return false;
}
});
if(found){
return false;
}
});
});
I have three dropdowns:
<form name="myForm" ng-submit="save(myForm.$valid)" novalidate="novalidate">
<div class="form-group">
<label>Values:</label>
<label>First</label>
<select ng-model="a.values[0]" ng-change="check()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<label>Second</label>
<select ng-model="a.values[1]" ng-change="check()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<label>Third</label>
<select ng-model="a.values[2]" ng-change="check()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3'>3</option>
<option value="4">4</option>
</select>
</div>
<button type="submit" class="btn btn-success">Save </button>
On these dropdowns I applied a filter:-
scope.check = function() {
if (_.uniq(scope.a.values).length !== scope.a.values.length) {
scope.notify("error", "Please set unique values");
}
};
What I want is if the values on dropdowns are not unique then on save button it shows error. Please note that these are not required fields so validation related to that is not required. Only if user set same values then only on save it shows error.
Bootstrap 3 validation is not work properly in select. html code is
<div class="control-group">
<label class="control-label">Select std.<span class="f_req">*</span></label>
<div class="controls">
<select name="std" class="span5">
<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>
</select>
</div>
</div>
And javascript is rules: { std: { required : true } }
Please help me.. thanks in advance