I have got wrong alert! What is wrong? - radio-button

I have a problem in revealing the actual results of the radio buttons. I use javascript to get value from radio button, succeeded anyway, BUT when I create a condition where if value! = "Yes" alert that appears why still "OK", I would like to choose if it is "No" means alert that should be appear is "NOT OKE ".
This is the form:
<form id="form_test" name="form_test" method="POST">
<input type="hidden" id="menu_id" name="menu_id" value="<?=$menu_id?>">
<table align='center' width='auto' class='table1' cellpadding='5' cellspacing="0">
<tr>
<td align='center' class='tabletitle'>No</td>
<td align='center' class='tabletitle'>PC</td>
<td align='center' class='tabletitle'>PN</td>
<td align='center' class='tabletitle'>PCO</td>
<td align='center' class='tabletitle'>GC</td>
<td align='center' class='tabletitle'>CUR</td>
<td align='center' class='tabletitle'>Codes</td>";
<td align='center' class='tabletitle'>Percent</td>";
<td align='center' width='5%' class='tabletitle'>Yes</td>";
<td align='center' width='5%' class='tabletitle'>No</td>";
</tr>
[call to database]
$num++;
echo " <tr>
<td class='tablecontent' align='center' valign='top'>$num</td>
<td class='tablecontent' valign='top'>$pc</td>
<td class='tablecontent' valign='top' nowrap>$pn</td>
<td class='tablecontent' align='center' valign='top'>$pco</td>
<td align='center' class='tablecontent' align='center' valign='top'>$gc</td>
<td class='tablecontent' align='center' valign='top'>$cur</td>
<td class='tablecontent2' valign='top'>$codes</td>";
<td align='center' class='tablecontent' valign='top'>$percent</td>";
<td align='center' class='tablecontent' valign='top'><input type='radio' id='yes' name='cek$num' value='yes' checked></td>";
<td align='center' class='tablecontent' valign='top'><input type='radio' id='no' name='cek$num' value='no' ></td>";
</tr>";
echo "
<tr>
<td><input type='button' name='accept' value='accept' onclick='getaccept()'></td>";
</tr>";
echo "</table>";
echo "<input type='hidden' id='jmlcek' name='jmlcek' value='$num'>";
echo "</form>";
Then this is the Javascript codes to get value:
<script language="Javascript">
function getaccept(){
//var str = '';
var elem = document.getElementById('form_test').elements;
var c = confirm("Yakin mau nerima?");
for (var i = 1; i <= elem.length; i++)
{
var e = elem[i].value
if (elem[i].type == "radio" && c)
{
if (e != "yes" && elem[i].checked){
alert('NOT OKE');
return false;
}else{
alert('OKE');
return true;
}
}
}
}
</script>
For example the amount of data that actually are three and all got selected "yes", when I select "no" at one of the existing number it will display alert "NOT OKE", but in fact when I select "no" the value I got was "yes" and alert up "OKE".
I have tried many times to make them correct but still the results are wrong, so what's wrong?
Thanks.

This is what I got:
function getApprove(){
//var elem = document.getElementById('form_test').elements;
var RadioButton = document.getElementsByTagName('input');
var Approve = confirm("Are you sure?");
for (var i = 0; i < RadioButton.length; i++)
{
if (RadioButton[i].type == "radio" && Approve)
{
if(RadioButton[i].checked && RadioButton[i].value != "yes"){
alert("NOT OKE");
return false;
}
}
}
for (var i = 0; i < RadioButton.length; i++)
{
if (RadioButton[i].type == "radio" && Approve)
{
if(RadioButton[i].checked && RadioButton[i].value == "yes"){
alert("OKE");
return true;
}
}
}
=>SOLVED<=
Thankyou so much p.campbell, for you concern and helping me m(_ _)m :)

What's happening here is that you're only evaluating the FIRST radio button because you've got a return statement in both those conditions in your (e != "yes" && elem[i].checked). It's exiting the function.
Remove your return statements near your alerts. They're exiting the function, and disallowing the loop to iterate through the form elements.
Here's a demo on JsBin.

Related

Trouble using renderRows in Mat-Table

