I have some checkboxes like the following which are dynamically created.
<input type="checkbox" name="feature[]" value="9">
As you can see there is no id or class with it. And name property is of the type array. Now I can't detect the check event on these checkboxes. I need to detect the events and at the same time their values in which events have occurred.
I've checked several examples regarding this, but usually they all used class or id or name.But name is not in array type in those examples. I've tried with the name property to use, but couldn't manage. Please help.......
You can try this
$("input[name^='feature']").click(function(){
alert($(this).val());
});
use the attribute equals selector
$(document).on('change', 'input[name="feature[]"]', function(){
//do something
})
<input type="text" name="feature" value="123" />
$("input").click(function(){
var txt = $(this).val();
alert(txt);
alert($(this).attr("name"));
});
Try this once
Related
I have a check list of checkbox that are generated like this:
#foreach($documents as $PDF)
<input {{$PDF->problem != 0 ? "disabled" : ""}}type="checkbox"
id="mail_{{$PDF->id}}" value="{{$PDF->id}}"
name="email[]"
>
<input type="checkbox"
id="post_{{$PDF->id}}" value="{{$PDF->id}}"
name="post[]"
>
#endforeach
When you click on any of these checkbox, a jQuery function should be called that will use the value of the clicked checkbox.
I am having troubles calling the function only when these 2 generated checkboxes are clicked.
There are, however, more inputs and checkbox in the page so something like $(document).delegate('input', 'click', function (event) is out of question.
There sure must be an easier way to do this.
Add a common CSS class to these elements
<input class="checkbox" type="checkbox" id="post_{{$PDF->id}}"
Then use a selector to target them
$(document).delegate('.checkbox:checkbox', 'click', function (event)...
Note .delegate() is depreciated in the favour of .on()
As of jQuery 1.7, the .on() method provides all functionality required for attaching event handlers.
So changes code as
$(document).on('click', '.checkbox:checkbox', function (event)...
In place of document you should use closest static container for better performance.
I have 'chain' of checkboxes (parent checkbox and childs), and problem is:
When first clicking on 'parent' checkbox it is working well, but after that when clicking on 'childs', the 'parent' checkbox then isn't doing what is supposed. Parent is checking/unchecking childs except the child which was pressed before.
Here is code:
JavaScript
checks_bind();
function checks_bind(){
$("#x_main").off('click');
$("#x_main").on('click',function(){
var obj = $(this);
var val = obj.is(':checked');
$("#checks").find("input[type='checkbox']").attr('checked',val);
});
}
HTML
<input id='x_main' type='checkbox'/>Main<br>
<p>--------------------------------</p>
<div id='checks'>
<input type='checkbox'/>1<br>
<input type='checkbox'/>2<br>
</div>
<p>--------------------------------</p>
<i>1 - Click on 1 or 2 <br>2 - Try <b>Main</b> checkbox. <br>
3 - Main checkbox isn't working</i>
jsfiddle example
And one more question:
Is it good to use .on('click.namespace') on checkboxes since it's working well? I can use .change() method, but I want to call .off('click.namespace') (or something to unbind) before .on() each time when calling the function.
As checked is a property, You need to use .prop() instead of .attr()
$("#checks").find("input[type='checkbox']").prop('checked', val);
Updated Fiddle, A good read .prop() vs .attr()
If you want to use .off() then its advisable to use namespaced event.
Try this: user 'prop' instead of attribute and you can check all or uncheck all as per checked condition of main check box.
Also, you can check the count of all checkbox to check /uncheck main checkbox. see below
Note: bind click handler when DOM is ready hence user $(document).ready or $(function(){})
$(function(){
$("#x_main").on("change", function(){
$("#checks").find("input[type='checkbox']").prop("checked",$(this).is(":checked"));
});
$("#checks input[type='checkbox']").on("change", function(){
var total = $("#checks").find("input[type='checkbox']").length;
var checked = $("#checks").find("input[type='checkbox']:checked").length;
$("#x_main").prop("checked",total==checked);
});
});
JSFiddle Demo
I am appending input fields to a div on a action. When i try to access the value inside the input field using $(this).val() i am just getting empty values.
$('#div').append('<td class = "fund-amount"><input type="number" class="custom-amount" id='+value.response_code+' placeholder="Rs."></td>');
Depending upon the action there can be any number of input field appended to the div. I want to get the values entered on each field. when i tried to to get the value using this approach below, it didn't work out. But when i got the dynamically created id value and used in the place of $(this) it worked
$(document).keyup('.custom-amount',function(){
console.log($(this).val()); //just logging empty
console.log($(this).attr('id')); //Logged undefined
})
but this one works
$(document).keyup('#100520',function(){
console.log($('#100520').val());//works
console.log($('#100520').val());//works
});
Is there anything wrong with my approach ?
$(document).on('key-up','.custom-amount',function(){
console.log($(this).val()); //just logging empty
console.log($(this).attr('id')); //Logged undefined
})
Have you tried this?
$(document).on('keyup', '.custom-amount', function(){
console.log($(this).val());
console.log($(this).attr('id'))
});
Try the following code
$('#div').append('<td class = "fund-amount"><input type="number" class="custom-amount" id='+100520+' placeholder="Rs."></td>');
$('.custom-amount').keyup(function() {
console.log($(this).val()); // value
console.log($(this).attr('id')); // id
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id= "div">
</div>
Here is the working jsfiddle:https://jsfiddle.net/cm4rLvq1/
Calling $(this) in your handler is working as expected. Because you are handling events like this $(document).keyup your handler is invoked on the document element and not on the element itself, and therefor this refers to the document.
But when you supply event arg object to your handler function, you can use its property target which will refer to the element which triggered the event, like this:
$(function() {
$(document).on("keyup", ".custom-amount",function(e){
console.log($(e.target).val());
console.log($(e.target).attr('id'));
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="custom-amount" id="some-id" />
I have one input field having no value field ( that will be added later using jQuery )
<input type=hidden>
Once I execute some function to add value to the input field I get
<input type=hidden value="123">
I want remove that value field from input field later. How can I do that?
Presently I am using the following jQuery function:
$('input').val('');
and using that I get
<input type=hidden value>
But I want
<input type=hidden>
How Can I achive that?
Thanks...
jQuery's removeAttr removes attributes.
Try: $("input").removeAttr( "value" );
Edit 2018-09-11:
Since jQuery isn't necessary to do this, and the title doesn't specifically ask about jQuery (although the tags do), here's the solution in plain JavaScript:
document
.querySelectorAll( "input" )
.forEach( ( input ) => {
input.value = "";
input.removeAttribute( "value" );
} );
However, as #cookie-monster originally said: you probably shouldn't be removing DOM attributes. Consider rethinking your application.
You are looking for somehing like:
$('input').removeAttr('value');
use removeAttr()
$('input').removeAttr('value');
You can use:
$('input').removeAttr('value');
You can use the .removeAttr() method. This method uses the JavaScript removeAttribute() function, but it has the advantage of being able to be called directly on a jQuery object and it accounts for different attribute naming across browsers.
$('input').removeAttr('value');
To remove 'value' attribute from all inputs you can use
$('input').removeAttr('value');
You can also use input ID.
Example:
$('#Input_Id').removeAttr('value');
Or class for remove attribue
Example:
$('.Input_Class_Name').removeAttr('value');
I have got this checkbox which has value 1.
<input type="checkbox" name="option_1" id="checkbox_1" value="1">
Also I use this method to make checked/unchecked it.
$('input[id^="checkbox_"]').not('#checkbox_all').click(function () {
$('#checkbox_all').prop('checked', false);
// Get 'VALUE' of the checkbox here
});
What I need is somehow get 'VALUE' of the clicked checkbox. So In that case it should be 1.
Any clue how do it could be done?
Thank you!
In your click method use this to get the value
$(this).attr("value");
$(this) is referencing to the object that has been clicked.
EDIT:
you could also use $(this).val(); but sometimes I had problems with elder versions of IE so I did recommend $(this).attr("value") in the first place.
<html>
<head>
</head>
<body>
<input type="checkbox" name="option_1" id="checkbox_1" value="1">
</body>
</html>
$('input[id^="checkbox_"]').not('#checkbox_all').click(function () {
$('#checkbox_all').prop('checked', false);
alert($(this).val());
});
http://jsfiddle.net/heten/
Working :)
I think you just need $(this).val(); in your click event.
Also, if you need to work with that value as an int later, use
var x = parseInt($(this).val(),10);
The val jQuery method should see you right.
$('#checkbox_all').val();
http://api.jquery.com/val/