We Keep Coding

How to get values of all Checked checkboxes in Google App Script

I am using App script which takes HTML form input & writes it into Google Sheet.
I am running it on form submit as below:
google.script.run
.appscriptfunc();
While I'm able to get the value of selected Radio option by:
$("input[type='radio'][name='radioname']:checked").val()
I am getting the value of ONLY first checked option of the checkbox by:
$("input[type='checkbox'][name='checkboxname']:checked").val()
HTML of checkbox:
<div><input id="pos1" class="validate" name="Position" required="required" type="checkbox" value="abc">abc</div>
<div><input id="pos2" class="validate" name="Position" required="required" type="checkbox" value="xyz">xyz</div>
<div><input id="pos3" class="validate" name="Position" required="required" type="checkbox" value="pqr">pqr</div>
How to get the values of all checked options as a string (preferably a comma-separated string)?

You could use .each() to iterate over the checked checkboxes and collect the values in an array by pushing it into it.
var values = [];
$("input[type='checkbox'][name='Position']:checked").each(function(i, e) {
values.push(e.value);
});
console.log(values);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div><input id="pos1" class="validate" name="Position" required="required" type="checkbox" value="abc">abc</div>
<div><input id="pos2" class="validate" name="Position" required="required" type="checkbox" value="xyz" checked="true">xyz</div>
<div><input id="pos3" class="validate" name="Position" required="required" type="checkbox" value="pqr">pqr</div>

