How to repeat radio button in a table using foreach loop - javascript

I have a table, in that table there have two radio button, and the table data populate from database, I am using foreach loop, the radio button is repeated in a row but when i select one radio button another is deselect automatically,
Here is my code through which i want achive my task.
$(document).ready(function() {
$(document).on('click', 'input[type=radio][name=test]', function()
{
var clicked = localStorage['clicked'];
$('.' + related_class).prop('disabled', false);
$('input[type=radio][name=test]').not(':checked').each(function()
{ var other_class = $(this).val();
$('.' + other_class).prop('disabled', true);
});
});
});
<table>
<c:forEach items="${List2}" var="as">
<tr>
<td><input type="hidden" name="Id" value="${as.id}"/>${as.id}</td>
<td><input type="hidden" name="RuleName" value="${as.ruleName}"/>${as.ruleName}</td>
<td> <input type="radio" name="fixed" value="Fixed"></td>
<td> <input type="radio" name="repeats" VALUE="radio20"><select name="Repeats" style="width: 80px;" >
<c:forEach items="${listfrequency}" var="freq">
<option value="${freq.frequencyName}"/>
<c:out value="${freq.frequencyName}" />
</c:forEach></select></td>
<td>
</tr>
</c:forEach>
</table>

It is because the name of the all radio inputs are same (repeats and fixed).
You need to make them unique for each row so that by selecting one radio button other doesn't deselect automatically. Best way to make them unique is append index value of foreach loop to the name of radio buttons.
I don't know the syntax how to get index/counter value of foreach loop in your example. But it would be as follow.
<td> <input type="radio" name="fixed${indexValue}" value="Fixed"></td>
<td> <input type="radio" name="repeats${indexValue}" VALUE="radio20"><select name="Repeats" style="width: 80px;" >
<c:forEach items="${listfrequency}" var="freq">
<option value="${freq.frequencyName}"/>
<c:out value="${freq.frequencyName}" />
</c:forEach></select></td>
${indexValue} replace this with your actual index/counter variable.

Related

how to detect which table row is clicked when ng-repeat is on the <tr> tag | Angularjs

I have a table row with input columns, i want to get the value (id) of a td, and for some reason, i have to do it by calling a function when td is clicked
HTML CODE:
<tr ng-repeat="fr in nonConfirmedFactureRetour">
<td>
//storing id in the data-item Attr.
<input id="pending_item_name" data-item="{{fr.id}}" value="{{fr.facture_item_name}}" type="text"/>
</td>
<td>
<input id="pending_cls_crt" value="{{fr.fcls_crt}}" type="text"/>
</td>
<td>
<input id="pending_piece" value="{{fr.fpiece}}" type="text"/>
</td>
<td>
<input id="pending_dateCom" value="{{fr.dateCom}}" type="text"/>
</td>
<td>
<input id="pending_dateRec" value="{{fr.dateRec}}" type="text"/>
</td>
<td>
// calling function to hget the id
<input ng-click="confirmEntity_retour();" type="button" value="Confirm"/>
</td>
</tr>
JS Code:
$scope.confirmEntity_retour=function(){
var item_nameId=$("#rfi").attr("data-itid");
alert(item_nameId); //alert the id when calling this function
}
I expect to get the id of the input attr. when clicking on the submit
but the problem is that i am getting always the first id no matter what td is clicked
Using JQuery to get data from the DOM is against the paradigm of AngularJS. You should use data-binding instead. You can pass the item's ID as an argument to the confirmEntity_retour function.
HTML template:
<input ng-click="confirmEntity_retour(fr.id);" type="button" value="Confirm"/>
Controller:
$scope.confirmEntity_retour = function(id) {
alert(id);
}
Try passing the entire item into the function as an argument.
$scope.confirmEntity_retour=function(item){
alert(item.id)
}
<input ng-click="confirmEntity_retour(fr);" type="button" value="Confirm"/>

Javascript: Disable Radio buttons by selecting value

