JS or Jquery: how to add an "option" to a checkbox - javascript

The checkbox created in MS Sharepoint form has this html structure;
<div class="fd_field " fd_name="purchase_order" style="">
<div class="fd_title" style="width: 150px;">purchase_order</div>
<div class="ms-formbody fd_control" fd_type="MultiChoice">
<span dir="none">
<table cellspacing="1" cellpadding="0">
<tbody>
<tr>
<td><span class="ms-RadioText" title="Carica dati">
<input id="ctl00_ctl40_g_2bbe8d3f_1b61_4103_9ca6_2e943eb28860_purchase_orderField_ctl00_ctl00" type="checkbox" name="ctl00$ctl40$g_2bbe8d3f_1b61_4103_9ca6_2e943eb28860$purchase_orderField$ctl00$ctl00">
<label for="ctl00_ctl40_g_2bbe8d3f_1b61_4103_9ca6_2e943eb28860_purchase_orderField_ctl00_ctl00">Carica dati</label></span>
</td>
</tr>
</tbody>
</table>
</span>
</div>
</div>
with ajax i got other data that i want to add as option in that checkbox.
The loop to retrieve data is not a problem but, how can i append those data in a new row of the checkbox?
In the past i was able to edit dropdown field but it not works with checkbox.
I was thinking to the a solution like this:
var f = '<tr><td><input type="checkbox" name="xxx" id="ss"><label for="ss">Other</label></td></tr>';
$( ".ms-RadioText" ).parent().append(f);
Thanks

You mean this?
PS: I would not expect a table in a span !
var f = '<tr><td><span class="ms-RadioText" title="XXX"><input id="ss" type="checkbox" name="xx"><label for="ss">Other</label></span></td>';
$(".ms-RadioText").closest("tbody").append(f);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="fd_field " fd_name="purchase_order" style="">
<div class="fd_title" style="width: 150px;">purchase_order</div>
<div class="ms-formbody fd_control" fd_type="MultiChoice">
<span dir="none">
<table cellspacing="1" cellpadding="0">
<tbody>
<tr>
<td><span class="ms-RadioText" title="Carica dati"><input id="xx" type="checkbox" name="xx"><label for="xx">Carica dati</label></span></td>
</tr>
</tbody>
</table>
</span>
</div>
</div>

Related

Submit all data from DataTable table with checkboxes using jQuery

So I have this Data Table [Fig. 1] inside a form which submits the table's data, the problem is it doesn't submit all the checked rows in all pages, it only submits what's shown. Then I found a way to fix that "code on[Fig. 2]" but now yes it submits all data from other pages but how can I like connect and submit layer_box's value with data-checkid's value.
The scenario is all the checked rows that'll be submitted will run a query like this
UPDATE table SET sub_group = **layer_box** WHERE id = **data-checkid's value**
[Fig.1]
<form method="POST" id="manage-layers" name="manage-layers">
<button class="btn btn-warning" type="submit" id="save_layers">
<i class="fa fa-save"></i>
<strong>Save</strong>
</button>
<table id="subgrp_layertbl" class="table table-responsive text-dark">
<thead class="thead-dark">
<tr>
<th scope="col">ID</th>
<th scope="col">Layer Name</th>
<th scope="col">Associate Layer</th>
</tr>
</thead>
<tbody>
<tr>
<td width="1%">1</td>
<td width="50%">Value 1</td>
<td width="30%">
<div class="text-center">
<input class="form-check-input layer_box" type="checkbox" name="layer_box" value="12,27" data-checkid="40" >
</div>
</td>
</tr>
<tr>
<td width="1%">3</td>
<td width="50%">Value 3</td>
<td width="30%">
<div class="text-center">
<input class="form-check-input layer_box" type="checkbox" name="layer_box" value="14" data-checkid="3" >
</div>
</td>
</tr>
<tr>
<td width="1%">8</td>
<td width="50%">Value 8</td>
<td width="30%">
<div class="text-center">
<input class="form-check-input layer_box" type="checkbox" name="layer_box" value="16" data-checkid="8" >
</div>
</td>
</tr>
</tbody>
</table>
</form>
[Fig.2]
<script type="text/javascript">
$(document).ready(function (){
var table = $('#subgrp_layertbl').DataTable();
$('#manage-layers').on('submit', function(e){
e.preventDefault();
var data = table.$('input,select,textarea').serializeArray();
console.log(data);
});
});
</script>
I really think this should answer your problem
https://stackoverflow.com/a/59550389/10888948 and just add other functions if you ever have more.

