Get Dynamic Input ID javascript - javascript

I have an input type check box and load from database and form like this
<input type="checkbox" name="akses[]"
id="<?php echo $menu_id;?>"
value="<?php echo $action_name;?>"> <?php echo $menu_name;?>
and my json is
{
"status": 200,
"message": "sukses",
"data": {
"fullname": "TEST",
"username": "TEST_USER",
"position": "24",
"privileges_status": "based on jabatan",
"list_menu": [{
"action_name": "menu1 ",
"parent_id": 9,
"menu_id": 15,
"menu_name": "Menu 1"
}, {
"action_name": "menu2",
"parent_id": 9,
"menu_id": 16,
"menu_name": "Menu 2"
}]
}
}
I'm already successfully parsing the id using ajax, but the problem is that I don't know how to to check when id from json is same like the id in input.
If I define manually like
<input type="checkbox" name="akses[]" id="15" value=""> Menu 1
I can check and automatically check the checkbox
Now I change my input type like this
<input type="checkbox" name="akses[]" id="menu1" value=""> Menu 1
UPDATE: The js like this after implementing suggested answer
for (var i = 0; i < res['data']['list_menu'].length; i++)
{
var action_name = res['data']['list_menu'][i]['action_name'];
var idsFromJSON = new Array();
idsFromJSON.push(action_name);
console.log(idsFromJSON);
$("[name='akses[]']").each(function() {
this.checked=idsFromJSON.indexOf(this.id)!=-1;
});
}
but didn't work. if I declare array manually like this it works
var idsFromJSON=["menu1", "menu2"];

You want something like this
I would however recommend not to have numeric IDs
var idsFromJSON=["menu15","menu16"];
$("[name='akses[]']").each(function() {
this.checked=idsFromJSON.indexOf(this.id)!=-1;
});

Related

Trouble getting label from array instead of value

So I am using an array to populate a dropdown menu and right now that part works great. I use the value to help calculate service cost and i use the label to display the option name to the user. My issue now is that my form is sending the value(which is just the price) and not the label. I may need it to do both potentially if my paypal button is my submit button? im not sure. Right now i just have the form sending to discord though.
HTML for particular selection menu
<fieldset>
<label for="rank-tourn">
Select Tournament Title
</label>
<select id="rank-tourn" name="Desired Tournament Rank" class="menus form-select" onchange="onChangeCurrent()">
<option value="0" label="" >Select</option>
</select>
</fieldset>
java for populating list
function buildOptList(select, id) {
select.innerHTML = null;
//alert("Populate list");
for (var i = id; i < Rankings.length; i++) {
if ((id == 0) && (i == Rankings.length)) {
// do nothing
} else {
var el = document.createElement("option");
el.textContent = Rankings[i].label;
el.value = Rankings[i].value;
select.appendChild(el);
}
}
}
My array
var Rankings = [{
"id": 1,
"value": 10,
"label": "Bronze Title",
}, {
"id": 2,
"value": 10,
"label": "Silver Title",
}, {
"id": 3,
"value": 15,
"label": "Gold Title",
}, {
"id": 4,
"value": 20,
"label": "Platinum Title",
}, {
"id": 5,
"value": 25,
"label": "Diamond Title",
}, {
"id": 6,
"value": 30,
"label": "Champion Title",
}, {
"id": 7,
"value": 40,
"label": "Grand Champion Title",
}, {
"id": 8,
"value": 80,
"label": "Supersonic Legend Title",
}];
I have also tried using jquery to try and copy the selection label to a hidden field but im having trouble with that too.
This was my attempted jquery:
HTML
<input type='hidden' id='hidden' value='0' label=''/>
JQUERY
$("#rank-tourn").change(function () {
$("#hidden").text($(this).text());
alert($(this).text())
})
currently this alerts on change everysingle label together. I have tried adding the :selected to rank-tourn and then it fails to alert.
https://jsfiddle.net/Popo74123/q92jh1p0/465/ this is my code if its easier.
this.text() will get the value of everything, you need to find the pseudo selector :selected to display the one that was chosen
$("#rank-tourn").change(function () {
$("#hidden").text($(this).find(':selected').text());
alert($(this).find(':selected').text())
})
Just remove this line:
el.value = Rankings[i].value;
when an option doesn't have an explicit value, it's text becomes the value.

How to convert Json object of html element into actual HTML element that i can render on view using C# or js or jquery

