Hi i am writing a php based code in which i am generating checkbox with different id and name
<input type="checkbox" name="settle_check[]" id="settle_check['.$res2['id'].']" value="1" onclick="calculate_discount(\''.$res2['id'].'\');"/>
and my function of calculate discount is as follow
function calculate_discount(id){
alert($('#settle_check['+id+']').val());
if($('#settle_check['+id+']').is(":checked")){
alert('Hiii');
}
else{
alert('Byeee');
}
}
now for every time it is not capturing the value and giving alert of undefined.
Please Help me.
You are using [] in ID selector which are meta characters. You need to escape them.
Use
$('#settle_check\\['+id+'\\]').val()
Docs
To use any of the meta-characters ( such as !"#$%&'()*+,./:;<=>?#[]^`{|}~ ) as a literal part of a name, it must be escaped with with two backslashes: \\.
OR
You can use Attribute Equals Selector [name="value"]
$('[id="settle_check[' + id +']"]').val()
Use this
$('#settle_check\\['+id+'\\]').val()
You can also try this:
Instead of passing the id, pass the element itselfe like:
<input type="checkbox" name="settle_check[]" value="1" click="calculate_discount(this);"/>
and update the function to:
function calculate_discount(element){
alert($(element).val());
if($(element).is(":checked")){
alert('Hiii');
}
else{
alert('Byeee');
}
}
With this solution you avoid unnecessary jQuery searching.
Related
This function toggles all checkboxes in a given column of an HTML table when selecting or deselecting a checkbox.
function GlobalCheckboxSwitch0(checkboxID, tableID)
{
if ($(checkboxID).is(':checked'))
{
$('#table0 input[type=checkbox]').each(function ()
{
$(this).prop("checked", true);
});
}
else
{
$('#table0 input[type=checkbox]').each(function ()
{
$(this).prop("checked", false);
});
}
}
Invoking it like this works only for table0:
<input type="checkbox" id="selectall0" onClick="GlobalCheckboxSwitch0('#selectall0', '#table0')">
The problem is that table0 is hard coded in the function.
With the help of the second parameter tableID I would like it to work for any table ID.
selectall0 is the ID of the checkbox.
Trying to refer the tableID parameter like this:
$('$(tableID) input[type=checkbox]')
yields a syntax error.
What should I change in the way I refer to tableID?
Thank you.
Use the tableID selector the same way you do for checkboxID along with find().
You can also skip the if and the each and do the following:
function GlobalCheckboxSwitch0(checkboxID, tableID) {
var allChecked = $(checkboxID).is(':checked');
$(tableID).find('input[type=checkbox]').prop('checked', allChecked );
}
jQuery will do the each internally
It's a jQuery selector syntax error, to be precise - it's not actually a JavaScript syntax error.
You need to learn concatenation, which means joining strings and variables/expressions.
As it stands...
$('$(tableID) input[type=checkbox]')
...will be executed literally. In other words, you're telling jQuery to go find an element whose tag name is tableID.
Instead you need to concatenate between the formulaic and dynamic parts of the jQuery selector. Concatenation in JavaScript is done via +.
$('#'+tableID+' input[type=checkbox]') //<-- note #
I have some h3 element:
<h3>Data Performance</h3>
I need to change it to class name: data_performance.
So i do this but something is wrong, can anybody tell me what?
var $product_name = $('.subpage_promo.top').find('h3').text().toLowerCase(),
$product_name_mod = $product_name.split(' ').replace('_');
Thx for help.
You can do this using below code.
var $product_name = $('h3').html().toLowerCase(),
$product_name_mod = $product_name.replace(' ','_');
Demo
You're not implementing replace correctly. Its syntax is:
str.replace(regexp|substr, newSubStr|function)
It should be executed on a string (you're passing an array of strings), and it should specify both what to search for and what to replace it with (you're currently passing only what should be the second argument):
$product_name_mod = $product_name.replace(/ /g,'_');
The code above uses a regex, only to be able to specify the global flag, which is required in order to replace every space with an underscore. If you know you'll always have just one, .replace(' ','_') should do.
$('h3').addClass(product_name.replace(/ /g,'_'));
DEMO
I am adding % symbol at the end of the string on keyup event, first I get the current value of input field and then split('%') and then I use following code
$('.percent input[type=text]').val(str+'%');
But this also adding comma after newly added character.
jsfiddle
Also Would love to do it by using css but the condition is only that there should not be any image used for it neither positioning used.(Can I use :after or :befor)
IMO the problem was the split function.
Try this:
$('.percent input[type=text]').on('keyup',function(){
var oldstr=$('.percent input[type=text]').val();
var str=oldstr.replace('%','');
$('.percent input[type=text]').val(str+'%');
});
Javascript .split() method returns comma seperated data, that is why your data is comma seperated.
If all you wish to do is remove the first symbol you could use .substr() - read about it here.
$('.percent input[type=text]').on('keyup',function(e){
var oldstr=$('.percent input[type=text]').val();
var tokens = oldstr.split('%');
var suffix = tokens.pop() + '%';
var prefix = tokens.join("");
$('.percent input[type=text]').val(prefix+suffix);
});
JS Fiddle: http://jsfiddle.net/uU8Lf/4/
A little late now, however I couldn't help but notice the constant reuse of the element's class/type throughout both answers. Is it not beneficial/best practice to use 'this' keyword within the '.on' callback function like so:
$('.percent input[type=text]').on('keyup',function(){
var oldstr=$(this).val();
var str=oldstr.replace('%','');
$(this).val(str+'%');
});
Please correct me if I'm wrong, and yes, I'm being picky here :)
I am trying to replace , with / in JavaScript and wrote the code below. There are multiple text boxes available in the form. I want to write a single function and call them on all the text fields.
The issue that I am experiencing is that I am not able to send the current ID to the JavaScript method. How is this properly done?
function removeComma(val) {
var values = document.getElementById('val').value; //Object Required Error
var n=values.replace(/,/, "/");
document.getElementById('val').value=n;
}
<input type="text" id="one" name="one" onkeypress="removeComma(this)">
<input type="text" id="two" name="two" onkeypress="removeComma(this)">
<input type="text" id="three" name="three" onkeypress="removeComma(this)">
The error that I am getting from above code is OBJECT REQUIRED at first line.
You're passing the clicked element to your function, hence you don't need document.getElementById() at all. This fixes your problem.
function removeComma(val) {
var values = val.value;
var n=values.replace(/,/g, "/");
val.value=n;
}
Notice also, that onkeypress is fired before the value of the input element is changed. You can use onkeyup or rather oninput if you want to use the last updated value of input.
If you really have to use the id of the element, you need to pass it in the argument:
<input type="text" id="one" name="one" onkeypress="removeComma(this.id)">
And then also remove the quotes around val:
var values = document.getElementById(val).value;
document.getElementById('val')
should be
document.getElementById('one')
If you make this change you don't need to send this to removeComma.
If you keep this then use the following function
function removeComma(val) {
var values = val.value;
var n=values.replace(/,/, "/");
val.value=n;
}
It should be...
document.getElementById(val).value
... instead, as you're probably going to call this function for each input textbox separately, sending their ids as params into the function.
UPDATE: ... and your edit clearly shows even that's not the case: you're passing an element itself into a function. That's good, but then you don't have to look after that element with document.getElementById - you already have it.
Still, there're another issue here: if you need to replace all commas, you need to add /g modifier to that regex. Otherwise multiple commas (added by copy-pasting, for example) won't be replaced.
Overall, I'd rewrite it like this:
function removeComma(el) {
el.value = el.value.replace(/,/g, '/');
}
Here's a fiddle to play with (and here's its fork working with oninput handlers instead - in my opinion, the latter is smoother).
is there a way to get a element that have a attribute with a value. The attribute have multiple values. The values are space separated.
<div data-bind-contains="Header-Logo Footer-Logo"></div>
The problem with $('[data-bind-contains*=Header-Logo]') it will return all. That elements $('[data-bind-contains*=Header-Logo-Something]'), too.
<div data-bind-contains="Header-Logo Footer-Logo"></div>
<div data-bind-contains="Header-Logo-Looper"></div>
The selector $('[data-bind-contains*=Header-Logo]') will return both what is not my intention.
Use ~ (Attribute contains word) match selector
$('[data-bind-contains~=Header-Logo]')
This will give you exact word matched within the attribute value, so this should exclude yourword-something.
Fiddle to demonstrate the difference.
Doc
From your question, you seem have no guarantee that "Header-Logo" is the first string in your list of values.
It's surely not a problem to more specifically test the value against a proper regex in the function called by the selector, is it? This may be a bit longer than needed but shows the idea....
$('[data-bind-contains*=Header-Logo]').click( function() {
var str = $(this).attr('data-bind-contains');
var pat=/\bHeader-Logo\b/;
if (str.match( pat)) {
// do some stuff
}
});
Try this
$('[data-bind-contains*="Header-Logo "]')
This return elements that have data-bind-contains attribute value start with "Header-Logo "
Put a space at the and of attribute value in jQuery so it only returns element that have value "Header-Logo<space>+<some_other_class>"