I want to use radio buttons for making the appointment in a PHP web app.
I have a list of Radio Buttons as below, the user can select any of this radio button and its value stored in the database on be half of the appointment date and time.
<tr>
<td>
<label><input type="radio" name="book" value="1" required>11.00 AM</label>
</td>
<td>
<label><input type="radio" name="book" value="2" required>11.10 AM</label>
</td>
<td>
<label><input type="radio" name="book" value="3" required>11.20 AM</label>
</td>
<td>
<label><input type="radio" name="book" value="4" required>11.30 AM</label>
</td>
<td>
<label><input type="radio" name="book" value="5" required>11.40 AM</label>
</td>
<td>
<label><input type="radio" name="book" value="6" required>11.50 AM</label>
</td>
<td>
<label><input type="radio" name="book" value="7" required>12.00 PM</label>
</td>
</tr>
Also I want to disable the radio buttons which are already selected and stored in the database.
So on page load, i am getting previously stored radio button values using AJAX as below,
$( document ).ready(function() {
$.ajax({
type : 'POST',
url : 'http://localhost/design-ci/booking/abc',
dataType : 'json',
encode : true
});
});
and this reruns/response an array as below which contains radio button values that stored in the database,(I hope the coding for "http://localhost/design-ci/booking/abc" function/action is no need for this)
[{"value":"1"},{"value":"4"},{"value":"6"}]
and my question is how to disable the radio buttons which contains in the array.
The values in the array are the values which previous users selected and stored in the database and the current users cannot select them as they are booked already.
Thanks in advance.
Let me explain simply:
1) Get existing values from database. In your case 1, 4, 6.
2) Create an array of time slots as mentioned below.
3) Loop over the array and print the checkboxes.
4) If value is present in existing values, add disabled attribute, else, nothing.
<?php
$existingValues = array(1, 4, 6);
$timeSlots = array();
$timeSlots[1] = '11.00 AM';
$timeSlots[2] = '11.10 AM';
$timeSlots[3] = '11.20 AM';
$timeSlots[4] = '11.30 AM';
$timeSlots[5] = '11.40 AM';
$timeSlots[6] = '11.50 AM';
$timeSlots[7] = '12.00 AM';
if (! empty($timeSlots)) {
?>
<tr>
<?php
foreach ($timeSlots as $val => $display) {
$disabled = in_array($val, $existingValues) ? 'disabled' : '';
?>
<td><label><input type="radio" name="book" value="<?php echo $val;?>" required <?php echo $disabled;?>><?php echo $display;?></label></td>
<?php
}
?>
</tr>
<?php
}
?>
Reference of disabled
Also I want to disable the radio buttons which are already selected and stored in the database.
Do this directly from PHP,maybe in a separate file which you then include?Something like this,pseudo code..
<?php
$age = array("1"=>"0", "2"=>"1", "3"=>"0");
for loop with array length
if(key value==0)
print radio button with checkbox enabled
else
print radio button with checkbox disabled
?>
If u want to do this using java-script one simple way to do this, is use fetching element property of java-script
add id="some distinct name for each label not same as name are!" to your html code along with your name="book"
use:
document.getElementById("idname").disabled = true;
this will disable the radio buttons associated with the corresponding id.
so, whichever radio buttons are already booked u can fetch them form your db or maintain a log to disable the list of radio buttons just by iterating them in a loop

Update multiple radio buttons based on select option

