I have a table editable with an Invoice calculator. I have a small issue in my select editable. If you click on IVA 21 % you notice that you can select the option IVA none, i need that once i selected the option none in my select editable, it does not automatically calculate my IVA. I do not how to manage it, or setting an on change jQuery or a submit, in both cases i was not able to do it!.
The calculator works, if you select no Iva and then you clone a row clicking on +, the IVA is not calculated but i want to achieve it the same once i select the option NO IVA.
This the code :
if ($('.editable_selectiva').text() === "NO IVA") {
$('#total').html(0);
$('#total1').html(total);
}
else {
$('#total').html(total*0.21);
$('#total1').html(total*1.21);
}
})
}
Hope the explanation is clear and you can help me out. Thanks
Bind a change event to the select. Add this code
$('p.editable_selectiva').change(function() {
tally('p#subtotal');
tally('p#total');
});
Try this one
$('.editable_selectiva select').change(function(){
tally('p#subtotal');
tally('p#total');
});
Related
I have two select boxes. One of the boxes takes what the other one has selected and uses it as a filter for itself. Sometimes that filter only leaves one option. I am looking for a way to auto select that option only if it is the only one in the list.
If this is too vague I can put in an example.
Thank you in advance.
This is not an Angular related question. But here is the answer using jQuery:
var numitems=$('#myselect').children('option').length;
if(numitems == 1) {
$("#myselect option:first").attr('selected','selected'); // just select the first
}
You can also select by value if you know the value
$('[name=myselect]').val( 3 ); // Select by a value== 3
You can also select by text.
Although this may sound dead simple, the matter is complicated by the fact I can only use the change() trigger on the select element. I am using the 'Chosen' jQuery plugin which basically modifies the multi select box on the page.
Whenever a item is selected or unselected, the plugin triggers the change event on the original select element. I am obviously able to get all the unselected items, but I need the one that was just unselected that caused the change event to trigger.
So I have the following function, the bit in the middle is what I need to capture the item that was just unselected. #cho is the id of the original select element.
$("#cho").chosen().change( function() {
// Need code here to capture what item was just unselected, if any...
})
Store value when the user changes the the check box.
var preVal;
$("input[name='g']").on("change",function(e){
if(preVal){
alert(preVal);
}
preVal=$(this).val();
});
Check this http://jsfiddle.net/fcpfm/
1.Use hidden field
2.Hidden field value initially empty.
3.Onchange put the selected value in a hidden field.
4.If onchange is happening again , hidden field value is the previously selected value.
$("#cho").chosen().change( function() {
var hidvalue = $('#hiddenfield').val();
if (hidvalue ) {
//Get the previously selected ids
var prev_ids = $('#hiddenfield').val();
//Then Update currently selected ids
$('#hiddenfield').val('currently selected ids');
} else {
//Update currently selected ids
$('#hiddenfield').val('currently selected ids');
}
})
Try using a variable to store the selected item. Update it each time when item changed. I cant add comment. That is why I am posting it as an answer.
At the moment my code clones 3 dropdowns everytime you click the add button.
I managed to get it to copy the row exactly because before, the first dropdown would reset by itself but the other two would not so I was just wondering how to reset all 3 dropdowns?
It is easiest to see in this JSFiddle:
http://jsfiddle.net/jydqK/7/
So, if you change the first dropdown to agent and then click the + you will see the second row appears duplicated whereas I would like it to reset to tags, operands and values.
Any help greatly appreciated.
You can use removeAttr to remove selected attribute and then fire a change() event.
In your case:
dropdownclone.find('select.tags option:selected').removeAttr('selected');
dropdownclone.find('select.tags option:first').attr('selected','selected');
dropdownclone.find('select.tags').trigger('change');
Modified example: http://jsfiddle.net/ZF3mc/2/
If I understood your question, you want the duplicated row of selects to reset their values.
In this case you can just remove this:
dropdownclone.find('select').each(function(index, item) {
//set new select to value of old select
$(item).val( $dropdownSelects.eq(index).val() );
});
and replace it with:
dropdownclone.find('option').attr('selected', false);
Find all dropdowns in your clone. For each dropdown, check every option tags for a selected attribute and remove it. Something like this:
clone.find('select').each(function() {
$(this).find('option').each(function() {
$(this).removeAttr('selected');
});
});
Or better yet, find only the selected option tags using :selected filter before removing.
I am trying to add javascript validation to a bunch of check boxes, basically what I want is as soon as the user has selected 3 tickboxes, it should disable all of the tickboxes except the three that were ticked.
How could I go about doing that?
Thanx in advance!
The following will disable the rest of the checkboxes if you select 3 of them, and also enable them once you uncheck one of the three selected..
$(':checkbox').click(
function(){
var selected = $(':checkbox:checked').length;
if (selected == 3)
{
$(':checkbox:not(:checked)').attr('disabled',true);
}
else
{
$(':checkbox:not(:checked)').attr('disabled',false);
}
}
);
Live demo
Have on onclick handler that when a checkbox is clicked it ups a counter by one if it is unchecked it decreases the count. After raising the count, test to see if it is three. Then probably the easiest method is to either save the ids of the three checked boxes or save them in the previous step. Then change the click event to return true only if the ids match the saved ids.
Sorry I don't have time right now to actually write up any code. Hopefully this will get you started.
jQuery
$("#container :checkbox").click(function(){
if ($("#container :checkbox").length >= 3) {
$("#container :checkbox").attr("disabled", "disabled");
}
});
I am trying to bring up a menu when any of the checkbox is selected, as you can see in screenshot below, it shows the number of selections and the menu also disappears when none is select.
I am able to bring up the menu with this code
$("input[name='id[]']").focus(function(){
$("#menu").fadeIn();
});
However, i dont know how to hide it when the checkboxes are unselected and how to count number of selections.
Thank You.
When you check a checkbox, the focus or click event will be triggered. You can count the checked checkboxes with
$("input:checked").length;
If you use that number to hide your menu it should be possible:
$("input[name='id[]']").click(function(){
if($("input:checked").length > 0) { //checked boxes?
if($("#menu:visible").length == 0) { //menu not visible?
$("#menu").fadeIn();
}
} else {
$("#menu").fadeOut();
}
});
To count the number of selections you can use:
$("input[type='checkbox']:checked").length;
So..
$("input[type='checkbox']").click(function(){
if ($("input[type='checkbox']:checked").length < 1)
$("#menu").hide();
});
$("input[name='id[]']").focus(function(){
if ($(this).is(':checked')){
$("#menu").fadeIn();
}else{
$("#menu").fadeOut();
}
});
This should do what you need,
EDIT:
Your selector doesn't seem alright though. You should make it more specific.
for example:
if it starts with id[ you can do it in this way:
$("input[name^=id\\[]")
this will include all input fields their names starting with 'id[' and '\' this is for escaping this '['.
Hope it helps, Sinan.