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.
Related
I have this form where I am getting the full state Value (input type="hidden" id="state_code" name="state_code" value="Pennsylvania") , but when I need to submit the form, I need to update the full state value with state code.
For example if the state value is "Pennsylvania", then I need to update that with "PA".
The state value is dynamic so it could be any state and I need to update it accordingly. How can I do that?
Here is my form:
<form
class="needs-validation"
action=""
id="lead-form"
method="POST"
novalidate=""
>
<div class="input-group">
<input
type="email"
id="email"
class="form-control"
size="20"
maxlength="80"
placeholder="Enter your email"
required=""
/>
</div>
<input type="hidden" name="Status" value="New" />
<input type="hidden" name="Brand__c" value="" />
<input type="hidden" name="lead_source" value="Web Lead Gen Form" />
<input type="hidden" name="Market_ID__c" value="CPG" />
<input type="hidden" name="MS_ID__c" value="6" />
<input type="hidden" id="state_code" name="state_code" value="Pennsylvania" />
<input type="hidden" name="zip" value="15001" />
<input type="hidden" name="country_code" value="US" />
<input type="submit" name="Submit" class="button-orange" />
</form>
If I understood correctly, you need to addEventListener to input that you want listen to.
HTML:
<input type="text" name="Thing" value="" />
Script:
/* event listener */
document.getElementsByName("Thing")[0].addEventListener('change', doThing);
/* function */
function doThing(){
alert('Horray! Someone wrote "' + this.value + '"!');
}
You need also to initialize some variable, which you will update based on your input. Also if you need to shorten states, you need to make some kind of vocabulary function that will convert to your desired output.
For some reason I can't retrieve value from text inputs with the serialize() form inputs function in jquery.
If i the inputs are type="text" console.log returns:
position_id=229&step=1&name=&email=
If the inputs are type="hidden" and a value="test" is added console.log returns:
position_id=229&step=1&name=test&email=test#test.com
This is my form:
<form id="referral-form" action="#" method="post">
<input type="hidden" name="position_id" value="{{$position->id}}" />
<input type="hidden" name="step" value="1" />
<input name="name" class="form-control" type="text" value="" id="name" required/>
<input name="email" class="form-control" type="text" value="" id="email" required />
<div class="button submit"></div>
</form>
and here is my javascript event:
onRefer: function(e) {
e.preventDefault();
var $form = $("#referral-form");
console.log($form.serialize());
}
In the following if checkbox is clicked the readonly attribute from the textbox must be removed and on unclicking git should be added.Can this be done by angular directive
<div class="radio">
<label>
<input type="radio">Project</label>
<input type="text" name="project" id="project" readonly/>
</div>
You can just use the built-in directive ngReadonly:
<input type="checkbox" ng-model="readonly">Project</label>
<input type="text" name="project" id="project" value="" placeholder="Project" ng-readonly="!readonly"/>
Here's a working plunkr.
Take a look on https://docs.angularjs.org/api/ng/directive/ngReadonly:
<label>Check me to make text readonly: <input type="checkbox" ng-model="checked"></label><br/>
<input type="text" ng-readonly="checked" value="I'm Angular" aria-label="Readonly field" />
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
});
I have 2 forms on my page.
The first one is always visible and the second one is hidden at first.
When the user clicks a specified radio option, the second form shows up.
In Chrome and Firefox, everything is fine, but in IE, the form shows, but I cannot write inside the textboxes fields.
The wierdest thing is that I can erase everything inside the textboxes but I cannot add anything.
Here is some code:
The first form:
<form name="calendar" action="" method="post">
<input type="text" name="n" />
<input type="radio" name="t" value="0" onclick="showSecondForm();" />Option 1
<input type="radio" name="t" value="1" onclick="showSecondForm();" />Option 2
<input type="radio" name="t" value="2" onclick="showSecondForm();" />Option 3
<input type="submit" name="submit" value="Submit" onclick="onSubmitAction();return false;">
</form>
The function showSecondForm() checks if option 3 is checked and if so, it shows the second form.
The second form is:
<div id="customForm" style="display: none;">
<form name="custom" action="" method="post">
<input type="text" name="a" />
<input type="text" name="b" />
<input type="text" name="c" />
<input type="text" name="d" />
<input type="text" name="e" />
</form>
</div>
The forms will never submit because everything I have to do is in javascript and I can reach both forms easilly. All my code is working fine except for the typing in textboxes in ie.
My javascript
<script type="text/javascript">
function showSecondForm()
{
if(document.calendar.t[2].checked)
{
document.getElementById('customForm').style.display = 'block';
}
else
{
document.getElementById('customForm').style.display = 'none';
}
}
</script>
In browsers like Google Chorme and Mozilla Firefox, when you put a maxlenght of 0 on a text input field, the textbox lenght is "unlimited". In Internet Explorer, it is really 0, so you cannot write anything in it.
So the code must be:
<div id="customForm" style="display: none;">
<form name="custom" action="" method="post">
<input type="text" name="a" maxlength="255" />
<input type="text" name="b" maxlength="255" />
<input type="text" name="c" maxlength="255" />
<input type="text" name="d" maxlength="255" />
<input type="text" name="e" maxlength="255" />
</form>
</div>
Try this:
<script type="text/javascript">
function showSecondForm() {
document.getElementById('customForm').style.display='block';
}
</script>