We Keep Coding

Asp.Net MVC app - caching data between page loads

I have a simple Asp.Net MVC app. I have a form, which I'm trying to gather data for, and then submit. However, within that form is a list of selections - each time a selection is made, I go to the server to add that data:
function addSelection(item) {
fetch("/test/selection/" + item,
{
method: "POST"
})
.then(response => {
const name = document.getElementById('Name').value;
localStorage.setItem("name", name);
if (response.ok) {
location.reload();
} else {
console.error("Unable to add");
}
});
}
The server then stores the list in a HttpContext.Session variable.
The target is to keep the name property in place across calls. The code above works great - I set the control on load:
window.onload = function() {
var getName = localStorage.getItem('name');
document.getElementById('Name').setAttribute('value', getName);
}
However, the form itself is eventually submitted, and the entire form, with the selected items, is submitted to the server:
<div>
<input type="submit" value="Submit"
asp-controller="My" asp-action="Create"/>
</div>
The problem that I have is that the local storage still retains the value of name, and so the next time the form is loaded, it's still there. Does anyone have any techniques for achieving the same result without using local storage?
The only solution that I can think of so far is to replace the submit button with a manually coded JS script that resets the value, but that doesn't account for situations where the user just moves away from the form. I feel like I'm heading down a rabbit hole of my own making, and there must be a simpler way to do the same thing.

One solution is to use hidden form fields to persist the data between requests instead of local storage. On each item selection, add the data to a hidden form field on the client-side instead of saving it to local storage. Then, when the form is submitted, the hidden form field value will be included in the form data and can be retrieved on the server-side.
On the server-side, you can retrieve the NameValue from the form data in your action method.
[HttpPost]
public IActionResult Create(string NameValue, ...)
{
...
}

JavaScript Express - How to take dynamic form requests

I have a dynamic form using EJS and Express in which the user can choose to add more images by clicking a button,
The response works, however for data storing purpose, I want each image response to be stored together in a single array. As this is dynamic, how do I iterate through each of the image form response in order to store tham in an array? as users may only put 1 image, making checking for every single request a bit redundant?

var images = [];
function addImage(file) {
images.push(file);
}
function removeImage(file) {
images = images.filter(img => img != file);
}
When a customer clicks submit button, this arrya value (images) would be submitted.

Fetch localStorage values to other page using id

I am storing the values in localStorage and the values are getting stored through input[type:hidden] and input[type:text].
JS:
$('.proceed_btn').on('click', function() {
// Blank to start with
var order = {};
// Loop through all inputs...
$('input[type="text"], input[type="hidden"]').each(function() {
// ...adding their values as properties
order[this.name] = this.value;
});
// Store that object in JSON format
localStorage.setItem("order", JSON.stringify(order));
});
I want to print these value in other page when the user redirects after submitting the form. I am working on ruby currently. There are many products in the website, so the information in the summary page gets rendered according to that. Is there any way to display specific form details in through there id's?

You can create a partial with .js.erb extension eg _order_partial.js.erb and retrieve the order object as thus:
order = JSON.parse(localStorage.getItem("order"));
// Loop through the object and print out
Then you can render the partial in any of the views file you want to use it.

netsuite saved search multi-select dropdown filter

Does anyone know if there is a way to add a multi-select drop down filter in a suitelet that is displaying a sublist from an already existing saved search. One of the columns is "customer" and I would like to add a drop-down that filters by the customers on the sublist. I already have the code setup, I was just wondering if this could be done. Thanks

You can use your suitelet as
if (request.getMethod() == 'GET'){
var field = form.addField('custpage_customers', 'multiselect', 'Customers');
var addedCustomers = [], selectedCustomers;
var searchResults= nlapiSearchRecord('transaction','customsearchID');;
//add customers options
searchResults.forEach(function(res){
if(addedCustomers.indexOf(res.getValue('customer')) !== -1) return;
field.addSelectOption(res.getValue('customer'), res.getText('customer'))
});
//filter sublists
//add customer options
if(request.getParameter('customerids')){
addedCustomers = JSON.parse(request.getParameter('customerids'));
searchResults = searchResults.filter(function(res){
return addedCustomers.indexOf(res.getValue(customer)) !==-1)
});
//if above search result reduces your search results you may just want to re-run search as below than filtering it
//searchResults = nlapiSearchRecord('transaction','customsearchID',['customer', 'anyof', JSON.parse(request.getParameter('customerids'))]);
}
//add sublist code goes here
//set a client script
form.setScript(MY_GLOBAL_CLIENT_SCRIPT)
// set response
}
Then write a global client script which would fire on field change
function FieldChanged(type, name)
{
// Prompt for additional information, based on values already selected.
if ((name == YOUR_MULTISELECT_FIELD_ID))
{
//send AJAX with additional argument
nlapiRequestURL(SUITELET_URL + "&customerids=" +encodeURIComponent(JSON.stringify(nlapiGetFieldValue(YOUR_MULTISELECT_FIELD_ID))))
}
}

I generally just go with native elements for things like this and manage them the way you would manage any client side interaction. I generally add a field of type inlinehtml in my suitelet code and then populate the select list with client (field changed and post sourcing) events and AJAX calls.

HTML form with intermediate web service service call before submit

I have an HTML form to update the address in the account that submits to a Java servlet.
The problem is that, the form should not accept free flowing address text. Instead the user should enter the zip code/house number/street name, and hit a search button.
This search needs to go to a webservice, perform authentication and get a list of valid addresses that match the search criteria.
This list of addresses should be displayed to the user in the same form (either unhide a hidden element or use a modal dialog), so the user can pick his address.
Only after the valid address is picked, the user should be able to hit the form submit button which sends the data back to the servlet.
I am not sure how to have these 2 buttons do different actions in the form. I am very new to JavaScript and any pointers or examples are much appreciated.

For your webservice build an output of the values based on a search result (a basic string). Put this data in a JSON statement or just a javascript array.
Return something that looks like this.
['SearchResult1', 'SearchResult2', 'SearchREsult3']
On your search box. Bind a function on change or blur.
$('#SearchBox').bind('change', function(){
var val = $(this).val();
//Please reference the Jquery Ajax function as im typing this from memory and i always mix one or two things up :).
$.ajax({
"type" : "post",
"url" : "yoururlhere",
"data" : { "search":val },
success : function(dataset){
//When it comes back here check to see if its valid data etc etc
//After you validate you can populate a picklist on the page with the values. Or do anything you want with the values like this
for(x in dataset){
$('#DocumentElement').append('<p>'+ dataset[x] +'</p>');
}
}
});
});
This should start you out. After that you can just do more things on the callback, or modify the dom in a way which suits you better :).