Develop Reference

Merge or extend JavaScript functions

I am trying to get the values of several input fields and then displaying those values somewhere else on the page using JS functions. I will have 10 input fields, therefore is there a way I can optimize my JS code and write a function to loop through the values of the input fields and display them afterwards? Here are two functions which I wrote for two different fields:
function gotoTask() {
var message = document.getElementById("goto").value;
goto_message.innerHTML = message;
}
function waitTask() {
var message = document.getElementById("wait").value;
wait_message.innerHTML = message;
}

You could write a curry/factory function:
function createTaskFn(el, messageElId) {
return function() {
var message = document.getElementById(messageElId).value;
el.innerHTML = message;
};
}
var gotoTask = crateTaskFn(goto_message, 'goto');
var waitTask = crateTaskFn(wait_message, 'wait');

Give same class to your all inputs , then select them by let inputArr = document.getElementsByClassName('inputsClass') , then loop through inputArr and display their values.

You could store all the ids in an array like so
const inputIds = ['goto', 'wait', ...]
Then you can iterate over that array and call your method like so
inputIds.forEach((id) => {
const message = document.getElementById(id).value;
document.getElementById(`${id}_message`).innerHTML = message;
})
Disadvantage of my implementation: Your ids of the message fields have to have the same structure [id]_message

How to retrieve multiple select values from sessionStorage and put them into the original form field

I want to store values from a form input field that has a tags input functionality using select multiple and automatically retrieve them back after the form was sent. Basically, what I am trying to achieve is to just keep them in the input field after form submission. With them being tags, this adds convenience to the user since you can just add/delete some of the inputs and reload the page.
I have successfully written a piece of code that stores the array in sessionStorage after clicking the submit button, where pmids[]is the id of the select element:
function store() {
var select = document.getElementById('pmids[]');
var pmids = [...select.options]
.filter(option => option.selected)
.map(option => option.value);
sessionStorage.setItem("pmids", JSON.stringify(pmids));
}
I am struggling with getting the values back into the form field though, this attempt does not seem to work:
var storedPmids = JSON.parse(sessionStorage.getItem("pmids"));
if (storedPmids !== null) {
document.getElementById("pmids[]" options).each(function() {
for (var i = 0; i < storedPmids.length; i++) {
if (this.value == storedPmids[i]) {
this.selected = true;
}
}
});
}

Speaking of this line:
document.getElementById("pmids[]" options)
This is not how you access the options of a <select> element. Instead you should call:
document.getElementById("pmids[]").options
Furthermore, each is a jQuery method. The vanilla JS equivalent of each is forEach, which, in fact, only works with arrays and nodelists. Hence you need to convert your options collection into an array first:
var options = Array.from(document.getElementById("pmids[]").options);
Finally, this inside forEach refers to the window object, so you need to use a callback function with a parameter. Full code:
var storedPmids = JSON.parse(sessionStorage.getItem("pmids"));
if (storedPmids !== null) {
var options = Array.from(document.getElementById("pmids[]").options);
options.forEach(function(option) {
for (var i = 0; i < storedPmids.length; i++) {
if (option.value == storedPmids[i]) {
option.selected = true;
}
}
});
}

I want to store Ids in data base column

I have data table with check box when I select multiple rows I get ids. When I select 2 rows the output is like this 2,3 in alert box I want to store the ids in one data base column
This is My code:
$('#create_challan').click(function () {
//alert('Dispatch Challan submit');
var allVals = [];
var saleid = [];
/*var buttonp = $(this);
buttonp.addClass('disabled');
buttonp.text("Working");*/
$('input[name=selectedBilties]:checked').each(function() {
allVals.push($(this).val());
saleid.push($(this).attr('saleid'));
});
alert(allVals);
function allAreEqual(aarray){
if(!aarray.length) return false;
return aarray.reduce(function(a, b){return (a === b)?a:(!b);}) === aarray[0];
}
How can I Store that ids in database.

You can store it via ajax send those ids to other page and get it via server side language(php, .net etc), and execute query
$.post("pagename", { "id": id,.....}, function (response) {
});

How to create an array and push for object properties?

I have a situation where I have values from the backend dataItem. Now I want to push these values to an array and set for object properties, so next step would be map object properties to he form fields. With below code I got the values and assign it to object selectedOwners and its working good, but problem is everytime user addProcessOwner is creating new object for every user and when $scope.processDTO.prcsOwner = selectedOwners.fullName; do this its only assigning last value to the form field.
Once user select multiple owners how can I display all owners into form field?
main.html
<input type="text" class="form-control customReadOnly"
id="prcsOwner" required ng-model="processDTO.prcsOwner"
ng-click="openPrcsOwner()" ng-disabled="PROCESS_EDIT"/>
ctrl.js
var selectedOwners = {};
$scope.selectedOwnerGrid = rcsaAssessmentService.selectedProcessOwners();
$scope.addProcessOwner = function(dataItem) {
selectedOwners = {
fullName: dataItem.fullName,
workerKey: dataItem.workerKey
}
console.log('WORKER DATA', selectedOwners);
}
$scope.selectedProcessOwner = function() {
$scope.prcsOwnerModal.close();
$scope.processDTO.processOwnerWorkerKey = selectedOwners.workerKey;
$scope.processDTO.prcsOwner = selectedOwners.fullName;
console.log('FORM DATA', $scope.processDTO.processOwnerWorkerKey, $scope.processDTO.prcsOwner);
};

I think that what you trying to do is this:
var selectedOwners = [];
...
var selectedOwner = {
fullName: dataItem.fullName,
workerKey: dataItem.workerKey
}
selectedOwners.push(selectedOwner);

Pass entire table data to action method using Jquery

This question might be dumb but since i am new to JS and Jquery i have been struggling to get it done.
I have a table in a page where user can edit cell values in place(I am using contenteditable attribute).
There is a Save All button, on click on which I want to send current values in all the rows of the table to server side action method.
Please suggest me on how to achieve this or a better way of achieving the same functionality.

When the Save All button is clicked, you can do something like this:
$("#saveAllBtnId").click ( function () {
// read the data from the table using loop
$('#myTable > tbody > tr').each(function() {
// here retrieve the values from the table cells
// Example
var cellValue = $(this).... // you need to fill this code as per your table structure
// store all the data in an array
var mydata = new Array ( cellValue, ....);
var jsonData = JSON.stringify(mydata);
// send the data to backend, e.g.
$.post ("back/end/code", { data : jsonData }, function () {});
});
});

Thanks a lot. This is what i wanted. However, a little modification was needed while creating array.Below is the working code.
function btnClicked() {
// read the data from the table using loop
var mydata = [];
$('#testTable > tbody > tr').each(function() {
// here retrieve the values from the table cells
// Example
var name = ($(this).find(".name").html());
var age = ($(this).find(".age").html());
var obj = { name: name, age: age };
// store all the data in an array
mydata.push(obj);
});
var jsonData = JSON.stringify(mydata);
// send the data to backend, e.g.
//for now adding an alert
for (var i = 0 ; i < mydata.length; i++) {
alert(mydata[i].name + mydata[i].age);
}
$.post ("Test/SomeAction", { data : jsonData }, function () {});
}