I'm trying to update my table in angular 8, when data is added using renderRows() method but it is not working.
I have used #ViewChild and .renderRows() method after getting response also can anyone explain the meaning of this : {static: true}
//TODO: allocateMoney.ts
#ViewChild(MatTable, { static: true }) table: MatTable<any>;
openDialog() {
let dialogRef = this.dialog.open(AllocateMoneyFormComponent, {
disableClose: true,
data: {
projectId: this.projectId,
budgetId: this.budgetId
}
});
dialogRef.afterClosed().subscribe((result) => {
if (result == 'loadData') {
this.table.renderRows();
}});
}
//TODO: allocateMoney.html
<table class="example-list" mat-table [dataSource]="budget_dm.budget[budgetId].allocateMoney.tables.rows"
class="mat-elevation-z8">
<ng-container matColumnDef="id">
<th mat-header-cell [style.display]="'none'" *matHeaderCellDef> Id </th>
<td mat-cell [style.display]="'none'" *matCellDef="let element">{{element.id}}
</td>
</ng-container>
<ng-container matColumnDef="categoryCode">
<th mat-header-cell *matHeaderCellDef style="padding-left: 15px;"> Acc </th>
<td mat-cell *matCellDef="let element">{{element.categoryCode}}
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="budget_dm.budget[budgetId].allocateMoney.tables.cols"></tr>
<tr class="example-box" mat-row
*matRowDef="let row; columns: budget_dm.budget[budgetId].allocateMoney.tables.cols;"></tr>
</table>
//TODO: allocateMoneyForm.ts
isSubmitForm() {
this.formdata.raw.projectId = this.projectId;
this.formdata.raw.budgetId = this.budgetId;
this.budgetService.allocateMoney(this.orgId, this.formdata.raw).then(resp => {
if (resp) {
this.toast_.successToastr("Money Allocated Success", "SUCCESS");
} else {
this.toast_.errorToastr("Money Allocated Failure", "ERROR");
}
});
this.dialogRef.close('loadData');
}
core.js:5847 ERROR TypeError: Cannot read property 'renderRows' of undefined
at SafeSubscriber._next (allocate-money.component.ts:57)
at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub (Subscriber.js:192)
at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next (Subscriber.js:130)
at Subscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next (Subscriber.js:76)
at Subscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:53)
at Subject.push../node_modules/rxjs/_esm5/internal/Subject.js.Subject.next (Subject.js:47)
at SafeSubscriber._next (dialog.es5.js:429)
at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub (Subscriber.js:192)
at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next (Subscriber.js:130)
at Subscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next (Subscriber.js:76)
Try adding the #table reference to your html mat table , this is to make sure your mat table childview is well instantiated

How to set header value in kendo grid row template

I am using jquery kendo grid in my project where i used row template to show three column in one row. Below is the code:
<table id="grid" style="width:100%">
<thead style="display:none">
<tr>
<th>
Details
</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="3"></td>
</tr>
<tr>
<td>
</td>
</tr>
</tbody>
</table>
<script id="rowTemplate" type="text/x-kendo-tmpl">
<div>
<span class="name" style="font-size:medium">#: FirstValue #</span>
<span class="name" style="font-size:medium">#: SecondValue #</span>
</div>
<tr>
<td style="width:30%">
#: GetName #
<span class="name" style="font-size:14px; color:green">#: Designation #</span>
<span class="name" style="font-family:Arial; font-size:small">#: Company #</span>
</td>
</tr>
</script>
in the above code i am just passing my model data it's working fine but when i added one div which have value firstName and LastName so it is also repeating with this data but i want to to show separately.How do i show it separately so that it should not repeat with grid.
there is one problem in your html template.
Please replace '#' with 'Javascript:void(0)'.
Error:- #: GetName #
Fix:- #: GetName #
Hope that's work for you.
http://jsfiddle.net/parthiv89/t0w3ht6m/1/
if you like then don't forget to like.
I got solution by own, Firstly i changed code in my schema like this:
schema: {
parse: function (data) {
var items = [];
for (var i = 0; i < data.data.length; i++) {
if (data.data[i].CorrectValue != null && data.data[i].SearchValue != null) {
$("#spnSR")[i].innerHTML = "<b>"+"Get results for this text: "+"</b>"+data.data[i].CorrectValue;
$("#spnSV")[i].innerHTML = "<b>" + "Searched for this text: " +"</b>" + data.data[i].SearchValue;
}
}
var product = {
data: data.data,
total: data.total
};
items.push(product);
return (items[0].data);
},
}
Then in html i used two span to show this value which is there in for loop.
and it's working fine for me.
Thanks everyone.

How to set css of dataTable after reload?

