I've done some looking around at various examples and options and I've managed to stump myself and wondered if anyone could please help?.
I have a few rows pulled from a table that have a radio button within the row and an id (dynamic), which i wouldn't know as this is the row concatenated with 0 or 1 for show and hide. Below the radio buttons are additional information fields for each choice which match the id of the radio button later. These boxes the user can enter some text. When these fields are checked, the idea is the box is visible for them to add the info and hidden when unselected. The checked boxes work fine, all selected rows show a tick. I am using the same form to create and edit entries.
When a user selects an option and it is saved, on the edit page, the page loads and the checkbox is checked but i need that id of the checkbox to display or hide the row below it. As I don't know these ids, I can't get jQuery to grab it as they'll change and are dynamic.
What I want to do is on page load, grab the selected checkbox ids and then i can use those to show or hide the text boxes below.
Do anyone have any ideas of how precisely I can do this.
Many thanks in advance and sorry to have been initially vague.
Relevant code is...
<div class="form-group">
<label for="exampleInputEmail1">Here are your work experience placements</label>
<div class="row"><!--Start of row -->
<div class="col-md-12">
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">Business name</th>
<th scope="col">Address</th>
<th scope="col">Dates</th>
<th scope="col">Include on CV</th>
<th scope="col">Exclude from CV</th>
</tr>
</thead>
<tbody>
<tr>
<td>Bolton College</td>
<td>Deane Road, Bolton, BL3 5BG </td>
<td>18/05/2018 to 18/05/2018</td>
<td><input type="radio" name="placement_id_0" id="we_check_13_1" value="13_1" onclick=" checkInclude(this.id);" checked/>
<td><input type="radio" name="placement_id_0" id="we_uncheck_13_0" onclick=" checkInclude(this.id);" value="13_0"/></td>
</tr>
</tbody>
</table>
</div>
</div>
</div> <!--End of row -->
<!--Work experience descriptins start here -->
<div class="row"><!--Start of row -->
<div class="col-md-12">
<h3>Work experience descriptions</h3>
<p class="lead">Please complete the brief descriptions of your roles at each of your work experience placements</p>
<hr/>
<div id='we_div_13'>
<p>What did you do at Bolton College between 18/05/2018 and 18/05/2018?</p>
<div class="form-group">
<textarea class="form-control" rows="10" id='description_13' name="we_desc_13" value="251" placeholder="Please detail your role and describe specifically what you did whilst on placement at Bolton College during that time period"></textarea>
</div>
</div>
</div>
</div>
When your table completed rendering, try to run this function:
// Get all input box elements
var boxes = $("input[type='checkbox']");
// Loop through each input box
$.each( boxes, function( key, value ) {
// Check if the input box is checked
if ($(this).prop('checked')) {
// Input box is checked - Add anything you want to happen in the clause below
var boxid = $(this).attr('id')
console.log(boxid + ' is checked');
} else {
// Input box is not checked - Add anything you want to happen in the clause below
var boxid = $(this).attr('id')
console.log(boxid + ' is not checked');
}
});
On another note, the second way to do it is by making the function server side by adding a condition when you bring the data in that if the following table column or object contains data or is null to do something; the above JS will identify all checked and unchecked items client side, I guess your question was how to identify if a box is checked; this should easily do it.
Related
Would like to ask for your help with the following scenario:
I need to access a table, select the row that contains the status = 'GOO' then
I need to click in a button to activate the edit of this row then
I click a at the last column where the check box is located (this check box is responsible to change from False to true the value in the column or vice-versa)
The click at the button I am doing in a function:
function changeConformStatus(statusCode){
element(by.id('btnEdit-US.'+statusCode)).click();
browser.sleep(500);
}
Inside the same function above, I also have the action to click at the checkbox after it is displayed and the click to save it:
element(by.css('[editable-checkbox="scopeValue.getConformMapping(scopeValue.getDataRow('+'US.'+statusCode+')).conform"]')).click();
element(by.id('btnSubmit-US.'+statusCode)).click();
All the elements have the Status code after the 'US.' so thats why I am receiving the Status from the test and then passing it directly to the element locator.
My question/problem is... every time I execute the test, it works for the click at the button to edit (located in the first column of the table and same row as the checkbox I want to click) but fails for the checkbox:
"No element found using locator: By(css selector, [editable-checkbox="scopeValue.getConformMapping(scopeValue.getDataRow(US.GOO)).conform"])"
So.. How can I click at this checkBox then?
HTML:
<table id="datatableDir" class="table table-hover table-bordered table-striped dataTable no-footer" style="width: 100%" role="grid" aria-describedby="datatableDir_info">
<thead>...</thead>
<tbody>
<tr role="row" class="odd">
<td id="2-4" class="ng-scope">
<span editable-checkbox="scopeValue.getConformMapping(scopeValue.getDataRow('US.GOO')).conform" e-name="conform" e-form="scopeValue.rowforms['US.GOO']" e-required="" class="ng-scope ng-binding editable editable-hide">false</span>
<span class="editable-wrap editable-checkbox ng-scope">
<span class="editable-controls">
<input type="checkbox" name="conform" required="required" class="editable-input ng-touched ng-dirty ng-valid-parse ng-not-empty ng-valid ng-valid-required" ng-model="$data" style="">
<div class="editable-error ng-binding ng-hide" ng-show="$error" ng-bind="$error" style=""></div>
</span>
</span>
</td>
</tr>
</tbody>
</table>
UPDATE
#Sanja's answer was 99% correct, I had to do this in order to solve the problem:
element(by.xpath("//*[#editable-checkbox=\"scopeValue.getConformMapping(scopeValue.getDataRow("+'\'US.'+statusCode+"\')).conform\"]/../span/span/input")).click();
According to the code it looks like you want to click the span, not the checkbox.
In order to click the checkbox, you'll need to select the input element:
element(by.xpath(".//[#editable-checkbox='scopeValue.getConformMapping(scopeValue.getDataRow('+'US.'+statusCode+')).conform/../span[1]/span/input")).click()
I have this table which I implement the Jquery-DataTables
and in that I have a Select All function that works well;
<thead>
<tr>
<th>
<label>
<input type="checkbox" > All
</label>
</th>
</tr>
</thead>
the problem is when I clicked the checkbox the sort event of table is also being performed. what I want is, when I click on the Text "All" or the Checkbox the sort event will not perform, instead, it will only perform as usual if the table header(outside the Text or Checkbox) and the Sort-Icon is clicked.
any idea how to do it?
I have solved this issue by running this script (from this) after initialization of Jquery-Datable to my table;
$('input').click(function (event) {
event.stopPropagation();
});
hope it will help someone someday.
I created a popup box using jQuery. The popup box contains a button named submit.
1.In a table <td>, there are two buttons "Add the name" and "Add from list". When the user clicks "Add the name", a popup box will open and get the input from the user (namely text data).
2.After entering the text data in the popup box, they should press the submit button. On clicking submit, the input text entered by the user is displayed in a <div id="dynamic"></div> in a <td>. (See HTML below).
3.In the HTML below, the second <tr>: in a separate I put some text, i.first Aid notes with a check box ii.sent to sick bay with a check box iii.ambulance with a checkbox.
4.When the user clicks the submit button, the text data is displayed in the name <td> cell (See HTML below). But what I want is at the same time the above mentioned check box with label should bind in their respective <td>s in a table dynamically (See HTML below, I placed it in individual <td> (i.e when the user clicks the submit button the check box also should display, this should happen at every click on submit).
I don't know how to perform using Javascript or jQuery. Can any one please come up with code.
<table width="100%" cellpadding="0" cellspacing="0" id="rounded_border">
<tr>
<td colspan="4"><p><em>Please record the name</em></p></td>
</tr>
<tr>
<td><strong>Involved</strong></td>
<td><button>Add a name</button></td>
<td><p align=center>or</p></td>
<td>Add from list</td>
</tr>
<tr id="list" class="ir-shade"><div id="dynamic">
<td><span class="delete_icon">x</span>Atil</td>
<td>
<input id="firstaid" onclick="addtreatment();" type="checkbox"/>
FirstAid needed
</td>
<td>
<input class="sickbay" onclick="addtreatment();" type="checkbox"/>
Sent to Sick bay
</td>
<td>
<input class="ambulance" onclick="addtreatment();" type="checkbox"/>
Ambulance
</td>
</div>
</tr>
</table>
sample fiddle
This is what i required as ouptup,but it is displayed as in a single <td>,i want it to be happen that eack check box and their respective label in individual <td>.
How to do with jquery/javascript. Thanks.
That would be in your 'addtreatment' function, what code do you currently have there?
I'm trying to write a web form, which will have selectable options based on users input from earlier in the form.
Where I'm getting stuck is;
I have a table room types, which is just td tags with input tags (type=text). These are filled in by a user, so I've no idea what they are..
I've got a button to add extra lines to this table (Jquery to add another td tag and input tag)
Users add as many lines as needed
The next part of the form is to fill in Rooms, and select the type for each room. The table layout is the same (except there are two columns, rather than one), and extra lines are added via another button with Jquery.
What I'd like to be able to do, is for new lines added to have two columns in the table. One input text field, and the other a select box with options taken from the table above.
I've managed to get this working to a point. But as users may go back to edit options from the original (room types) table, I need the select boxes to adjust their values based on what the original table currently says.
I can get this working by emptying and re-populating my select boxes everytime one of the input fields accessed (using OnBlur, which is probably not the most effective way to do this), but since it removes entries from the bxes, and then re-populates, any of the select boxes that have been populated already get reset. I only want invalid options (i.e. values that do not exist in the original table) to be reset.
I've been looking/playing at this for a long time now, but my programming abilities are only what I've taught from here and google, whilst messing around on a few very small things before...
My HTML code as it stands (well, part of my code, I've removed all the irrelevant code to keep it simple) is here:
<div id="rm_types_info">
<table id="room_types_table">
<tr>
<td><input type="text" class="room_types" onblur="edit_rooms_select();" /></td>
</tr>
</table>
<button type="button" onclick="rmtypes('room_types_table');">Add Another Room Type</button>
</div>
<div id="rooms_info">
<table id="rooms_table">
<tr>
<th>Room Number</th>
<th>Room Type</th>
</tr>
<tr>
<td><input type="text" /></td>
<td>
<select class="room_type_select">
<option value="Please Choose">Please Choose</option>
</select>
</td>
</tr>
</table>
<button type="button" onclick="rooms('rooms_table');">Add Another Room</button>
</div>
and my JQuery is;
<script>
var userscounter=2
var rmtypescounter=1
var roomscounter=2
function users(ID){
document.getElementById(ID).insertRow(userscounter).innerHTML = '<td><input type="text" /></td><td><input type="text" /></td>';
userscounter++;
};
function rmtypes(ID){
document.getElementById(ID).insertRow(rmtypescounter).innerHTML = '<td><input type="text" class="room_types" onblur="edit_rooms_select();" /></td>';
rmtypescounter++;
}
function rooms(ID){
document.getElementById(ID).insertRow(roomscounter).innerHTML = '<td><input type="text" /></td><select class="room_type_select"><option value="Please Choose">Please Choose</option></select></td>';
roomscounter++;
};
function edit_rooms_select(){
var roomtypelist = $('.room_type_select');
roomtypelist.empty()
$('#room_types_table tr td input').each(function(){
var text = $(this).val();
roomtypelist.append('<option value='+text+'>'+text+'</option>');
});
}
</script>
I've removed the Jquery that was removing the duplicates, since it was definately not working how it needs to...
I'm aware that I may be going about this completely the wrong way, and if using td tags or inputs etc is completely wrong, I'm happy to change the whole form it necessary.
I'm sure this isn't the most effective way to do what I need, but this is how I managed to get it to work...
My HTML...
<div id="rm_types_info">
<table id="room_types_table">
<tr>
<td><input type="text" name="2" class="room_types" onblur="edit_rooms_select();" /></td>
</tr>
</table>
<button type="button" onclick="rmtypes('room_types_table');">Add Another Room Type</button>
</div>
<div id="rooms_info">
<table id="rooms_table">
<tr>
<th>Room Number</th>
<th>Room Type</th>
</tr>
<tr>
<td><input type="text" /></td>
<td>
<select class="room_type_select" id="room_type_select1" >
<option value="1">Please Choose</option>
</select>
</td>
</tr>
</table>
<button type="button" onclick="rooms('rooms_table');edit_rooms_select();">Add Another Room</button>
</div>
And the JQuery scripts relevant. In particular, it was the final function "edit_rooms_select()", and specifically the "Add new options to each select" that I was struggling with.
<script>
var rmtypescount=3;
var room_type_select_count=2;
function rmtypes(){
$('#room_types_table tr:last').after('<tr><td><input type="text" name='+rmtypescount+' class="room_types" onblur="edit_rooms_select();" /></td></tr>');
rmtypescount++;
};
function rooms(){
$('#rooms_table tr:last').after('<tr><td><input type="text" /></td><td><select id="room_type_select'+room_type_select_count+'" class="room_type_select"><option value="1">Please Choose</option></select></td></tr>');
room_type_select_count++
};
function edit_rooms_select(){
$('#room_types_table tr td input').each(function(){
var name = $(this).attr('name');
var value = $(this).val();
//Add New Options to each select
$('#rooms_table select').each(function(){
var last = $(this).children('option:last').val();
if (name > last) {
$(this).append('<option value="'+name+'">'+value+'</option>');
};
});
//Change any room types that have been edited
$('.room_type_select option').each(function(){
var match = $(this).val();
if(name == match){
$(this).text(value)
};
});
//Remove Blank Entries
if(value == ''){
$('.room_type_select option[value='+name+']').remove();
};
});
};
</script>
I think that the edit_rooms_select function is much more expensive than it needs to be. For what I require, this isn't going to be a problem, but I would be very interested to see how other people suggest the lists are edited, following my requirements..
- All user inputs from the room_types_table must be options in the select boxes in the rooms_table
- Any input changed in the room_types_table must have its relevant option in the select boxes changed to match
- Any input that is left blank (or later deleted) from the room_types_table must be removed from the select boxes
- Any select box that has a selection which is then removed from the room_types_table must be reset back to its original "Please Choose" option.
If anyone can suggest better ways to do this, or can tidy my code in any way, I'd like to see the code, and also have it explained, as I'm very inexperienced with Javascript/Jquery.
I have a form for tracking work progress of each staff. Since one staff can do many tasks at a day. Therefore to save working time, I created checkboxes for task so that i can select and save as multi-records at a time. My code is as below
<td colspan="2">
<%
if rsPdtn_sizeColor.eof then
call displayNotFoundRecord
Else
Do Until rsPdtn_sizeColor.Eof
%>
<div style="width:120px; float:left"><input type="checkbox" name="pdtn_szcl_id" value="<%=rsPdtn_sizeColor.fields.item("pdtn_szcl_id")%>"> <%=rsPdtn_sizeColor.fields.item("pdtn_st_size")%> <%=rsPdtn_sizeColor.fields.item("pdtn_st_color")%></div>
<div style="width:50px; float:left"><input type="text" name="pdtn_qty" value="<%=rsPdtn_sizeColor.fields.item("pdtn_st_qty_est")%>" size="7"></div>
</div>
<div style="clear:both"></div>
<%
rsPdtn_sizeColor.movenext
Loop
End if
rsPdtn_sizeColor.movefirst
%>
</td>
<td><input name="pdtn_note" value="<%=pdtn_note%>" size="39"></td>
However, with this code, only field "pdtn_szcl_id" that can pass only recordset that i checked. I want "pdtn_qty" to do the same as well. So could you please help me on this. Thank you
The problem is that you should not have form elements like input with duplicate names. There are a couple of possible solutions but this is probably the safest.
In your code add the database id to the name of the checkbox and qty textbox, something like this:
<div style="width:120px; float:left"><input type="checkbox" name="pdtn_szcl_id_<%=rsPdtn_sizeColor.fields.item("pdtn_szcl_id")%>"> <%=rsPdtn_sizeColor.fields.item("pdtn_st_size")%> <%=rsPdtn_sizeColor.fields.item("pdtn_st_color")%></div>
<div style="width:50px; float:left"><input type="text" name="pdtn_qty_<%=rsPdtn_sizeColor.fields.item("pdtn_szcl_id")%>" value="<%=rsPdtn_sizeColor.fields.item("pdtn_st_qty_est")%>" size="7"></div>
Then when you want to retrieve the values you will need to open your recordset again and loop through the rows checking if the checkbox has been checked and getting the value, something like this:
<%
'Open your rsPdtn_sizeColor recordset again
Do Until rsPdtn_sizeColor.Eof
If Request.Form("pdtn_szcl_id_" & rsPdtn_sizeColor.fields.item("pdtn_szcl_id")) = "on" Then
'This checkbox was checked
id = rsPdtn_sizeColor.fields.item("pdtn_szcl_id")
qty = Request.Form("pdtn_qty_" & rsPdtn_sizeColor.fields.item("pdtn_szcl_id"))
'This gives you the ID and Qty entered for each row
End If
rsPdtn_sizeColor.movenext
Loop
%>
NB. I used Request.Form but if you use form method GET then you should change to Request.QueryString.