I'm trying to update a series of radio button in a sharepoint 2013 custom new form, based on a select option. My code so far:
function setTierDestinations(destination) {
var radios = $("#DeltaPlaceHolderMain").find("span[title='" + destination + "']:first-child");
console.log(radios);
$.each(radios, function(i, value) {
$(value).prop("checked",true);
});
}
document.getElementByID(ctl00_ctl43_g_f596e023_21bc_42e0_b68b_c8a7b74467a3_ff151_ctl00_DropDownChoice).onchange = function () {
var destination = document.getElementByID(ctl00_ctl43_g_f596e023_21bc_42e0_b68b_c8a7b74467a3_ff151_ctl00_DropDownChoice).value;
setTierDestinations(destination);
};
<select name="ctl00$ctl43$g_f596e023_21bc_42e0_b68b_c8a7b74467a3$ff151$ctl00$DropDownChoice" id="ctl00_ctl43_g_f596e023_21bc_42e0_b68b_c8a7b74467a3_ff151_ctl00_DropDownChoice" title="Destination" class="ms-RadioText">
<option selected="selected" value=""></option>
<option value="Store">Store</option>
<option value="Shed">Shed</option>
</select>
<span id="radioA"><span dir="none">
<table cellpadding="0" cellspacing="1">
<tr>
<td>
<span class="ms-RadioText" title="Store">
<input id="ctl00_ctl43_g_f596e023_21bc_42e0_b68b_c8a7b74467a3_ff271_ctl00_ctl00" type="radio" name="ctl00$ctl43$g_f596e023_21bc_42e0_b68b_c8a7b74467a3$ff271$ctl00$RadioButtons" value="ctl00" checked="checked" /><label for="ctl00_ctl43_g_f596e023_21bc_42e0_b68b_c8a7b74467a3_ff271_ctl00_ctl00">Store</label>
</span>
</td>
</tr>
<tr>
<td>
<span class="ms-RadioText" title="Shed">
<input id="ctl00_ctl43_g_f596e023_21bc_42e0_b68b_c8a7b74467a3_ff271_ctl00_ctl01" type="radio" name="ctl00$ctl43$g_f596e023_21bc_42e0_b68b_c8a7b74467a3$ff271$ctl00$RadioButtons" value="ctl01" /><label for="ctl00_ctl43_g_f596e023_21bc_42e0_b68b_c8a7b74467a3_ff271_ctl00_ctl01">Shed</label>
</span>
</td>
</tr>
</table>
</span></span>
All the content in #radioA gets duplicated several times as #radioB, #radioC, etc.
I think I'm not selecting the radios var properly. In console I'm getting an array of multiple "span.ms-RadioText" where I should be getting inputs. Is this the correct usage of first-child?
Your use of first-child isn't selecting the children of your target element. You want .children()
This should work
var radios = $("#DeltaPlaceHolderMain").find("span[title='" + destination + "']").children()[0];
Which will select the first child of the span.
The :first-child selector doesn't select the first child of the element, but the element that matches the selector that is the first child of the parent.
http://www.w3.org/wiki/CSS/Selectors/pseudo-classes/:first-child
To reiterate and elaborate on what Zakaria said,
getElementByID is written incorrectly. It should be document.getElementById
Note the lowercase d.
Your id should be in quotes, as it is a string, and not a variable. So document.getElementById('ctl00_ctl43_g_f596e023_21bc_42e0_b68b_c8a7b74467a3_ff151_ctl00_DropDownChoice').onchange etc.

jQuery - checkboxes selecting all on a row or with similar names & ID's