My requirement is, i want to get a json(in the form of html tag) from DB and convert it into html.
{"input":{
"name":"fname",
"type":"text",
"placeholder":"Enter your firstname",
"Id":"fname"
}
}
{"button" :{
"name":"btn",
"class":"save",
"type":"submit",
"Id":"btn1",
"text":"save"
}
}
i want to convert this json into html tags like
<input type="text" id="fname" name="fname" placeholder="Enter your firstname">
<button type="submit" class="save" id="btn1" name="btn">save</button>
how can i convert this using c# or javascript or jquery anything will help me
To solve your problem you need to loop throw your json and createElement along the way.
let json = {
"input": {
"name": "fname",
"type": "text",
"placeholder": "Enter your firstname",
"id": "fname"
},
"button" : {
"name": "btn",
"class": "save",
"type": "submit",
"id": "btn1",
"text": "save"
}
}
Object.keys(json).forEach( (element) => {
let foo = document.createElement(element)
Object.keys(json[element]).forEach( (nestedAttribute) => {
foo.setAttribute(nestedAttribute, json[element][nestedAttribute]);
})
document.body.appendChild(foo)
})
Object.keys(json) allow you to get the keys of your json
This way the result looks like this :
Have a nice day !

Angular js Properties in Selected object is not accessible in model

