I have a table where there are two things :
Click event on the row level
and click while checking a check box inside that row.
And when , checkbox is checked I do not want the Click event on tr to be fired.
<tbody data-bind="foreach:CustomerList">
<tr onclick="removepage();" onmouseover="changeRowColor(this)" onmouseout="restoreRowColor(this)">
<td>
<input class="checkbox" data-bind="click:$parent.customerClick(event)" type="checkbox">
</td>
<td class="col-md-4">
<span class="name" data-bind="text:customerName" />
</td>
<td>
<span data-bind="text:siteName" />
</td>
</tr>
</tbody>
Now in customerClick() ; I tried to achieve the same.
customerClick: function (e) {
debugger;
e.stopPropagation();
},
But it did not work.
It says , e.stopPropagation(); is not a function also.
Please tell me how to do that .
Knockout comes with a binding for such an occasion - clickBubble:
<input class="checkbox" data-bind="click:$parent.customerClick(event), clickBubble: false" type="checkbox">
Setting it to false on your input will prevent the click event from reaching the handlers further up the tree.
Related
If I have a table with 2 columns, a textfield and a checkbox... Each column has a class, and multiple rows in it. I don't know how to work this out:
If the textfield's number larger than 10, that row's checkbox automatically change from unchecked to checked.
Any ideas?
ok .. you can get the value of the input .. and in every keystroke check if the entered number is greater than 10 then loop through all the checkboxes and check them like that
$(".textfield").on("input", function () {
if (+$(this).val() > 10) {
$(".checkboxes").prop("checked", true)
} else {
$(".checkboxes").prop("checked", false)
}
})
you can try this and tell me if something went wrong
note : I added (+) before the $(this).val() to make sure the value is converted from string to number
edit: if you want to make an input for every row so this will not work!
you can make a specific class for every row and put the same class as a data attr in every input .. and then you can directly access to the input specific row checkboxes like that
$(".textfields").on("input", function () {
if (+$(this).val() > 10) {
$(`.${$(this).attr("data-id")} > td >
checkboxes`).prop("checked", true)
} else {
$(`.${$(this).attr("data-id")} > td >
checkboxes`).prop("checked", false)
}
})
I hope this works .. I know It's a little bit confusing .. by understanding the main idea you solve it with multible solutions
If you can't understand this let me know
$('.input').on('blur', function() {
if(parseInt($(this).val()) > 10){
$(this).parent().closest('tr').find('.checkbox').attr("checked","checked");
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<table>
<tr>
<td>
<input type="text" class="input">
</td>
<td>
<input type="checkbox" class="checkbox">
</td>
</tr>
<tr>
<td>
<input type="text" class="input">
</td>
<td>
<input type="checkbox" class="checkbox">
</td>
</tr>
<tr>
<td>
<input type="text" class="input">
</td>
<td>
<input type="checkbox" class="checkbox">
</td>
</tr>
<tr>
<td>
<input type="text" class="input">
</td>
<td>
<input type="checkbox" class="checkbox">
</td>
</tr>
</table>
You need use blur of jQuery, it means when the user looses the focus from input/textfield then implement the functionality of checkbox to be checked, this is for single input and checkbox, if you want to achieve it for multiple row with column then see the above snippet.
$('#input_field').on('blur', function() {
if(parseInt($(this).val()) > 10){
$('#checkbox').attr("checked","checked");
}
});
Radio input not working with localStorage
I used localStorage for many examples and work with me good except starRating.
Here is example example
I tried many codes , but does not work
Please give me example. Sorry I'm newbie.
<table>
<thead>
<tr>
<th STYLE="width:200px">link</th>
<th STYLE="width:200px">rating</th>
<th STYLE="width:200px">Options</th>
</tr>
</thead>
<tr>
<td>
<A CLASS="flink" HREF="https://www.google.com" TARGET="_blank">site a</A>
</td>
<td>
<span class="starRating">
<input CLASS="inputrating" CHECKED id="rating_9_5" type="radio" name="rating_9" value="5">
<label for="rating_9_5">5</label>
<input CLASS="inputrating" id="rating_9_4" type="radio" name="rating_9" value="4">
<label for="rating_9_4">4</label>
<input CLASS="inputrating" id="rating_9_3" type="radio" name="rating_9" value="3">
<label for="rating_9_3">3</label>
<input CLASS="inputrating" id="rating_9_2" type="radio" name="rating_9" value="2">
<label for="rating_9_2">2</label>
<input CLASS="inputrating" id="rating_9_1" type="radio" name="rating_9" value="1">
<label for="rating_9_1">1</label></span>
</td>
<td>
add
</td>
</tr>
<tr>
<td>
<A CLASS="flink" HREF="https://www.google.com" TARGET="_blank">site b</A>
</td>
<td>
<span class="starRating">
5
4
3
2
1
add
$(".starRating").on("click", function(){
selected_rating = $('input', this).data("inputrating");
selected_id = $('input', this).data("rating-id");
console.log(selected_rating)
});
You need to change your event binding to the Radio Buttons, not the spans that contain them.
Next, you need to access the values of the radio buttons, rather than using the jQuery .data() method, which I'm not sure what you are doing with.
this.value
In the event handler is all you need for that.
Next, you need to actually store the values, which you didn't have any code for:
if(window.localStorage){
localStorage.setItem("Site A Rating", this.value);
} else {
console.log("localStorage not supported.");
}
Here is a working Fiddle: https://jsfiddle.net/6jfey3cj/4/
And a screen shot showing the different site's ratings in localStorage.
The key issue you are struggling with is how to decide which element is best to trigger your function on. You are currently triggering on .starRating which is a span. It is possible to use that as the trigger but makes much more sense to simply fire the function whenever someone chooses a value on .inputrating which is a class that is unique to all your star rating radio buttons.
Try this code out:
$(".inputrating").on("change", function(){
checked_rating = $(this).val();
checked_id = $(this).attr('id');
console.log(checked_rating);
console.log(checked_id);
});
If you notice I changed click to change. This will make it so that your code only fires once on rating select. That way if you end up running an ajax function to update a database it won't keep getting called over and over if the user decides to spam click the same radio button over and over.
Here is a working fiddle demonstrating the solution: JSFiddle
You can change your javascript function as below
$(".inputrating").on("click", function(){
selected_rating = $(this).val();
selected_id = this.id;
console.log(selected_rating);
console.log(selected_id);
});
updated fiddle -
https://jsfiddle.net/tfhg15xw/2/
The table contains a few rows like that:
<tr>
<td>
<input type="checkbox" name="indicator[]">
</td>
<td>
<input type="checkbox" name="graduations[]">
</td>
<td>
<input type="checkbox" name="graduations[]">
</td>
<td>
<input type="checkbox" name="graduations[]">
</td>
<td>
<input type="checkbox" name="graduations[]">
</td>
<td>
<input type="checkbox" name="graduations[]">
</td>
</tr>
I need to disable 'graduations' being checked if 'indicator' is not checked. And if checked, i need to check exactly two 'graduations' in that row.
My actual code only limits the number of checked 'graduations'.
$(function() {
$('input[name=graduations\\[\\]]').click(function() {
if($(this).parent().siblings().children("input[name=graduations\\[\\]]:checkbox:checked").length >= 2)
this.checked = false;
});
});
You can try this:
$("#area_covered").click(function(){
if($("#area_covered").is(':checked'))
$('.area_covered').prop('checked', true);
else
$('.area_covered').prop('checked', false);
});
give some id to the checkbox you're going to click, and give some class to both of the other checkboxes which you want to be get checked also.
then use the above jquery tag, which would work for you definitely.\
Thanks & Enjoy coding :)
Updated try this simple FIDDLE
$(function(){
$("input[name^=graduations]").on("change",function(e){
if((!$("input[name^=indicator]").is(":checked")) || +$("input[name^=graduations]:checked").length > 2 ){
$(this).prop('checked',false);
}
});
});
makes it simple
Hope it helps
When i click the checkbox the corresponding hidden value of the checkbox should be remove or the name of hidden input field to be change using jquery or JavaScript.
HTML :
<tr>
<td><input type="checkbox" value="noseat" id="seat" name="seat[]" onclick="return oncl(this);">
Check
<input type="hidden" value="off" name="seat[]" class="hiddensesat">
</td>
<td><input type="checkbox" value="noseat" id="seat" name="seat[]" onclick="return oncl(this);">
Check
<input type="hidden" value="off" name="seat[]" class="hiddensesat">
</td>
<td><input type="checkbox" value="noseat" id="seat" name="seat[]" onclick="return oncl(this);">
Check
<input type="hidden" value="off" name="seat[]" class="hiddensesat">
</td>
</tr>
JS :
function oncl(){
alert($(this).is(':checked'));
if($(this).is(':checked')){
alert($(this).closest('td').find(".hiddensesat").val());
}
}
The alert always showing false;
You are passing the clicked element reference as a argument so you need to change the function definition to accept a parameter and use it instead of using this inside the function.
function oncl(el) {
alert(el.checked);
$(el).closest('td').find(".hiddensesat").val(el.checked ? 'on' : 'off')
}
As a side note, I would recommend using jQuery event handlers instead of inline ones, like
//dom ready handler
jQuery(function () {
//change event handler for checkbox elements with name seat[]
$('input[type="checkbox"][name="seat[]"]').change(function () {
$(this).closest('td').find(".hiddensesat").val(this.checked ? 'on' : 'off')
});
})
I have this code and what I need to with this is when selecting one radio button I want to display subscription_rate div. At the moment both main DIVs display together. I need to keeping hide subcription_rate div when click on a radio button.
hope someone help me out this..
this is my code so far...
<div class="form-element-row">
<div class="first-child">
<label for="name">Registration Period<img alt="required" src="images/required_star.png" />:</label>
</div>
<div class="last-child">
<input type="radio" name="period" value="1" />1 Year
<input type="radio" name="period" value="2" />2 Years
<input type="radio" name="period" value="3" />3 Year
</div>
</div>
<div class="subscription_rate">
<div class="first-child">
<label> </label>
</div>
<div class="last-child">
<table>
<tr>
<th>Subscription Rate</th>
<th>1 Year</th>
<th>2 Years</th>
<th>3 Years</th>
</tr>
<tr>
<td style="text-align: left;">Lanka Institute Rates for Tutors within their subscription period.</td>
<td width="18%">Rs.3000</td>
<td width="18%">Rs.4500<br /><span>Save 25%</span></td>
<td width="18%">Rs.7500<br /><span>Save 50%</span></td>
</tr>
</table>
</div>
</div>
You need to bind change event handler with radio button and use show() / hide() functions.
Live Demo
$('.subscription_rate').hide();
$('[name=period]').change(function(){
$('.subscription_rate').show();
});
To toogle between change of radion buttons, you can use toogle()
Live Demo
$('.subscription_rate').hide();
$('[name=period]').change(function(){
$('.subscription_rate').toggle();
});
First hide the div in the css:
display:none;
then use this script:
$('input[name="period"]').change(function(){
$('.subscription_rate').slideDown('slow'); // .slideDown(800);
});
First hide it by using .hide() in jquery and use .show() when you want to display it after the user clicks the radio button,
$(document).ready(function(){
$('.subscription_rate').hide(); // hide the div first
$('input[type=radio]').change(function(){
if($('input[type=radio]:checked').val()==1){ //check which radio button is clicked, here its 1
$('.subscription_rate').hide();
}else if($('input[type=radio]:checked').val()==2){
$('.subscription_rate').fadeIn("slow"); // show the div with fadeIn
}else if($('input[type=radio]:checked').val()==3){
$('.subscription_rate').hide();
}else{
$('.subscription_rate').hide(); // if in any case radio button is not checked by user hide the div
}
});
});
JSFIddle demo