Hide table row where radio button is selected after form submit - javascript

I have table that is contained in form. The table is built from a CF loop where I have assigned each row ID the NumberID in the sql table. I have a submit button that performs an jquery ajax submit. I need to hide the row that was submitted instead of doing a page reload.
<form id="unsortedTable" >
<input type="submit" id="makeParentButton" value="Make Parent">
</span>
<div class="row-fluid"><p></p>
<table class="table table-bordered table-striped table-hover">
<tbody>
<cfloop query="nonAffiliated">
<tr id="#NumberID#">
<td><input type="radio" name="NumberID" value="#NumberID#"></td>
</tr>
</cfloop>
</tbody>
</table>
</div>
</form>
Then I have the JavaScript that triggers when the submit is performed.
$(document).ready(function(e) {
$("#unsortedTable").submit(sendForm);
});
function sendForm() {
var row = $(this).closest('tr');
$.post('handlers/formHandler.cfm',
$("#unsortedTable").serialize(),function(data,status){
$("#unsortedTable")[0].reset();
row.hide(); //This is just a guess
});
return false
}
Everything works except I can't get that submitted row to hide().

Unless the form is within the table row you are trying to hide, $(this).closest('tr') will not find the row. You probably thought $(this) does refer to the button clicked, but you are using a subit handler on the form, not a click handler on the button.
You might want to find the row a different way, either by id or by finding the button first:
$('#rowId').hide();
or
$('#buttonId').closest('tr').hide();
EDIT:
After re-reading your question more carefully, I realized that you don't want the submit button to be hidden, but the radio button. For that you could do something like this:
$(this).find('input:radio:checked').closest('tr').hide();

Related

Getting the id of a checked checkbox on page load

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.

unable to populate form field

I am taking inputs in the main form which consists of a checkbox.
Before submitting the form i am showing a popup to confirm the submission.
I am unable to populate the checkbox field on the popup
var target = jQuery ('div#confirm_popup div.content');
code for populating the popup:
target.find('randomCheckboxMain').html(form_table.find('#randomCheckbox:checked').val());
here i am finding the check box in main form and then fetching its value and populating the pop up.
this is my main form checkbox, it is part of table with id="form_table"
<table id="form_table">
....
....
<tr>
<td class="field_head">checkh:</td>
<td>
<html:checkbox property="prop" name="randomCheckboxMain" value="yes" disabled="true"></html:checkbox>
</td>
</tr>
this is my popup field
<tr>
<td class="head">checkValue:</td>
<td class="randomCheckbox"></td>
</tr>
Can anyone tell me what i am doing wrong.
you use of class in <td class="randomCheckbox"></td>
So :
change :
.html(form_table.find('#randomCheckbox:checked').val());
To :
.html(form_table.find('.randomCheckbox:checked').val());
You have a class in your td, but you have id in the jQuery.
target.find('.randomCheckbox').html(
form_table.find('[name="randomCheckboxMain"]').val());
Give a ID or class to the checkbox to check easily if it is checked.

How to pass selected rows from a table as request parameters on form submit?

I,m developing a web app(jsp) that extracts some data from a .doc file. Headings from an uploaded document is extracted and listed in a table as below.
Generated output on upload-screenshot
I have added a check-box for each row. Next what I want to do is save the check-box checked rows into an xml. I know how to write xml but how to do it only with the checked rows on form submit? My question summery is, How can I pass those checked rows from table on form submit as request parameters. Thanks in advance.
Creating checkbox array by keeping same name for all checkboxes will give you what you want.
In java, after submitting your form you read it in your servlet as 'request.getParameterValues("checkboxname")'. you will get checked checkboxes from the array returned.
HTML
<table class="table">
<tr value="1" class="side-link">
<td>one</td>
<td>two</td>
</tr>
<tr value="2" class="side-link">
<td>one</td>
<td>two</td>
</tr>
</table>
JavaScript
$(".table").on('click','tr',function(e){
e.preventDefault();
var id = $(this).attr('value');
alert(id);
});
Demo

Toggle checkbox in Angular JS repeater table by clicking enclosing row

I have a table constructed with ng-repeat, where each row has a checkbox set by a value in the JSON data that's being repeated:
<tr ng-repeat="t in tabledata" ng-click="t.isChecked=t.!isChecked">
<td><input type="checkbox" ng-model="t.isChecked"></td>
<td>{{t.firstName}} {{t.lastName}}</td>
</tr>
I would like a click on the row to toggle the checkbox value in that row. I tried the above, but it does not work. Thoughts?
Try this:
ng-click="t.isChecked = !t.isChecked"
Exclamation sign should go in front of t.isChecked.
Also make sure you stop propagation of the click event on the checkbox itself, otherwise clicking on the checkbox will not allow you to check/uncheck anything.
<input type="checkbox" ng-model="t.isChecked" ng-click="$event.stopPropagation()">
Demo: http://plnkr.co/edit/KJziWDmlN2gTbthOF4yJ?p=preview

Jquery Datatable Sort Click Event in Table Header Not in Column Title Text

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.

Categories