There is a dataTable :
<table id="list_details_livraison" class="striped cell-hovered border bordered" data-searching="true">
<thead>
<tr>
<th style="text-align: center;"><?php echo _getText('detaillivraison.entete.article');?></th>
<th style="text-align: center;"><?php echo _getText('detaillivraison.entete.lot');?></th>
<th style="text-align: center;"><?php echo _getText('detaillivraison.entete.qtelivrer');?></th>
<th style="text-align: center;"><?php echo _getText('detaillivraison.entete.pu');?></th>
<th style="text-align: center;"><?php echo _getText('detaillivraison.entete.taxe');?></th>
<th style="text-align: center;"><?php echo _getText('detaillivraison.entete.remise');?></th>
<th style="text-align: center;"><?php echo _getText('detaillivraison.entete.prixtotal');?></th>
<th></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
$(document).ready(function(){
var list_details_livraison = $('#list_details_livraison').DataTable({
...
"initComplete": function(settings, json) {
$(this).css("table-layout","fixed");
}
});
Then I filter the dataTable by selecting a value from a select element :
$('#cacher').on("change", function() {
var ddeb = convertDateFormat3($("#date_deb_").val());
var dfin = convertDateFormat3($("#date_fin_").val());
list_details_livraison.ajax.url("<?php echo RP_SSP; ?>server_processing_livraisons_frnsr.php?ddeb="+ddeb+"&dfin="+dfin+"&type="+$("#h_filtre_type_livraison").val()+"&valider="+$("#h_filtre_etre_valider").val()).load();
});
At runtime the dataTable's columns are not autowidth after I make the filter ; I tried using list_details_livraison.css("table-layout","fixed"); but I got a console error ! So how to reapply the table-layout fixed css at this moment ?
Comment converted into an answer at the request of the OP.
initComplete() will only run once per table creation, so won't be called after subsequent paging, filtering etc. For this you need drawCallback() which gets called after every draw.
You just need to change:
"initComplete": function(settings, json) {
to
"drawCallback": function( settings ) {

Append row in table using XAJAX - values are deleted

I have this table in HTML:
<table style="width: 100%;" class="allBorders">
<tbody id="added_articles">
<tr id="header_articles">
<td>test</td>
<td> </td>
</tr>
</tbody>
</table>
And using XAJAX I append new ROW like THIS
function addNewLine()
{
global $objResponse;
$uniqueID = time();
$return = "<tr id='articles_".$uniqueID."'>";
$return .= "<td><input type='text' id='v_$uniqueID' name='v[]' /></td>";
$return .= "</tr>";
$objResponse->append("added_articles", "innerHTML", $return);
return $objResponse;
}
Whenever I add new line all values in previously added lines are cleared..
Example:
1st line is added
value in 1st line is set to "TEST"
2nd line is added and value in 1st line is deleted .. .
Any idea?
<div id="added_articles">
<table style="width: 100%;" class="allBorders">
<tbody>
<tr id="header_articles">
<td>test</td>
<td> </td>`enter code here`
</tr>
</tbody>
</table>
</div>
function addNewLine()
{
global $objResponse;
$return .= "<table style="width: 100%;" class="allBorders">";
$return .= "<tr id='articles_".$uniqueID."'>";
$return .= "<td><input type='text' id='v_$uniqueID' name='v[]' /></td>";
$return .= "</tr></table>";
$objResponse->append("added_articles", "innerHTML", $return);
return $objResponse;
}
I was having a trouble using this function to add 'tr'.
The code that I used was..
function Start($oid){
$objResponse = new xajaxResponse();
$userauth = Authorizer::getUserByID($oid); // I Save here DB rows return.
while ( $rows = $userauth->fetchRow() ){
$row[] = $rows['uid'];
$userInfo = User::userInfo($rows['uid']);
$useradd .= ' <tr class="spaceunder">
<td>'. $rows['uid'] .'</td>
<td>'. $rows['status'] .'</td>
<td>'. $rows['perm'] .'</td>
<td>'. $rows['dtauth'] .'</td>
</tr>';
$objResponse->addAlert($useradd);
$objResponse->addAssign('userAdded', 'innerHTML', $useradd);
return $objResponse->getXML();
}
And my HTML is...
<table id ="userAdded" border="0" cellpadding="0" cellspacing="0" style="width:100%;height:100%;padding:5px 0px 0 0px;margin:0px 0px 0 0px;">
<tr valign="top" style="height:37px;padding:1px 1px 1 1px;margin:0px 0px 0 0px;">
<td align="left">
<table width="100%" cellspacing="0" cellpadding="0" border="0">
</table>
</td>
</tr>
</table>'
And it works perfectly.

Can datatables sort a column with an input field?

I am trying to make datatables sort my columns. The first column works okay as it's a simple number. However the next column is an input field. When I try to make that sort then nothing happens.
<table width="100%" cellspacing="0" class="table sortable no-margin">
<thead>
<tr>
<th scope="col" class="sorting" style="width: 57px;">
<span class="column-sort">
</span>
ID
</th>
<th scope="col" class="sorting_desc" style="width: 94px;">
<span class="column-sort">
</span>
Order
</th>
</tr>
</thead>
<tbody>
<tr id="row_20" class="odd">
<td id="refKey_20" style="text-align:center;" class="">
1Y
</td>
<td class=" sorting_1">
<input type="text" value="160" size="3" name="item.Order"
maxlength="3" id="Order_20" >
</td>
</tr>
<tr id="row_19" class="even">
<td id="refKey_19" style="text-align:center;" class="">
1X
</td>
<td class=" sorting_1">
<input type="text" value="150" size="3" name="item.Order"
maxlength="3" id="Order_19" >
</td>
</tr>
</tbody>
</table>
Is there some way that I can get datatables to sort input fields?
The easiest way is to add a hidden span inside columns <span style="visibility:hidden">value of the input</span>
You should look at this example that explains how to do sorting on input fields. Basically you declare a sorting function
/* Create an array with the values of all the input boxes in a column */
$.fn.dataTableExt.afnSortData['dom-text'] = function ( oSettings, iColumn )
{
var aData = [];
$( 'td:eq('+iColumn+') input', oSettings.oApi._fnGetTrNodes(oSettings) ).each( function () {
aData.push( this.value );
} );
return aData;
}
And then tell to your table to use that
$('#example').dataTable( {
"aoColumns": [
null,
{ "sSortDataType": "dom-text" }
]
} );
or wit aoColumnDefs
$('#example').dataTable( {
"aoColumnDefs": [{ "sSortDataType": "dom-text" , aTarget: "yourclass"}]
} );
For versions of Datatables 1.10+ the names of some option variables have been changed and a new API introduced. Documentation here: http://datatables.net/examples/plug-ins/dom_sort.html.
Here is a working version of the above accepted answer in 1.10+:
$(document).ready(function () {
var table = $('#example').DataTable({
"columnDefs": [
{
"orderDataType": "dom-input",
"targets": 0, // Just the first column
},
],
});
});
The custom sort function:
$.fn.dataTable.ext.order['dom-input'] = function (settings, col) {
return this.api().column(col, { order: 'index' }).nodes().map(function (td, i) {
return $('input', td).val();
});
}
jQuery.fn.dataTableExt.oSort['textbox-asc'] = function (a, b) {
var vala = $('#' + $(a).filter('input').attr('id')).val().toLowerCase();
var valb = $('#' + $(b).filter('input').attr('id')).val().toLowerCase();
if (vala === '')
return 1;
if (valb === '')
return -1;
return vala < valb ? -1 : vala > valb ? 1 : 0;
};
jQuery.fn.dataTableExt.oSort['textbox-desc'] = function (a, b) {
var vala = $('#' + $(a).filter('input').attr('id')).val().toLowerCase();
var valb = $('#' + $(b).filter('input').attr('id')).val().toLowerCase();
if (vala === '')
return 1;
if (valb === '')
return -1;
return vala < valb ? 1 : vala > valb ? -1 : 0;
};
then use it like this
$(datatable).dataTable({
"iDisplayLength": 50,
"bLengthChange": false,
"bPaginate": false,
"columns": [
null, { "sType": "textbox" }
],
});
If you decide to use the columns option where you are rending information from a JSON file you can easily add a hidden span on your render property. It appears as though DataTables looks for text to order and if it cannot find any, it will break. The example at https://datatables.net/examples/plug-ins/dom_sort.html uses a table that has already been rendered. Here is an example using an API:
...columns([{
"data": "receivedDate",
"render": function (data, type, row, meta)
{
if (data == "null")
{
return "<input type='text' id='datepicker_" + meta.row + "' class='datepicker form-control' /><span class='hidden'><span>";
}
else
{
return "<input type='text' id='datepicker_" + meta.row + "' class='datepicker form-control' value='" + moment(data).format("MM/DD/YYYY") + "'/><span class='hidden'>" + moment(data).format('MM/ DD / YYYY') + "</span>";
}
}
}]);
Set an invisible div with the value before the input field.
<tbody>
<tr id="row_20" class="odd">
<td id="refKey_20" style="text-align:center;" class="">
1Y
</td>
<td class=" sorting_1">
<div style="display:none;">160</div>
<input type="text" value="160" size="3" name="item.Order"
maxlength="3" id="Order_20" >
</td>
</tr>
<tr id="row_19" class="even">
<td id="refKey_19" style="text-align:center;" class="">
1X
</td>
<td class=" sorting_1">
<div style="display:none;">150</div>
<input type="text" value="150" size="3" name="item.Order"
maxlength="3" id="Order_19" >
</td>
</tr>
</tbody>