Develop Reference

Getting data back from a mustache template Moodle 3.7

I am doing some development in moodle 3.7 for a new admin tool plugin. In this plugin I am generating a page from a custom made .mustache template. This template contains a number of values that are defined and managed within it, that I want to access within my .php file once a submit button is pressed.
Currently however I am unable to access these submitted values that are defined within the template. I can see their values in debugging under $form->_form->_submitValues but I cannot get to them due to _form being a protected variable of $form. I called $form->get_data(), but that only gave me access to the elements that I defined in php as non html elements (hidden for example), not in the template. I'm not sure if this is the right place to ask this question, but if anyone has any help they could give me on a path forward it would be much appreciated.
I am adding the template to the page using the function:
$mform->addElement(
'html',
$OUTPUT->render_from_template(PLUGIN_TOOL_NAME/members', $rendercontext)
);
Please let me know any other information you may need.

Any variables that you want to have access to must be defined in the mform using these functions:
$mform->addElement('hidden', 'VARIABLE_NAME');
$mform->setType('VARIABLE_NAME', PARAM_INT);
Any JavaScript that needs to update these values must be in a separate .js file, not in your template. If the JavaScript works in your mustache file, it will still do exactly the same thing if you put it in a different .js file, as long as that .js file is included on the page.
One thing to note: if you use the functions I defined above, the variable will not have an ID. instead it will have a name equal to whatever you put as VARIABLE_NAME. This means however that you cannot use document.getElementByID() to get the instance of your variable. instead you will have to use document.getElementsByName("VARIABLE_NAME")[0] to get access to your element.
If both of these things are done than you should see the value update and be sent to your mform on submit within the $data variable.

Using gsp layout declared variable in javaScript file that is being loaded in the same page

I recently started learning grails and I am trying to use a gsp variable declared in the layout of the page as:
<g:set var="abtestType" value="newSearchBar" />
in the js file that is being loaded on the same page. Things that I have tried:
alert(${abtestType});
alert(<%=abtestType%>);
alert("abtestType:"+abtestType);
but its showing error as variable is not defined. Probably I am trying to fetch it in wrong way, need help regarding this.

Even thinking about doing so neither makes sense nor applicable.
Reason for such statement is that when a gsp page is rendered to an html page, it replace grails tags with appropriate html tags or value. Similarly it replaces the ${} or <%%> with html or javascript or whatever that goes on front-end.
Hence the code that you have tried could have worked fine if you were having those javascript code lines in the gsp itself but as you have called externalised js file it actually don't know anything about gsp or jsp or any other Language's front-end support.
The one way of doing that if using global variable in javascript. e.g.
declare abtestType above like below:
<script>
var abtestType = "${abtestType}"
</script>
Now you have access to global variable abtestType in your javascript.
Use it in your javascript but remember now you need to have this variable iff the code using it is called otherwise very same error would you get i.e. variable is not defined
There is another way that I found in this post but is a manipulation actually.
Is there any analogue in Javascript to the __FILE__ variable in PHP?
Also, another good links is
Pass vars to JavaScript via the SRC attribute
Hope it helps!

Setting a variable of a javascript from an other, in javascript

I have the following problem:
In file (let a.js be) I have:
var kindofdisplay ;
In an other file ( let b.js be)
I get the information to set kindofdisplay.
Now, I would like to set kindofdisplay from file b.js so that when a.js is executed it will be able to process the variable in a correct way.
Many thanks

As Raja pointed out. If you can access the kindofdisplay variable on b.js, you can change it. You just need to take care not to declare it again.
You can try give a default value like:
var kindofdisplay='none';
And check if that's the value the variable has when on b.js. If it's not, you are probably declaring it again.

If you're using the two javascript files on different web pages, you could always set the variable as a cookie (providing you don't need it to be secure).
Have a look at this tutorial about cookies.
Another way to do this would be to put the script that defines the function for setting the variable in one file, link it to both pages that you need the variable to exist in and call the function on each page.
Of course, as a couple of people have already explained, if you're using the two javascript files on the same page, there's no need to do this - just ensure that the variable has the appropriate scope.

put bean values in external JS files

Is there a simply way to read bean values in a .js file?
I have an external JS file, arrays.js, which contains some arrays, used to populate a series of within a JSP page.
Now I need to fill the content of those arrays reading values.
I have to use the external js file, because it also contains lots of other methods to make the application work.
Thank you in advance

Simplest way is to let JSP print it as a global JS variable so that it's visible to the scripts which execute after DOM ready. E.g.
<script>var bean = ${beanAsJson};</script>
where ${beanAsJson} prints the bean in JSON format. You could use among others Gson for this.
Another way is to let the JS code send an ajax request to a servlet which writes exactly that bean in JSON format to the response. E.g. with little help of jQuery:
$.getJSON('jsonServlet', function(bean) {
// ...
});
See also:
accessing session variables in javascript inside jsp
How to use Servlets and Ajax?
Populating cascading dropdown lists in JSP/Servlet

In arrays.js file create a function function populateArray(arg1, arg2). Now you have a global function accessible from anywhere on your page, pass the values that you want to populate the arrays with as arguments to populateArray function and inside the function write the logic to populate your arrays.

javascript with many html pages

actually I have a javascript and I need to use it by multiple html pages, but I need to keep modifications on variables, so if one html page changed some variable value the other html pages can see the change, something like static variables, can anyone help?

Three ways:
Cookies
Using GET with url variables
Local storage
Since it appears you are new to web development now might be the time to learn about these, I've provided links for reference, but they are easily searchable.