I'm trying to get multiple of two textboxes on change of any of it. But cannot allow user to input manually so these 2 will be disabled and will be filled from dropdown.
Edit: If I change the value manually or atleast tab through the textboxes(when it's open to do that) it's working fine (But if I change .change to .keyup). But if I change the value of textbox s_wageperday on change of another dropdown list I'm not getting the multiple on the third box.
<?php
/*start getting Wage Amount amount*/
$script = <<<EOD
$(function() {
$("#totaldays").change(function() {
totalWage();
});
$("#salary-s_wageperday").change(function() {
totalWage();
});
var totalWage = function () {
var days = parseInt($("#totaldays").val());
var wagePerday = parseInt($("#salary-s_wagePerday").val());
var totalWage = (days * wagePerday);
if (isNaN(totalWage) || totalWage < 0 || totalWage > 1000000) {
totalWage = '';
}
$("#salary-s_totalwage").val(totalWage);
};
});
EOD;
$this->registerJs($script, View::POS_END);
/*end getting totalwage*/
?>
lets check on this fiddle https://jsfiddle.net/yg48wka5/.
and i think you have miss in typo that are
$("#salary-s_wagePerday") or $("#salary-s_wageperday")
what is the correct P or p.
sorry for my bad english.
i hope that will help you.
.change event only works if there a change on dropdown value, but you can trigger it using the $.trigger("change") method.
by the way are you using type="text", have you considered using type="hidden" since you don't want the value to be altered manually.
Hope you get some ideas here pal :)
EDITED
Hi there I'm confused with your post title so I made a changes. Do you mean "Get the product of textbox" right?
Kindly check this fiddle https://jsfiddle.net/jeorlie/ds5f7nrb/1/
You can see the
$.trigger("change")
method there
I hope this can be a help to you pal.
Related
I ran into a problem with my JQuery. I have been doing a calculator for certain items and quantity and originally made a popup .alert above the name and moved the whole row of items below it. To fix this problem I want to have a Twitter Bootstrap v3.0.3 popover triggered by the live calculation of the number of items times the price of one item.
What I want to do:
//Stone
$("#Stone").on('keyup',function(){
// alert('pressed')
var CostStone= $("#StonePrice").val() * $(this).val()
var CostStone2 = CostStone.toFixed(2);
$(".CostStone").html(" data-toggle='popover' ");
});
//End Stone
I know this won't work, but somehow I need someone to come up with a JQuery alternative for
data-toggle so that I can trigger the popover while typing in an input box.
If you want to see my original idea just to get an idea of what I'm talking aboutcheck out this Fiddle.
modify your javascript with this
//Stone
$("#Stone").on('keyup',function(){
var stoneprice = $("#StonePrice").val();
var currentprice = $(this).val();
var CostStone= Number(stoneprice) * Number(currentprice);
var CostStone2 = CostStone.toFixed(2);
$(".CostStone").html(" data-toggle='popover' ");
});
//End Stone
I have a script thats validating some form information. Currently it adds a CSS class of .error (adds red border) and also applies the shake effect when the input value is seen to be less than 1 character.
I also need to do this on various selects in the form if nothing has been selected. What would I need to do with the following code to get this to work please?
//check if inputs aren't empty
var fields = $('.validate');
var error = 0;
fields.each(function(){
var value = $(this).val();
if( value.length<1 || value==field_values[$(this).attr('id')] ) {
$(this).addClass('error');
$(this).effect("shake", { times:3 }, 50);
error++;
} else {
$(this).addClass('valid');
}
});
I have limited Javascript / Jquery knowledge and this is a modified script I found online. You can see it in action here: site, step 2 of the form is where you can find the selects.
you can check if a selection was made by checking if there is an option selected :
if ($("#mySelect option:selected").length){
//something has been selected
}
if (!$("#mySelect option:selected").length){
//nothing has been selected
}
You can use this jQuery validation plugin instead it will make ur life way easier specially with errors and error displaying..
http://jqueryvalidation.org/
I am having trouble getting the Billing Address to copy over the Shipping Address using jQuery. I have successfully done this using a plain-jane form with no custom jQuery elements. But when I add the custom UI to the checkbox, it seems to break the code. I have tried several code changes but none of them are working.
When a user clicks on "My billing address is the same as my shipping address", nothing is happening. Here is my jQuery code:
<script type="text/javascript">
$(document).ready(function(){
$('#check-address').click(function(){
if($('#check-address').attr('checked')){
$('#address-field1').val($('#address-field').val());
$('#city-field1').val($('#city-field').val());
$('#zip-field1').val($('#zip-field').val());
var state = $('#state-field option:selected').val();
$('#state-field1 option[value=' + state + ']').attr('selected','selected');
} else {
//Clear on uncheck
$('#address-field1').val("");
$('#city-field1').val("");
$('#zip-field1').val("");
$('#state-field1 option[value=Nothing]').attr('selected','selected');
};
});
});
</script>
Any help is greatly appreciated!
Demo of options
$('#check-address').attr('checked')
should could be
$('#check-address').is(':checked')
As pointed out in comments, there are many ways to skin this cat. http://jsfiddle.net/sRt6G/1/
this.checked seems to be the simplest.
You are using jquery 1.7 . You should use prop instead of attr
$('#check-address').prop('checked')
$(elem).attr('checked') // returned true (Boolean) prior to 1.6
$(elem).attr('checked') // now returns "checked" (string) versions after 1.6
$(elem).prop('checked') // now returns true (Boolean) versions after 1.6
The plugin you're using to prettify your checkbox (or whatever it does), is replacing the <input type="checkbox"/> with a div, and simulating events on the checkbox.
It doesn't propagate a click event, but it does propagate a change, so you should listen for that instead;
$('#check-address').change(/* function */);
To improve your code you might want to substitute the check for attr('checked') with prop('checked'), but your code will still work regardless. Reasons for this are outlined on the jQuery documentation for prop(); http://api.jquery.com/prop
It could be that you're trying to go on a click event of a checkbox. Have you tried:
$('#check-address').on('change', function (e) {...
and
if ($('#check-address').is(":checked")....
This might help too.
$('input[name=city\\[' + this.value + '\\]]').val($('input[name=city\\[1\\]]').val());
Demo
Fill out the form on top, then use the check boxes to copy the values of the fields.
It works with dynamically created fields. If the form is hard-coded, replace this.value with the index of the field.
you might wanna try the following code:
$("input.billingAddress").on("change",function(){
var val1 = $("input.street").val();
var val2 = $("input.suitNumber").val();
var val3 = $("input.city").val();
if(this.checked)
{
$("input.streetb").val(val1);
$("input.suitNumberb").val(val2);
$("input.cityb").val(val3);
}
else
{
$("input.streetb").val("");
$("input.suitNumberb").val("");
$("input.cityb").val("");
}
});
I am trying to make a form show/hide a submit button dependant on if all the radio elements have a selection - this is what i've got so far.. Any ideas what i'm doing wrong?
$(document).ready(function() {
$('#submit-btn').hide();
if ($(':radio:checked').length > 0) {//try reach selected radio here
$('#submit-btn').show();
}
});
var count = 0
$(':radio').each(function(){
count++;
});
if ($(':radio:checked').length == count) {
$('#submit-btn').show();
}
This might help your cause..!!
$('.toCheck').length == $('.toCheck:checked').length;
If that evaluates to true, then all input for that selector are checked! :)
This will return true if ANY radio element is checked, which is not what you want.
Unfortunately there is no quick way to deal with radio elements, since even if one is checked the others will not show as checked.
You'll have to manually loop over them.
I worked it out using Robin's snippet with some modification.
I didn't explain properly that each 'question' has a set of 5 radio buttons (my fault) - but the following code does what I need now.
Essentially the same as Robins except as each question has 5 radio boxes I divide the length by 5 and it works now! Thank you everyone :)
$(document).ready(function() {
$('#submit-btn').hide();
$("form input:radio").change(function() {
var questions = ($('.questions').length / 5);
var checked = ($('.questions:checked').length);
if (questions == checked)
{
$('#submit-btn').show();
}
});
});
Hallo,
I have to write a little java script and have no idea how and I thought that for a real JS Programmer it would be real easy to just tell me instead of me searching the web for hours.
Simple Problem:
I have some boxes with name TrackSelectPos_1 - TrackSelectPos_7.
If one of those change I want to check if the value of the box is -1. If it is disable all the boxes with a higher number and set there value to -1. If the value is not -1 enable the box on the right (the box one higher).
So the basics things that I want to do are:
1. How to get the value
2. How do I disable/enable a box
Thanks for your help.
At the very basic level, assuming one of your textbox id is TextPOS_1
//1. Value
var valueTB1 = document.getElementById('TextPOS_1');
alert (valueTB1 .value);
//2.To Disable
valueTB1.disabled = true;
You would need to wrap the above in a JavaScript Function...so that you can handle any number of textboxes.
Let me know if this helps and you need more clarification...
Assuming TrackSelectPos_1 is the id of your text box:
var box1 = document.getElementById('TrackSelectPos_1');
var box2 = document.getElementById('TrackSelectPos_2');
// This does it for only one text box. You'd need to also perform the same for boxes 3 through 7.
if(box1.value == '-1'){
box2.disabled = true;
} else {
box2.disabled = false;
}