jquery not functioning for radio button - javascript

I have two groups that have a radio button. What it does is, when a package above is chosen, the chosen package below should be the same from the above, vice-versa. Example is if I choose "Deluxe" in the first one, the other one should also be "Deluxe". The problem is, when I choose, "Deluxe" at the top, the other package is still on the previous selection. At first try, everything is working but when you try selecting again, the problem occurs. Also I want to highlight the selected package.
The other part of the code is here
Html
<table class="tblPackage">
<thead>
<tr style="text-align: center;">
<td width="30%"></td>
<td width="1%"></td>
<td width="19%" valign="top">
<div class="d17_1">
<div class="d17_2">ECONOMY</div><span class="s11">$49</span>
</div>
</td>
<td width="19%" valign="top">
<div class="d17_1">
<div class="d17_2">DELUXE</div><span class="s11">$79</span>
</div>
</td>
<td width="19%" valign="top">
<div class="d17_1">
<div class="d17_2">ULTIMATE</div><span class="s11">$149</span>
</div>
</td>
</tr>
</thead>
<tbody>
<colgroup>
<col id="colA"/>
<col id="colB"/>
<col id="colC"/>
<col id="colD"/>
<col id="colE"/>
</colgroup>
<tr>
<td style="text-align: left;"><h5>Choose Package</h5></td>
<td></td>
<td>
<center>
<input type="radio" name="radiog_dark" checked value="49.00" id="tcbx1" class="css-checkbox" onclick="ChangeColColor(this,'colC')"/>
<label for="tcbx1" class="css-label"></label>
</center>
</td>
<td>
<center>
<input type="radio" name="radiog_dark" value="79.00" id="tcbx2" class="css-checkbox" onclick="ChangeColColor(this,'colD')"/>
<label for="tcbx2" class="css-label"></label>
</center>
</td>
<td>
<center>
<input type="radio" name="radiog_dark" value="149.00" id="tcbx3" class="css-checkbox" onclick="ChangeColColor(this,'colE')"/>
<label for="tcbx3" class="css-label"></label>
</center>
</td>
</tr>
</tbody>
</table>
<table class="tblsubPackage" width="90%">
<tr>
<td width="31%"><h5>Choose Package</h5></td>
<td width="19%" valign="top">
<div class="d17_1">
<div class="d17_2">ECONOMY </div><span class="s11">$49</span>
</div>
<center>
<input type="radio" name="radiog_lit" checked value="49.00" id="tscbx1" class="css-checkbox" />
<label for="tscbx1" class="css-label"></label>
</center>
</td>
<td width="19%" valign="top">
<div class="d17_1">
<div class="d17_2">DELUXE</div><span class="s11">$79</span>
</div>
<center>
<input type="radio" name="radiog_lit" value="79.00" id="tscbx2" class="css-checkbox" />
<label for="tscbx2" class="css-label"></label>
</center>
</td>
<td width="19%" valign="top">
<div class="d17_1">
<div class="d17_2">ULTIMATE</div><span class="s11">$149</span>
</div>
<center>
<input type="radio" name="radiog_lit" value="149.00" id="tscbx3" class="css-checkbox" />
<label for="tscbx3" class="css-label"></label>
</center>
</td>
</tr>
</table>

handle it with single click event.
$('.tcbx').click(function (event) {
var test = $(this).data('test');
$('#'+test).prop('checked', this.checked);
});
just make sure you have a data attribute in option which matches with the id attribute of sub package or viceversa
<input type="radio" name="radiog_dark" checked value="49.00" id="tcbx1"
class="css-checkbox tcbx" data-test="tscbx1" />
//---^^^^ added a class here
and add a class.
I know there are lot of other ways to figure this out, one of which is comparing the index in both tables and doing the needful likewise. But for fast response and since you already have different id for all the checkboxes, i added this function.
This is just a sample you can actaully avoid having different id hope you will work on it
Note: you can change test to what ever variable you like.
here you go
http://jsfiddle.net/aohsny6y/20/

You can reduce your code by using jQuery's start with selector for radio button having ids starting with either tscbx or tcbx as shown below and get the index of the id to find corresponding radio button.
You need to use .prop() instead of .attr()
Also to set background color, you can put data-col attribute in radio button and use the same to find col and set its background color (though it is not working in JSFiddle).
<input type="radio" name="radiog_dark"
checked value="49.00" id="tcbx1"
class="css-checkbox" data-col="colC"/>
jQuery:-
$('input[type="radio"][id^="tscbx"]').click(function() {
var index = $(this).attr('id').replace('tscbx','');
$('#tcbx'+index).prop('checked', true);
});
$('input[type="radio"][id^=tcbx]').click(function() {
var index = $(this).attr('id').replace('tcbx','');
$('#tscbx'+index).prop('checked', true);
//remove all colgroup background
$('colgroup col').css('background-color','white');
//put selected bacground for selected radio
var colId= $(this).data('col');
var varColor = "rgba(0,140,203,.2)";
$('#'+colId).css('background-color',varColor);
});
JSFiddle Demo