Using jQuery 1.9.1 & getting XML returned from a query that needs to be displayed in a web page as shown in the picture below. I had asked a similar question several days ago but was all over the place in what I was asking. Hope to ask better questions this time.
For the items in the picture, the XML input would be:
<Classrooms>
<Room Number="3">
<Machine>310</Machine>
<Machine>320</Machine>
<Machine>340</Machine>
<Machine>350</Machine>
</Room>
<Room Number="8">
<Machine>810</Machine>
<Machine>820</Machine>
<Machine>840</Machine>
</Room>
<Room Number="10">
<Machine>1010</Machine>
<Machine>1020</Machine>
</Room>
</Classrooms>
The code below is a function that is called upon a successful AJAX GET and builds the checkboxes in a table on the web page.
var $roomList = $( items );
var roomListString = jQ_xmlDocToString( $roomList );
var roomListXML = $.parseXML(roomListString);
$(roomListXML).find("Row").each(function() {
var activeRooms = $( roomListXML ).find("Row").text();
var nbrRooms = $(activeRooms).find("Room").size();
$(activeRooms).find("Room").each(function() {
var roomNo = $(this).attr("Number");
var roomchk = "Room"+roomNo;
var $tr = $("<tr />");
$tr.append('<td><input type="checkbox" name="'+roomchk+'" id="'+roomchk+'" class="checkall" /><label for="'+roomchk+'">Room '+roomNo+'</td>');
$("#mytable").append( $tr );
$(this).children().each(function() {
var machID = $(this).text();
var idname = "Room"+roomNo+"Mach"+machID;
$tr.append('<td><input type="checkbox" name="'+idname+'" id="'+idname+'" /><label for="'+idname+'">'+machID+'</td>');
$("#mytable").append( $tr );
});
});
});
When the above code is run on the data, the HTML in the table is as shown below.
<tbody>
<tr>
<td>
<input name="Room3" id="Room3" class="checkall" type="checkbox" />
<label for="Room3">Room 3</label>
</td>
<td>
<input name="Room3Mach310" id="Room3Mach310" type="checkbox" />
<label for="Room3Mach310">310</label>
</td>
<td>
<input name="Room3Mach320" id="Room3Mach320" type="checkbox" />
<label for="Room3Mach320">320</label>
</td>
<td>
<input name="Room3Mach340" id="Room3Mach340" type="checkbox" />
<label for="Room3Mach340">340</label>
</td>
<td>
<input name="Room3Mach350" id="Room3Mach350" type="checkbox" />
<label for="Room3Mach350">350</label>
</td>
</tr>
<tr>
<td>
<input name="Room8" id="Room8" class="checkall" type="checkbox" />
<label for="Room8">Room 8</label>
</td>
<td>
<input name="Room8Mach810" id="Room8Mach810" type="checkbox" />
<label for="Room8Mach810">810</label>
</td>
<td>
<input name="Room8Mach820" id="Room8Mach820" type="checkbox" />
<label for="Room8Mach820">820</label>
</td>
<td>
<input name="Room8Mach840" id="Room8Mach840" type="checkbox" />
<label for="Room8Mach840">840</label>
</td>
</tr>
<tr>
<td>
<input name="Room10" id="Room10" class="checkall" type="checkbox" />
<label for="Room10">Room 10</label>
</td>
<td>
<input name="Room10Mach1010" id="Room10Mach1010" type="checkbox" />
<label for="Room10Mach1010">1010</label>
</td>
<td>
<input name="Room10Mach1020" id="Room10Mach1020" type="checkbox" />
<label for="Room10Mach1020">1020</label>
</td>
</tr>
</tbody>
Selection of any checkbox on the page will enable a SUBMIT button on the page, which when clicked will pass the value of the boxes checked into another function. The user can select any number of the individual boxes (the ones with the number beside them), regardless of the room those items are associated with. When the user selects a Room checkbox though, ALL the individual checkboxes for that room should also be checked. The individual values are the ones I want. When the SUBMIT button is clicked, the individual values are all that will be sent to that function.
I had looked at this topic about using a checkbox class to select all.
I'm using the code below to find what's checked. I can see when I select an individual box that it gets added to the array. I can also see when I select a Room that the checkall is found, but I can't seem to make the individual checkboxes get checked once I do. I had been attempting to use the Attribute Starts With jQuery selector, but haven't been able to get it to check the boxes.
$("#mytable").click(function(e) {
var ele = $(this).find(":checkbox");
var zall = $(this).find(":checkbox.checkall:checked");
if (zall) {
var zname = $(zall).attr("name");
var selectallmachines = "input[name^='" + zname +"']:checked:enabled";
$( $(selectallmachines), "#mytable");
}
var arr = [];
$(":checkbox:checked").each(function(i) {
arr[i] = $(this).val();
});
});
I'm sure that it is something that I'm overlooking, but what am I missing? Would appreciate any suggestions or guidance on what I'm doing wrong, or if there's perhaps a better way to do what I'm doing.
Thanks!
You can do something like this
$('.checkall').change(function(){
$('input[id^='+this.id+']').prop('checked',this.checked);
});
when .checkall is clicked/changes - set checked property on all inputs with an id that starts with the current clicked elements id
FIDDLE
Though you probably should delegate since you are using ajax to get the elements - this is assuming #mytable exists on DOM Ready - or replace with an ancestor element that does
$('#mytable').on('click','.checkall',function(){
$('input[id^='+this.id+']').prop('checked',this.checked);
});
another alternative is to give the checkall id as a class to the relative checkboxes
$tr.append('<td><input type="checkbox" name="'+idname+'" id="'+idname+'" class="'+roomchk+'"/><label for="'+idname+'">'+machID+'</td>');
then you can do
$('#mytable').on('click','.checkall',function(){
$('input.'+this.id).prop('checked',this.checked);
});
FIDDLE