How about this? If you checked "abc" and "xyz" and push the submit button, {Position: ["abc", "xyz"] is returned.
GAS
function myFunction(e) {
Logger.log(e.Position) // ["abc", "xyz"] if you ckecked "abc" and "xyz"
}
HTML
<form>
<div><input id="pos1" class="validate" name="Position" required="required" type="checkbox" value="abc">abc</div>
<div><input id="pos2" class="validate" name="Position" required="required" type="checkbox" value="xyz">xyz</div>
<div><input id="pos3" class="validate" name="Position" required="required" type="checkbox" value="pqr">pqr</div>
<input type="submit" value="Submit" onclick="google.script.run.myFunction(this.parentNode);" />
</form>
If this was not what you want, I'm sorry.

Select last input with a value greater than zero jquery

I have a form with a bunch of inputs set with value zero like
<input type="text" name="qty" size="4" autocomplete="off" class="form-control quantity_wanted text" value="0">
The user then types in quantities of products they want. I want to select the last input where they entered a quantity. I was able to do something similar with checkboxes like this.
$('.product-checkbox:checkbox:checked:last')
But how can I put in a condition for an input box to select the last input with value greater than zero? Thanks.

You could use :not() and the Attribute Selector [attribute]
:not([value='0'])
JavaScript example
let qtyGT0 = [...document.querySelectorAll(".qty:not([value='0'])")].reverse()[0];
// Just to test
if (qtyGT0) qtyGT0.classList.add("red");
.red{ background:red; }
<input class="qty" value="0">
<input class="qty" value="1">
<input class="qty" value="1">
<input class="qty" value="0">
Another JavaScript example
in pure JavaScript ES6 it would look like
let qtyGT0 = [...document.querySelectorAll(".qty")].filter( el => el.value > 0 ).pop();
// Just to test
if (qtyGT0) qtyGT0.classList.add("red");
.red{ background:red; }
<input class="qty" value="0">
<input class="qty" value="1">
<input class="qty" value="1">
<input class="qty" value="0">
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
jQuery:
var $qtyGT0 = $(".qty").filter((i, el) => el.value > 0 ).last();
// Just to test
$qtyGT0.addClass("red");
.red{ background:red; }
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="qty" value="0">
<input class="qty" value="1">
<input class="qty" value="1">
<input class="qty" value="0">
http://api.jquery.com/filter/
https://api.jquery.com/last/

A pure JavaScript answer is that you would just iterate them in reverse and stop at the first one you find.
var inputs = document.querySelectorAll("input");
for(var len = inputs.length-1; len >=0; len--){
if(inputs[len].value > 0){
console.log(inputs[len].name);
inputs[len].style.backgroundColor = "yellow";
break;
}
}
<input type="text" name="qty" size="4" autocomplete="off" class="form-control quantity_wanted text" value="1">
<input type="text" name="qty2" size="4" autocomplete="off" class="form-control quantity_wanted text" value="2">
<input type="text" name="qty3" size="4" autocomplete="off" class="form-control quantity_wanted text" value="3">
<input type="text" name="qty4" size="4" autocomplete="off" class="form-control quantity_wanted text" value="0">

serialize a form in groups

Is it possible to serialize a form in separate groups?
<form id="form">
<input class="nameF" type="text" name="fName" value="first name">
<input class="nameF" type="text" name="lName" value="last name">
<input class="address" type="text" name="addOne" value="home address">
<input class="address" type="text" name="zip" value="zip code">
<input class="address" type="text" name="country" value="country">
</form>
$('#form').serialize();
//this gives me the complete form serialized
but can I break it down in groups with the fields containing class name?
Something like nameF : first+name&last+name and same for address, is this doable?

You can do like :
console.log($('.nameF').serialize());
console.log($('.address').serialize());
If you didn't get your answer , elaborate your question with full example.

<form id="form">
<input class="nameF" type="text" name="fName" value="first name"/>
<input class="nameF" type="text" name="lName" value="last name"/>
<input class="address" type="text" name="address[addOne]" value="home address"/>
<input class="address" type="text" name="address[zip]" value="zip code"/>
<input class="address" type="text" name="address[country]" value="country"/>
</form>
fiddle

You can use -
$('input .nameF').serialize();
$('input .address').serialize();
You can test it using-
alert(JSON.stringify($('input .nameF').serialize()));

Prevent jquery mobile refresh on form submit

I'm trying to get this form to execute this function on submit but for some reason, it pops the alert up, but then refreshes the entire page. I've tried other online solutions like: Prevent form redirect OR refresh on submit?
But that did not work.
function addFood() {
alert("123");
return false;
}
<form onsubmit="return addFood()" data-ajax="false">
<input type="text" name="" id="name" value="" placeholder="name" data-clear-btn="true"/>
<input type="text" name="" id="brand" value="" placeholder="brand" data-clear-btn="true"/>
<input type="text" name="" id="extra" value="" placeholder="extra" data-clear-btn="true"/>
<input type="number" name="" id="amount" value="" placeholder="amount" data-clear-btn="true"/>
<input type="number" name="" id="calories" value="" placeholder="calories" data-clear-btn="true"/>
<input type="number" name="" id="fat" value="" placeholder="fat" data-clear-btn="true"/>
<input type="number" name="" id="carbohydrate" value="" placeholder="carbohydrate" data-clear-btn="true"/>
<input type="number" name="" id="fibre" value="" placeholder="fibre" data-clear-btn="true"/>
<input type="number" name="" id="sugar" value="" placeholder="sugar" data-clear-btn="true"/>
<input type="number" name="" id="protein" value="" placeholder="protein" data-clear-btn="true"/>
<input type="submit" value="submit"/>
<form>

Remove onsubmit and set your <form>'s action attribute to # (I would also add an id)
<form id="myForm" action="#" data-ajax="false">
If you need something to happen when your <form> is submitted, use:
$("#myForm").submit(function(){
// do stuff that will fire off when my form is submitted
});

Targeting multiple input fields with using same name

I have a number of
<input type="text" name="price[]" value="100">
<input type="text" name="price[]" value="50">
<input type="text" name="price[]" value="10">
<input type="text" name="price[]" value="90">
I also have a input field
<input type="text" name="Add" value="">
I want
each price[] input field to have their own Addition Button next to it that will get the value from that specific price[] input field
add the value from the Add input field to it
update the value of that specific price[] input field in the end
How can I do that?

to iterate through the price[]-boxes for adding buttons right to them and set the value from price[] to the button, do it like this
<input type="text" name="price[]" value="100">
<input type="text" name="price[]" value="50">
<input type="text" name="price[]" value="10">
<input type="text" name="price[]" value="90">
<script type="text/javascript">
$(document).ready(function() {
$('input[name="price[]"]').each(function(i) {
$(this).after('<button class="additionButton" price="'+$(this).val()+'">'+$(this).val()+'</button>');
});
//click
$(".additionButton").on('click',function() {
//original price, set on load
alert($(this).attr('price'));
//price in the input-field before the button (could be changed, think this is the idea)
alert($(this).prev('input').val());
});
});
</script>
for the rest, i am not sure what you mean, "Add" has no value and you seriously want some kind of calculation? But try yourself, here was at least the iteration.