angularjs ng-form and ng-repeat with input validation and submit action

Angular 1.6.2
Try to iterate over elements of collection inputted by user and then check their validity and enable submit action if validation passes.
I try to use ng-form for this purpose and have two approach but each of them has side-effect.
First approach (ng-form at the table level):
<table class="datatable table table-stripped table-responsive" ng-form="form">
<thead>
<tr class="headers">
<th ng-repeat="header in ctrl.headers">{{header}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="linkDelay in ctrl.currentLinkDelays">
<td>{{linkDelay.label}}</td>
<td>{{linkDelay.value}}</td>
<td id="proposed-ld-input-column" width=40%>
<input id="proposed-ld-input" name="input"
class="form-control ng-invalid-min ng-invalid-max ng-invalid-required"
type="number" ng-model="ctrl.inputs[linkDelay.property]"
data-ng-required="true" min="0" max="180"/>
<div class="error" data-ng-show="form.input.$error.required">
Message required
</div>
<div class="error" data-ng-show="form.input.$error.max">
Message max
</div>
<div class="error" data-ng-show="form.input.$error.min">
Message min
</div>
</td>
</tr>
</tbody>
</table>
<button class="btn btn-primary" type="submit" ng-disabled="form.$invalid"
ng-click="ctrl.applyChanges()">
<span>Apply</span>
</button>
In this approach submit is disabled until all input are in set ranges but validation messages don't appear.
Second approach (ng-form at the table column level):
<table class="datatable table table-stripped table-responsive">
<thead>
<tr class="headers">
<th ng-repeat="header in ctrl.headers">{{header}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="linkDelay in ctrl.currentLinkDelays">
<td>{{linkDelay.label}}</td>
<td>{{linkDelay.value}}</td>
<td id="proposed-ld-input-column" width=40% ng-form="form">
<input id="proposed-ld-input" name="input"
class="form-control ng-invalid-min ng-invalid-max ng-invalid-required"
type="number" ng-model="ctrl.inputs[linkDelay.property]"
data-ng-required="true" min="0" max="180"/>
<div class="error" data-ng-show="form.input.$error.required">
Message required
</div>
<div class="error" data-ng-show="form.input.$error.max">
Message max
</div>
<div class="error" data-ng-show="form.input.$error.min">
Message min
</div>
</td>
</tr>
</tbody>
</table>
<button class="btn btn-primary" type="submit" ng-disabled="form.$invalid"
ng-click="ctrl.applyChanges()">
<span>Apply</span>
</button>
In this approach validation messages appear but submit button is always enabled.
Could you tell me what I did wrong?
Give the inputs different names:
<table class="datatable table table-stripped table-responsive" ng-form="form">
<thead>
<tr class="headers">
<th ng-repeat="header in ctrl.headers">{{header}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="linkDelay in ctrl.currentLinkDelays">
<td>{{linkDelay.label}}</td>
<td>{{linkDelay.value}}</td>
<td id="proposed-ld-input-column{{$index}}" width=40%>
̶<̶i̶n̶p̶u̶t̶ ̶i̶d̶=̶"̶p̶r̶o̶p̶o̶s̶e̶d̶-̶l̶d̶-̶i̶n̶p̶u̶t̶"̶ ̶n̶a̶m̶e̶=̶"̶i̶n̶p̶u̶t̶"̶
<input id="proposed-ld-input{{$index}}" name="input{{$index}}"
class="form-control ng-invalid-min ng-invalid-max ng-invalid-required"
type="number" ng-model="ctrl.inputs[linkDelay.property]"
data-ng-required="true" min="0" max="180"/>
<div class="error" ng-show="form['input'+$index].$error.required">
Message required
</div>
<div class="error" ng-show="form['input'+$index].$error.max">
Message max
</div>
<div class="error" ng-show="form['input'+$index].$error.min">
Message min
</div>
</td>
</tr>
</tbody>
</table>
<button class="btn btn-primary" type="submit" ng-disabled="form.$invalid"
ng-click="ctrl.applyChanges()">
<span>Apply</span>
</button>
The ng-repeat creates multiple inputs. They need to be assigned different names for the error messages to be correct.

How to get one or more data when we do click in checkbox?

I have a problem , when i do click on one or select all , all data coming. But i need when I click on single checkbox then only that particular data should come.
html file
<div class="row">
<div class="col-md-12">
<h1>Student Information</h1>
<table id="example" class="table">
<tr>
<th>Name</th>
<th>Mobile</th>
<th>Siblling</th>
<th>select all <input type="checkbox" ng-click="vm.selectAll()"/></th>
</tr>
<tr ng-repeat="data in vm.data">
<td>{{data.name}}</td>
<td>{{data.mobileNumber}}</td>
<td>{{data.isMigrated}}</td>
<td><input type="checkbox" ng-model="data.selected" class="duplicateRow" /></td>
</tr>
<tr>
<tr>
<button class="button pull-right" ng-click="vm.process()">Process</button>
</tr>
</table>
<table class="table">
<tr>
<td colspan="4">
<pagination ng-if="renderpagination" page-number='{{vm.pageNumber}}' page-count="{{vm.pageCount}}" total-records="{{vm.totalRecords}}" api-url="duplicate-student"></pagination>
</td>
</tr>
</table>
</div>
</div>
Java script file
vm.selectAll =function(){
angular.forEach(vm.data, function(data){
data.selected=true;
});
}
vm.selectedUsers = [];
vm.process = function() {
vm.selectedUsers.splice(0, vm.selectedUsers.length);
for (var i in vm.data) {
vm.selectedUsers.push(vm.data[i]);
}
}
This link may what your looking for : Angular Checkboxes “Select All” functionality with only one box selected initially
.

jQuery Datatables, editing selected row's td with text box

I have a jQuery datatable with only one column. When a row is selected, it opens a panel with a text box. This text box is automatically filled in with the name of the td that's selected. I'm attempting to accomplish changing that selected row's name with the text box. Ex: I select the second row (named test), and I go over to the textbox and I enter "Apples", test will now be Apples. How can I accomplish this editing feat? I've tried the inline editing feature, but would prefer this method if possible.
Table:
<table id="data-table" class="table table-striped table-bordered nowrap" width="100%">
<thead>
<tr>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr class="odd gradeX">
<td>All</td>
</tr>
<tr class="odd gradeX">
<td>Test</td>
</tr>
<tr class="odd gradeX">
<td>Test3</td>
</tr>
</tbody>
</table>
Panel with text box:
<div class="panel-body">
<form class="form-horizontal" action="/" method="POST">
<legend>Settings</legend>
<div class="form-group">
<label class="col-md-4 control-label">Name:</label>
<div class="col-md-8">
<input type="text" id="groupname" class="form-control" value="Name"/>
</div>
</div>
</div>
</div>
Script that autofills selected row's td into textbox:
(function () {
var table = document.querySelector('#data-table');
var number = document.querySelector('#groupname');
table.addEventListener('click', onTableClick);
function onTableClick (e) {
//console.log(e.currentTarget);
var tr = e.target.parentElement;
//console.log(tr.children);
var data = [];
for (var td of tr.children) {
data.push(td.innerHTML)
}
number.value = data[0];
}
})();
Store the clicked td on click of row in global variable & add form submit event then assign the value of input that stored variable.
var row = null;
$("#data-table tr td").click(function() {
$("#groupname").val($(this).text());
row = $(this);
});
$("#updateBtn").click(function() {
if (row != null) {
row.text($("#groupname").val());
}
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<table id="data-table" class="table table-striped table-bordered nowrap" width="100%">
<thead>
<tr>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr class="odd gradeX">
<td>All</td>
</tr>
<tr class="odd gradeX">
<td>Test</td>
</tr>
<tr class="odd gradeX">
<td>Test3</td>
</tr>
</tbody>
</table>
<div class="panel-body">
<legend>Settings</legend>
<div class="form-group">
<label class="col-md-4 control-label">Name:</label>
<div class="col-md-8">
<div class="input-group">
<input type="text" id="groupname" class="form-control" value="" />
<span class="input-group-btn">
<button id="updateBtn" class="btn btn-default" type="button">
Update
</button>
</span>
</div>
</div>
</div>
</div>

How to select visible element using XPath or CSS?

I want to select the apply button in the following code. There are two buttons and only one button is visible.
//input[#value='Apply' and #id='btn' and #name='btn' and not(ancestor::td[contains(#style,'display:none')])]
I have written above XPath to select the visible one but in web driver it says unable to access the element. (browser - IE8)
<table class="ColumnTable" cellspacing="0">
<tbody>
<tr>
<td>
<div id="dashboard~120" class="Section" style="" headeron="" minimized="false" rendered="false">
<table class="SectionT" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style=" display:none;">
<div id="dashboard~Contents" style="">
<table style="width:100%">
<tbody>
<tr height="100%">
<td class="EItem" valign="TOP" align="CENTER" colspan="2" style="">
<div id="EmbedViewd" reloadinline="">
<div id="NavDone" style="display:;">
<div id="Result" result="Prompt">
<table class="ViewTable" cellspacing="0">
<tbody>
<tr>
<td>
<div id="newLayout">
<form style="margin: 0;" method="post" action="javascript:void(null);">
<div style="">
<table class="PromptView" style="">
<tbody>
<tr>
<td class="ButtonsCell">
<input id="btn" class="button" type="button" tabindex="0" value="Apply" name="btn" style="background-color: rgb(240, 240, 240);">
</td>
</tr>
</tbody>
</table>
</div>
</form>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr>
<td>
<div id="dashboard~121" class="Section" style="" headeron="true" minimized="false" rendered="false">
<table class="SectionT" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>
<div id="dashboard~Contents" style="">
<table class="SectionTD" style="width:100%; border-top:none;">
<tbody>
<tr height="100%">
<td class="EItem" valign="TOP" align="CENTER" colspan="2" style="">
<div id="EmbedViewd" reloadinline="">
<div id="NavDone" style="display:;">
<div id="Result" result="Prompt">
<table class="ViewTable" cellspacing="0">
<tbody>
<tr>
<td>
<div id="newLayout">
<form style="margin: 0;" method="post" action="javascript:void(null);">
<div style="">
<table class="PromptView" style="">
<tbody>
<tr>
<td class="ButtonsCell">
<input id="btn" class="button" type="button" tabindex="0" value="Apply" name="btn" style="background-color: rgb(240, 240, 240);">
</td>
</tr>
</tbody>
</table>
</div>
</form>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
My question is there anyway other work around for this issue. I think there are plenty of ways to write the above xpath am i right?
You could try the following in case this is a Selenium issue:
//input[#value='Apply'][#id='btn'][#name='btn']
[not(ancestor::td[contains(#style,'display:none')])]
It's the same expression with the same result, but as mentioned here Xpath does not work with Selenium it's possible that Selenium has an issue with evaluating and in XPath.
Another issue I just want to mention is that you shoudn't use the same id for multiple elements, ids should be unique. Otherwise your HTML is not valid. When you change the ids to unique values, it'd be possible to reduce the XPath match conditions.
Selecting an element using xpath:
Selecting the first element:
//div[#id='dashboard~120']descendant::input[#id='btn'].Click;
Selecting the second element:
//div[#id='dashboard~121']descendant::input[#id='btn'].Click;

Categories