How can I add to my table filter to allow for multiple checkbox selections, as well as filtering from a dropdown?

I've got a table that can be filtered by multiple checkboxes, as well as by a "select" dropdown. Essentially, what I want to be able to do is click on multiple checkboxes in order to find each row containing that class, so class 1 and 3, or example, and then filter it by the location.
I've gotten really close at this point, where I can select both the location (which is also a class, two letters for state abbreviations), and a single class from the checkboxes, but I want people to be able to compare multiple classes from the checkboxes.
The problem is something I understand, but can't seem to figure out how to fix. The code adds each class to the end of the "tr". This means if you apply 2 filters from the checkboxes, it finds nothing, instead of finding everything from each filter. While this behavior is perfectly functional for 1 checkbox and the Dropdown, meaning it will only give me Filter 1 values from Tennessee, I want it to be able to give me Filter 2, Filter 3, and Filter 4 at the same time, if I so choose.
Any ideas on how to alter this to make it allow multiple checkbox selections?
By the way, I'm very limited in what JavaScript/jQuery plugins I can use, which is why I'm fighting so hard to use tableSorter with this solution.
My HTML:
<form name="FilterForm" id="FilterForm" action="" method="">
<input type="checkbox" name="filterStatus" value="1" /><label for="filter_1">Filter 1</label>
<input type="checkbox" name="filterStatus" value="2" /><label for="filter_2">Filter 2</label>
<input type="checkbox" name="filterStatus" value="3" /><label for="filter_3">Filter 3</label>
<input type="checkbox" name="filterStatus" value="4" /><label for="filter_4">Filter 4</label>
<select type="dropdown" name="filterStatus" id="chooseState" class="filter">
<option value="ZZ">--Choose State--</option>
<option value="TN">Tennessee</option>
<option value="MO">Missouri</option>
<option value="NV">Nevada</option>
<option value="IA">Iowa</option>
</select><label>State</label>
</form>
<table id="StatusTable">
<tbody>
<tr class="1 TN">
<td class="Name"></td>
<td class="ID"></td>
<td class="Type"></td>
<td class="Location">City, Tennessee</td>
<td class="Class"></td>
<td class="Received"></td>
<td class="Action"></td>
<td class="Status">Active</td>
</tr>
</tbody>
</table>
JavaScript:
$("input[name='filterStatus'], select.filter").change(function () {
var classes = "";
var stateClass = ""
$("input[name='filterStatus']").each(function() {
if ($(this).is(":checked")) {
classes += "." + $(this).val();
}
});
$("select.filter").each(function() {
if ($(this).val() != 'ZZ') {
stateClass += "." + $(this).val();
}
});
if (classes == "" && stateClass == "") {
// if no filters selected, show all items
$("#StatusTable tbody tr").show();
} else {
// otherwise, hide everything...
$("#StatusTable tbody tr").hide();
// then show only the matching items
rows = $("#StatusTable tr" + classes + stateClass);
if (rows.size() > 0) {
rows.show();
}
}
});
Since you know the problem, ill skip the explication and jump to the solution.
Use the .filter() method mixed with an array.
Instead of expending a string, push the class name into an array :
var classes = [];
$("input[name='filterStatus']").each(function() {
if ($(this).is(":checked")) {
classes.push('.'+$(this).val());
}
});
Then when selecting the row, use .filter() just like that :
rows = $("#StatusTable tr" + stateClass).filter(classes.length ? classes.join(',') : '*')
Then everything work fine!
Fiddle

Categories