<select id="singleselect" ng-model="selectedQuestion" class="form-control select2"
ng-options="x.Title for x in tabnames">
</select>
now when i access the value if {{selectedQuestion.Title}} i am getting proper value,
when i am accessing value of {{selectedQuestion.ID}} also i am getting proper value,
what i actually need is value of {{selectedQuestion.ControlPrefix}} to be accessed in model(javascript) but it cannot be accessed neither in UI with {{selectedQuestion.ControlPrefix}} nor in model like
$scope.Newmodel = {
Title: "New Question Title",
ControlPrefix: $scope.selectedQuestion.ControlPrefix
};
basicaly i want the value inside the $scope.Newmodel.ControlPrefix variable i.e $scope.Newmodel.ControlPrefix
**tabnames array/objet is below**
{
"$id": "1",
"ID": 3,
"Title": "Text",
"ControlPrefix": "txt"
},
{
"$id": "2",
"ID": 4,
"Title": "Number",
"ControlPrefix": "num"
},
I don't See any problem with this, please check and verify -
var app = angular.module("myApp",[]);
app.controller("myCntr",function($scope){
$scope.tabnames = [
{
"$id": "1",
"ID": 3,
"Title": "Text",
"ControlPrefix": "txt"
},
{
"$id": "2",
"ID": 4,
"Title": "Number",
"ControlPrefix": "num"
},]
$scope.NewQuestionmodel = {
Title: "",
QuestionTypeID: "",
};
$scope.Dosomething = function(selectedQuestion){
$scope.NewQuestionmodel.Title = selectedQuestion.Title;
$scope.NewQuestionmodel.QuestionTypeID= selectedQuestion.ID;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCntr">
<select id="singleselect" ng-model="selectedQuestion" class="form-control select2"
ng-options="x.Title for x in tabnames" ng-change="Dosomething(selectedQuestion)">
</select>
<br>
<span>FRom UI - Selected Question Title : {{selectedQuestion.Title}} </span><br>
<span>From UI - Selected Question ID : {{selectedQuestion.ID}} </span><br>
<span>From UI - Selected Question ControlPrefix : {{selectedQuestion.ControlPrefix}} </span><br><br>
<br>
<span>Selected Question Title from Backend is {{NewQuestionmodel.Title}}</span><br>
<span>Selected Question ID from Backend is {{NewQuestionmodel.QuestionTypeID}}</span>
</div>

AngularJs - How can i fetch the value from one input field into another field using angular.copy?

I am not able to copy a value from one field into the next. I used typeahead in po num. If I select po num value from typeahead simultaneously the quantity value is autofilled, and the value for copied quantity needs to be copied from the quantity. This is the link to ...my plunk...please help me on this issue. For instance:- If I select po num as 1356 from drop-down, the quantity value is fetched automatically gives as 100. I want the copied quantity value to reflect the same as 100.
I've Added the code that I've used below. Please do have a look and let me know where I've made the mistake. I know it could be something insanely small as well, please do help. Thanks in advance
my plunk
Controller:-
$scope.$watch('states.purchase_order_details_ord_no', function() {
if($scope.state && $scope.states.purchase_order_details_ord_no && $scope.states.purchase_order_details_ord_no.getTotalsshadeqty) {
$scope.copied = angular.copy($scope.states.purchase_order_details_ord_no.getTotalsshadeqty);
} else {
$scope.copied = null;
}
});
Html:-
<div ng-repeat="states in states.pocomments">
<label for="purchase_order_details_ord_no">po num</label>
<input type="text" ng-model="states.purchase_order_details_ord_no" id="purchase_order_details_ord_no" typeahead="type as type.purchase_order_no for type in types | filter: $viewValue">
<label for="quantity">quantity</label>
<input type="text" id="supname" ng-model="states.purchase_order_details_ord_no" typeahead="type.getTotalsshadeqty for type in types | filter: $viewValue">
<label for="quantitycopy">Copied quantity</label>
<input type="text" name="supnamecopy" id="supnamecopy" ng-model="copied">
</div>
My data:-
$scope.types = [
{
"_id": "5768e6c8bdbc5db509f0f2b2",
"created": "2016-06-21T07:03:36.504Z",
"getTotalsshadeqty": "100",
"getTotalsprice": "1000",
"getTotalsqtyprice": "100000",
"purchase_order_no": "1356",
},
{
"_id": "5767cd78f5012d790aa41a7b",
"created": "2016-06-20T11:03:20.382Z",
"getTotalsshadeqty": "12",
"getTotalsprice": "10",
"getTotalsqtyprice": "120",
"purchase_order_no": "0987",
}];
$scope.states = {
"_id": "575691b26a5ec735128fe635",
"pocomments": [
{
"_id": "575691d56a5ec735128fe636",
"po_value_currency": "Rs",
"value": "124",
"rate": "24",
"quantity": "",
"purchase_order_details_ord_no": ""
},
]
ng-repeat creates an isolated scope for the children created.
You need to add a $parent to the accessor of your model-properties if you want to change properties outside of the isolated scope.
Eg. ng-model="$parent.states.purchase_order_details_ord_no"
Additionally inside your watch-expression you mistyped states (you checked for state).
Fork that should work as expected: http://plnkr.co/edit/QAgJZToxkqvtg7pFSseO?p=preview

Return DataTable row values onClick

I have been studying and working endlessly with DataTables the past 2 weeks and gotten to a brick wall now. The issue I am trying to sort out is how I can pass values in a particular row when the button for that row is clicked on. As at now with my limited knowledge on DataTables and JQuery, when I have like 2 to 3 buttons in different rows and I click on each one, the value they all return back is the values in the first row only. Not sure how best I can solve this or where my error might lie. Any guide or help would be much appreciated. Thanks
<script type="text/javascript" charset="utf-8">
<!-- ------------------- Extract all Alerts ---------------------- -->
$(document).ready(function (){
var alertTable = $('#alert-table').DataTable({
"jQueryUI": true,
"columns": [
{ "data": "source", "visible": false },
{ "data": "host" },
{ "data": "description" },
{ "data": "priority" },
{ "data": "acknowledged", render: function( data, type, row ) {
if (data == "0" && row.priority > "2") {return '<div><form method="post" id="'+row.source + row.eventid+'" action="include/db_conn.php"> <input type="hidden" id="evtid" value ="'+row.eventid+'"> <input type="hidden" name="source" value ="'+row.source+'"> <INPUT TYPE="text" name="username" size="3" maxlength="3"> <input type="submit" name="'+row.source + row.eventid+'" onClick="ackbutton(this)" value="Ack Alert"></form></div>';
} return data;
}
}
],
});
setInterval (function(){
$.getJSON("data/json_data.txt", function (pcheckdata){
alertTable.clear().draw();
alertTable.rows.add(pcheckdata.alert).draw();
alertTable.columns.adjust().draw();
});
}, 10000);
});
function ackbutton() {
//e.preventDefault();
var $this = $(this);
var getvalues = $('#evtid').val();
alert(getvalues);
}
</script>
HTML:
<body>
<div class="all_tables">
<table id="alert-table" class="display" cellspacing="0">
<thead class="t-headers">
<tr>
<th>Server</th>
<th>Host</th>
<th>Description</th>
<th>Priority</th>
<th>Acknowledged</th>
<th>Eventid</th>
</tr>
</thead>
</table>
</div>
</body>
JSON
{
"alert": [
{
"source": "Server1",
"host": "host1",
"description": "Engine Alive",
"priority": "4",
"triggerid": "14531",
"acknowledged": "0",
"eventid": "3419709",
"value": "1"
},
{
"source": "Server2",
"host": "host2",
"description": "webapp down",
"priority": "2",
"triggerid": "18027",
"acknowledged": "1",
"eventid": "4012210",
"value": "1"
}
],
"error": []
}
You need to find the input with id 'evtid' in closest div of currently clicked ack button.
Example:
$(document).on('click','.submitButton',function(e){
e.preventDefault();
debugger
var $this = $(this);
var curEventId = $this.closest('div').find('#evtid');
var getvalues = curEventId.val();
alert(getvalues);
return false;
});
You can also use closest form instead of div.
var curEventId = $this.closest('form').find('#evtid');

Categories