We Keep Coding

Passing multiple parameters from client HTML to server

I have a HTML form allowing users to fill out questionnaires, I would like to send the filled form as well as some variables (accessible within the HTML).
I've successfully sent filled form on it's own with...
HTML...
<button onclick="google.script.run.processForm(this.form)">Submit</button>
Javascript...
function processForm(formData) {...}
But when trying to send this.form along with extra variables / parameters, either via two parameters method...
<button onclick="google.script.run.processForm(this.form, var1)">Submit</button>
function processForm(formData, var1) {...}
or wrapped inside an array (below), both fails...
<button onclick="google.script.run.processForm([this.form, var1])">Submit</button>
function processForm(array) {...}
I've also tried declaring the array separately but same result...
HTML...
<? var arr = [this.form, var1] ?>
<button onclick="google.script.run.processForm(arr)">Submit</button>
JavaScript...
function processForm(arr) {...}
What am I doing wrong?

When the form object is sent to the Google Apps Script side using google.script.run, the form object is parsed on the internal server side and the value can be retrieved as an argument of the function at the Google Apps Script side. In this case, it seems that the 2nd argument cannot be used. I'm not sure whether this is the current specification or a bug.
If you want to include a value except for the form object, as a simple modification, how about the following sample script?
Sample script:
HTML & Javascript side:
<form>
<input type="text" name="input1">
<button onclick="sample(this.form);return false;">Submit</button>
</form>
<script>
function sample(e) {
const addValue = "sample"; // This is a value you want to add.
const input = document.createElement('input');
input.setAttribute('name', "addValue")
input.setAttribute('value', addValue);
e.appendChild(input);
google.script.run.processForm(e);
}
</script>
In this modification, a value you want to add is added to the form object. By this, the form object can be parsed by including the added value.
When this HTML is opened and put a sampe value of "test" into the input tag and the button is clicked, formData of function processForm(formData) {...} is {"addValue":"sample","input1":"test"}. So, you can retrieve your added value with formData.addValue.
Note:
As another direction, I think that the method that the form object is parsed and the value is included in the parsed value in the Javascript side can be also used. In this case, how about the following modification? In this case, in order to parse the form object, I used HtmlFormObjectParserForGoogleAppsScript_js.
HTML & Javascript side:
<script src="https://cdn.jsdelivr.net/gh/tanaikech/HtmlFormObjectParserForGoogleAppsScript_js/htmlFormObjectParserForGoogleAppsScript_js.min.js"></script>
<form>
<input type="text" name="input1">
<button onclick="sample(this);return false;">Submit</button>
</form>
<script>
async function sample(e) {
const addValue = "sample"; // This is a value you want to add.
const obj = await ParseFormObjectForGAS(e.parentNode); // Heare, this library is used.
obj.addValue = addValue;
google.script.run.processForm(obj);
}
</script>

Global variable not working as an input value

I am a JavaScript beginner, I am stuck with a problem regarding variables.
I wrote this code :
var acNo = document.getElementById("ac").value;
function doSomething(){
alert(acNo);
}
The output is: undefined
But when I did this :
var acNo = 3
The output is 3
Html code :
(This is a very big project so that's why I cant share much code, but I am sharing the HTML code related to this script)
<td>A/c</td>
<td> <input type="number" name="" id="ac"></td>
<td> <input type="number" name="" id="acHour"></td>
Can you please tell me how can I fix it while keeping the variable global only.

Try defining acNo after the document has fully loaded, or within the function.
Solution 1:
let acNo;
window.onload = () => {
acNo = document.getElementById("ac").value;
}
function doSomething() {
alert(acNo);
}
Solution 2:
funtion doSomething() {
alert(document.getElementById("ac").value)
}

A way you can go to check that is by opening the dev tools of your browser and running your document.getElementById in the console.
You will be able to see everything about the element and what properties it has. For example, you might want to check innerHTML instead of value depending on your element type.

I think the value is only set in the beginning and not when you run doSomething later. If you want to have the value globally, have a global variable and keep updating it when you call doSomething.
var acNo = document.getElementById("ac").value;
function doSomething(){
acNo = document.getElementById("ac").value;
alert(acNo);
}

Jquery Ajax: Cannot assign to a function result error

In my ajax servlet I am setting a list of objects to request attribute.
request.setAttribute("testModelList",testList);
In my script I am trying to retrieve the attribute and set in to hidden variable.
// my JS
$('#testDetails').val() = '${testModelList}';
My jsp
<INPUT type="hidden" id = "testDetails" >
But I am getting an error
Cannot assign to a function result
Can anyone help me how to get the request attribute list to the hidden variable in JSP through Ajax?

You can't assign a value to the result of a function:
$('#testDetails').val() = '${testModelList}';
But you can pass the value to the function:
$('#testDetails').val('${testModelList}');

$(document).ready(function() stops working as soon as i assign value to variable ( var userid = ${userid}; )

I just want to be able to access variable userid in document.ready function. It's accessible in the JSP page but not in jQuery. I am able to print value of ${userid} on the same JSP page but not in jQuery. I have passed userid obj with model and view object to this JSP page. However I am not able to access that object.
$(document).ready(function(){
var examid = ${userid};
alert("Hello !");
//alert(username);
});

If the value of ${userid} is a string then you need to wrap it in quotes, otherwise you'll be getting a syntax error thrown in your JS code.
For example var examid = '${userid}';
– Rory McCrossan Apr 4 at 10:45

How can I use django template variable with filter(safe) as an argument to call javascript function?

This is my javascript function :
function change(text){
var value = text;
}
This is my HTML code:
More
Now the above code works until I add "safe" filter to my django variable. When I'm calling the change function like this change('{{itm.description|safe}}') it doesn't works.