For jQuery 1.9 or higher you need to user .prop("checked", true) instead of .atrr()
Fot the Highlighting create a CSS Class and Change it with .toogleClass

$('#tscbx3').attr('checked','true')

Related

jquery function on click event in odoo is not working

i am trying bellow jquery code to perform some dynamic changes to my front view to make the odoo switch toggle to behave like radio button.so it could be selected one at a time like radio button
Note: console.log("test") is working but the code with css selector is not working
please guide me how i run my script to work it fine
$(document).ready(function(){
$(".wk_checked_question").click(function(){
alert("you click me!");
});
console.log("test");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
*test.html**
<tbody>
<tr>
<td class="question_id" style="width:70%">Q1. t-shirt coler
size</td>
<td class="question_id" style="width:50%">$ 120.00</td>
<td><label class="switch">
input class="wk_checked_question" data-id="2" type="checkbox">
<span class="check_box round"></span>
</label>
</td>
</tr>
<tr>
<td class="question_id" style="width:70%">Q2. t-shirt size</td>
<td class="question_id" style="width:50%"> Free</td>
<td>
<label class="switch">
<input class="wk_checked_question" data-id="1" type="checkbox">
<span class="check_box round"></span>
</label>
</td>
</tr>
</tbody>
Maybe this is what you are looking for:
$(document).ready(function(){
$("body").on("click",".wk_checked_question",function(ev){
$(".wk_checked_question").each((i,cb)=>cb.checked=(cb==this));
this.checked=true; // a "real" radio button cannot be unchecked ...
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table style="width:500px">
<tbody>
<tr>
<td class="question_id" style="width:70%">Q1. t-shirt color size</td>
<td class="question_id" style="width:50%">$ 120.00</td>
<td><label class="switch"><input class="wk_checked_question" data-id="2" type="checkbox">
<span class="check_box round"></span></label></td>
</tr>
<tr>
<td class="question_id" style="width:70%">Q2. t-shirt size</td>
<td class="question_id" style="width:50%"> Free</td>
<td>
<label class="switch">
<input class="wk_checked_question" data-id="1" type="checkbox">
<span class="check_box round"></span></label></td>
</tr>
</tbody>
</table>
After a click on a checkbox the .each() loop goes over all checkboxes with the same class and sets only the one being identical to the clicked ono (this). All others are unchecked.
I used "delegated event attachment" with jQuery.on() as suggested in #freedomn-m's comment. This has the advantage that it will work on target elements (.wk_checked_question) that don't even exist at the time of the event attachment.
Your HTML was also missing the <table> tags around your <tbody> which I added.
Edit
Coming back to this answer I realized that I could simplify the script even further and allow for an option to be unselected again by using this:
$("body").on("click",".wk_checked_question",function(ev){
let newstate=this.checked;
$(".wk_checked_question").prop("checked",false);
this.checked=newstate
});

dynamically putting form fields using append in my form but not getting values ( the name in URL ) while submitting the form in jquery

I am trying to insert input field in my div onclick of check box. and it is working but when i submit the form the value is not received to me of that input box
check box
<form action="{{ url('product_uplo') }}" method="get" enctype="multipart/form-data" accept-charset="utf-8">
<tr>
<table class="table">
<tr>
<td>
<label><input type="checkbox" id="ELarge" name="pro_size[]" onclick="a('ELarge')" value="ELarge"> Extra Large</label>
</td>
<td>
<label><input type="checkbox" id="Large" name="pro_size[]" onclick="a('Large')" value="Large"> Large</label>
</td>
<td>
<label><input type="checkbox" id="Medium" name="pro_size[]" onclick="a('Medium')" value="Medium"> Medium</label>
</td>
<td>
<label><input type="checkbox" id="Small" name="pro_size[]" onclick="a('Small')" value="Small"> Small</label>
</td>
<td>
<label><input type="checkbox" id="ESmall" name="pro_size[]" onclick="a('ESmall')" value="ESmall"> Extra Small</label>
</td>
</tr>
</table>
</tr>
<tr>
<td>Price</td>
<td>
<div id="set"></div>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" class="form-control btn btn-primary">
</td>
</tr>
</form>
JQuery code
<script type="text/javascript">
function a(extra){
if($('#'+extra+'').is(":checked")){
$('#set').append("<div id="+"price"+extra+"><label>"+extra+"</label><input type='text' name='pro_price["+extra+"]' class='form-control' placeholder="+extra+" /></div>");
}else{
$('#price'+extra).remove();
}
}
</script>
When I submit the form the url is like this
http://www.asggas.com/product_uplo?dat=pro_type=Girls+Cloth&pro_name=asadsfd&brand=sadf&Material=sadf&pro_color=sdf&pro_des=sadf&pro_size%5B%5D=ELarge&pro_size%5B%5D=Large&pro_quantity=5446&galary%5B%5D=
it doesn't pass pro_price[Elarge] ...
Please help
after searching to much i got the answer. because of i am using table tag it's now sending the data. so remove the table tag and it will work

How to store values(i.e. 'Y'- for checked, 'N' - for unchecked) of multiple checkbox in database using angularjs?

I've attached the screenshot of my module. I want the store the values('Y','N') of selected checkbox in database
<tr data-ng-repeat="data in RoleOperation track by $index">
<td>{{$index + 1}}</td>
<td>
<label>{{RoleOperation[$index].vname}}</label>
</td>
<td>
<label>{{RoleOperation[$index].id}}</label>
</td>
<td class="text-center">
<input type="checkbox" data-ng-model="data.viewflg[$index]" />
</td>
<td class="text-center">
<input type="checkbox" data-ng-model="data.addflg[$index]" />
</td>
<td class="text-center">
<input type="checkbox" data-ng-model="data.editflg[$index]" />
</td>
<td class="text-center">
<input type="checkbox" data-ng-model="data.deleteflg[$index]" />
</td>
</tr>
Here RoleOperation is Object, which contains names of categories.
How to give value to data-ng-model? And how to access particular checkbox in controller?
plz help me..
You can use ng-true-value and ng-false-value to set your preferred values.
To set Y and N use the below code.
<input type="checkbox" data-ng-model="data.viewflg[$index]" ng-true-value="'Y'" ng-false-value="'N'">
-- EDIT --
Here is a sample

cancel( reset the html ) button is not working

I am new to html, javascript, and css.
I do not know why, but my cancel button is not working at all.
<!DOCTYPE html>
<html>
<head>
<!-- set the page title and link with java script and css files -->
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="hw4.css">
<script src="hw4.js"></script>
</head>
<body>
<section>
<table>
<tr>
<td class="first">Post to</td>
<!-- create two post to buttons -->
<td class="second"><input id="entire" type="radio" name="post"
value="entire" checked>Entire Class <input type="radio"
id="individual" name="post" value="individual">Individual
Student(s)/instructor(s)</td>
</tr>
<tr>
<td class="first">Select Folder(s)</td>
<td class="second">
<!-- create six homework checkboxes -->
<div class="hw">
<input id="hw1" type="checkbox"><label for="hw1">hw1</label>
<input id="hw2" type="checkbox"><label for="hw2">hw2</label>
<input id="hw3" type="checkbox"><label for="hw3">hw3</label>
<input id="hw4" type="checkbox"><label for="hw4">hw4</label>
<input id="hw5" type="checkbox"><label for="hw5">hw5</label>
<input id="hw6" type="checkbox"><label for="hw6">hw6</label>
</div>
</td>
</tr>
<tr>
<td class="first">Summary
<div style="font: 10px Arial">(100 charactors or less)</div>
</td>
<td class="second"><input id="summary" type="text" size="25"
value="Enter a one line summary...!" onclick="this.value='';"></td>
</tr>
<tr>
<td class="first">Details</td>
<!-- create detail text area. -->
<td class="second"><textarea id="details" name="textarea"
rows="10" cols="50" wrap='off'></textarea></td>
</tr>
<tr>
<td class="first">Posting Options</td>
<!-- create two option check boxes -->
<td><input id="option1" type="checkbox"> Make this an
announcement (note appears on the course page)</br> <input id="option2"
type="checkbox"> Send email notifications immediately
(bypassing student's email preferences, if neccesory)</td>
</tr>
<tr>
<td></td>
<td>
<input id="post" type="submit" value="Post My Note!" onClick="check()">
<input id="cancel" type="reset" value="Cancel" />
</td>
</table>
</section>
</body>
</html>
when I run this code, everything works well, but the cancel button is not working.
I think I did something wrong, because it worked like 30 mins ago, but
now it is not working at all and I cannot figure out what is wrong...!!
You have no form tag. A reset-button clears values inside a form.
2 Solutions:
Wrap your input-elements inside a <form><!-- elements here --></form>
Write a piece of script to clear the elements you want to clear when you click on the clear-button.
Try This:
Reset button only working for form tag. So please add form tag in your code as I shown in demo.
<script src="hw4.js"></script>
</head>
<body>
<section>
<table>
<form>
<tr>
<td class="first">Post to</td>
<!-- create two post to buttons -->
<td class="second"><input id="entire" type="radio" name="post"
value="entire" checked>Entire Class <input type="radio"
id="individual" name="post" value="individual">Individual
Student(s)/instructor(s)</td>
</tr>
<tr>
<td class="first">Select Folder(s)</td>
<td class="second">
<!-- create six homework checkboxes -->
<div class="hw">
<input id="hw1" type="checkbox"><label for="hw1">hw1</label>
<input id="hw2" type="checkbox"><label for="hw2">hw2</label>
<input id="hw3" type="checkbox"><label for="hw3">hw3</label>
<input id="hw4" type="checkbox"><label for="hw4">hw4</label>
<input id="hw5" type="checkbox"><label for="hw5">hw5</label>
<input id="hw6" type="checkbox"><label for="hw6">hw6</label>
</div>
</td>
</tr>
<tr>
<td class="first">Summary
<div style="font: 10px Arial">(100 charactors or less)</div>
</td>
<td class="second"><input id="summary" type="text" size="25"
value="Enter a one line summary...!" onclick="this.value='';"></td>
</tr>
<tr>
<td class="first">Details</td>
<!-- create detail text area. -->
<td class="second"><textarea id="details" name="textarea"
rows="10" cols="50" wrap='off'></textarea></td>
</tr>
<tr>
<td class="first">Posting Options</td>
<!-- create two option check boxes -->
<td><input id="option1" type="checkbox"> Make this an
announcement (note appears on the course page)</br> <input id="option2"
type="checkbox"> Send email notifications immediately
(bypassing student's email preferences, if neccesory)</td>
</tr>
<tr>
<td></td>
<td>
<input id="post" type="submit" value="Post My Note!" onClick="check()">
<input id="cancel" type="reset" value="Cancel" />
</td>
</form>
</table>
</section>
</body>
</html>
Enjoy :)

JS/jQuery Change Image on Hover of <tr>

I have some HTML shown below, which is generated dynamically in an ASP Classic form.
There can be any amount of groups/tables (Size/Color) with any amount of rows/options.
Each group/table has an img tag, and each row/option has a hidden field with its corresponding image URL.
On the hover of each row, I need to change the src attribute of the image of that group to that row's image URL, using JS or jQuery (something that works in ASP classic).
The HTML can be changed if needed for it to work.
Thank you.
<table>
<tr>
<td style="font-weight: 700" colspan="2">
Color<input id="colorSortOrder" type="hidden" value="1" />
</td>
</tr>
<tr>
<td>
<input id="radioRed" type="radio" name="Color" value="R-" />
<label for="radioRed">
Red</label>
<input type="hidden" value="Image1.jpg" />
</td>
<td rowspan="3">
<img />
</td>
</tr>
<tr>
<td>
<input id="radioOrange" type="radio" name="Color" value="O-" />
<label for="radioOrange">
Orange</label>
<input type="hidden" value="Image2.jpg" />
</td>
</tr>
<tr>
<td>
<input id="radioBlue" type="radio" name="Color" value="B-" />
<label for="radioBlue">
Blue</label>
<input type="hidden" value="Image3.jpg" />
</td>
</tr>
</table>
<table>
<tr>
<td style="font-weight: 700" colspan="2">
Size<input id="sizeSortOrder" type="hidden" value="2" />
</td>
</tr>
<tr>
<td>
<input id="radioLarge" type="radio" name="Color" value="LA-" />
<label for="radioLarge">
Large</label>
<input type="hidden" value="Image4.jpg" />
</td>
<td rowspan="3">
<img />
</td>
</tr>
<tr>
<td>
<input id="radioMedium" type="radio" name="Color" value="ME-" />
<label for="radioMedium">
Medium</label>
<input type="hidden" value="Image5.jpg" />
</td>
</tr>
<tr>
<td>
<input id="radioSmall" type="radio" name="Color" value="SM-" />
<label for="radioSmall">
Small</label>
<input type="hidden" value="Image6.jpg" />
</td>
</tr>
</table>
...which looks something like:
I would change the HTML just a little bit to reduce the JavaScript parsing needed by adding data attributes for the image src like this
http://jsfiddle.net/muDJ9/
and with the use of JavaScript replace you can edit out extensions for the alt tags
EDIT: This also runs the fastest I just ran tests on the others submitted using the console.time() profiler
FINAL: http://jsfiddle.net/FV9cw/
You can do it as under
Live Demo
$('label[for]').closest('tr').mouseenter(function(){
$(this).siblings().find('img').hide();
$(this).find('img').attr('src', $(this).find('input[type=hidden]').attr('value')).show();
});
$("input[type='radio']").hover(function(){
var src = $(this).parent().find("input[type='hidden']").val();
$(this).parent().parent().parent().find("img").attr("src",src);
});
Line 1 detects hover.
Line 2 go up to td and looks for the hidden input inside td and takes the value
Line 3 go up three times td > tr > table and looks for img and sets his attribute src with the image.

Categories

Resources