Develop Reference

Sending "this" radio button element parameter to function in Google Apps script

I have a custom sidebar generated via Apps Script on a Google Sheet.
The custom sidebar html contains a form and fieldset with 5 radio input elements, all with onchange events:
google.script.run.viewOptionsFormRadioChange(this);
Here's the full form HTML:
<form id="viewOptionsForm">
<fieldset class="viewOptionsFieldset">
<input type="radio" id="all" name="viewOptionsRadio" value="All" checked="checked" onchange='google.script.run.viewOptionsFormRadioChange(this);' >
<label for="all">All</label><br>
<input type="radio" id="firstImport" name="viewOptionsRadio" value="First Import" onchange='google.script.run.viewOptionsFormRadioChange(this);'>
<label for="firstImport">First Import</label><br>
<input type="radio" id="secondImport" name="viewOptionsRadio" value="Second Import" onchange='google.script.run.viewOptionsFormRadioChange(this);'>
<label for="secondImport">Second Import</label><br>
<input type="radio" id="compositionLinking" name="viewOptionsRadio" value="Composition Linking" onchange='google.script.run.viewOptionsFormRadioChange(this);'>
<label for="compositionLinking">Composition Linking</label><br>
<input type="radio" id="underTheHood" name="viewOptionsRadio" value="Under the Hood" onchange='google.script.run.viewOptionsFormRadioChange(this);'>
<label for="underTheHood">Under the Hood</label>
</fieldset>
</form>
I then have a function "viewOptionsFormRadioChange":
function viewOptionsFormRadioChange(checkbox) {
if(checkbox.checked == true){
if(checkbox.attr('id') == "underTheHood") {
SpreadsheetApp.getActive().toast("underTheHood Selected", "Title", 15);
}
}
}
I'm trying to get it so the toast notification appears when I select the Under the Hood radio button, however the "this" element parameter doesn't appear to be coming through as parameter variable: checkbox since the above doesn't work.
Any ideas where I'm going wrong?
Thanks either way

I think that in your script, how about modifying this to this.value or this.id? It seems that in this case, this cannot be parsed. So, when your script is modified, how about the following modification?
Modified script:
In this modification, your HTML is modified.
<form id="viewOptionsForm">
<fieldset class="viewOptionsFieldset">
<input type="radio" id="all" name="viewOptionsRadio" value="All" checked="checked" onchange='google.script.run.viewOptionsFormRadioChange(this.value);' >
<label for="all">All</label><br>
<input type="radio" id="firstImport" name="viewOptionsRadio" value="First Import" onchange='google.script.run.viewOptionsFormRadioChange(this.value);'>
<label for="firstImport">First Import</label><br>
<input type="radio" id="secondImport" name="viewOptionsRadio" value="Second Import" onchange='google.script.run.viewOptionsFormRadioChange(this.value);'>
<label for="secondImport">Second Import</label><br>
<input type="radio" id="compositionLinking" name="viewOptionsRadio" value="Composition Linking" onchange='google.script.run.viewOptionsFormRadioChange(this.value);'>
<label for="compositionLinking">Composition Linking</label><br>
<input type="radio" id="underTheHood" name="viewOptionsRadio" value="Under the Hood" onchange='google.script.run.viewOptionsFormRadioChange(this.value);'>
<label for="underTheHood">Under the Hood</label>
</fieldset>
</form>
But, in this case, the returned value is the string value like First Import, Second Import,,,. So, your Google Apps Script might be required to be modified as follows.
function viewOptionsFormRadioChange(checkbox) {
if(checkbox == "Under the Hood") {
SpreadsheetApp.getActive().toast("underTheHood Selected", "Title", 15);
}
}
By this modification, when you check "Under the Hood", toast() is run.
Note:
If you want to use the value of id, please moidify this.value to this.id. By this, you can use the value of ID in your HTML tag. It's like if(checkbox == "underTheHood") {,,,} instead of if(checkbox == "Under the Hood") {,,,}.

Creating multiple HTML elements with JavaScript. Dynamic forms?

I'd like to insert a block of HTML into the DOM when a checkbox or radio button or button is pressed.
For example, when a button is pressed, then another set of the labels and inputs below are added to the form.
<form class="details">
<div>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
<label for="job">Job:</label><br>
<input type="text" id="job" name="job"><br>
<label for="id">ID:</label><br>
<input type="text" id="id" name="id">
<label for="shoesize">Shoe size:</label><br>
<input type="text" id="shoesize" name="shoesize"><br>
<label for="helmetsize">Helmet size:</label><br>
<input type="text" id="helmetsize" name="helmetsize">
</div>
</form>
Every time a button is pressed I'd like another set of fields where someone else can add their details to the form.
I am aware of document.createElement(), but it seems like I can only create 1 element at a time using that. This form will probably grow and so would like something less verbose.
I've experimented with appendChild() e.g.
var details = document.getElementsByClassName('details')[0]
var newDetailsSection = '<div>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
<label for="job">Job:</label><br>
<input type="text" id="job" name="job"><br>
<label for="id">ID:</label><br>
<input type="text" id="id" name="id">
<label for="shoesize">Shoe size:</label><br>
<input type="text" id="shoesize" name="shoesize"><br>
<label for="helmetsize">Helmet size:</label><br>
<input type="text" id="helmetsize" name="helmetsize">
</div>'
details.appendChild(newDetailsSection)
But I am getting an error because newDetailsSection is not of type Node - it is a string and I understand that.
I am new to web development.
Is this a use case for a JS framework that handles components? Is this what a component is?

if u want to add html string; innerHTML is your friend.
to append use details.innerHtML = details.innerHtML + newSectionHTML;
ofcourse i would recommend using document.createElement and create a function that returns element that contain label:
example:
function creatInput(name, label){
const labelElm = document.createElement('label');
const inputElm = document.createElement('input');
labelElm.setAttribute('for', name);
labelElm.innerText = label+':';
inputElm.setAttribute('name', name);
inputElm.setAttribute('id', name);
inputElm.setAttribute('placeholder', label);
labelElm.appendChild(input);
return labelElm;
}
this way you can reuse it for all your input simply call:
var details = document.querySelector(".details");
details.appendChild( createInput('fname','First name') );
details.appendChild( createInput('lname','Last name') );
/// .. etc

Use javascript with POST method

sorry for that, but I need your help on something :
I need to get my values in javascript, as it was filled in my form, and I have no clue how to do it, as whenever I tried to search, it was made for people with at least some understanding of javascript. I have none, but tried my best, the results of my efforts are here :
function validateForm() {
var x = form.('form').elements["sexe"];
if (x == null) {
alert("Un sexe doit être sélectionné");
return false;
}
}
I need to get it done by POST method, as get isn't allowed :
<form action="Monformulairedereferencement." method="post" id="sexe" name="form">
<div id="BlueBorder1">
sexe
<input type="radio" id="Homme" name="sexe" value="Homme" aria-checked="true">
<label for="Homme">Homme</label>
<input type="radio" id="Femme" name="sexe" value="Femme" aria-checked="true">
<label for="Femme">Femme</label>
<input type="radio" id="Autre" name="sexe" value="Autre" aria-checked="true">
<label for="Autre">Autre</label>
</div>
<div>
<label for="civilite">civilite</label>
<select name="civilite" id="civilite">
<option value="M.">M.</option>
<option value="Mme.">Mme.</option>
</select>
</div>
<div>
<label for="nom">nom</label>
<input type="text" id="nom" name="nom" minlength="2">
</div>
<div id="BlueBorder2">
<label for="email">email</label>
<input type="email" id="email">
</div>
<div>
<label for="telephone">telephone</label>
<input type="tel" id="telephone" name="telephone">
</div>
<div>
<label for="website">website</label>
<input type="url" name="website" id="website">
</div>
<div id="BlueBorder3">
<label for="datedenaissance">date de naissance</label>
<input type="date" id="datedenaissance" name="date de naissance">
</div>
<div>
hobbies
<input type="checkbox" id="Jeuxvideo" name="hobbies">
<label for="Jeuxvideo">Jeux video</label>
<input type="checkbox" id="Cinema" name="hobbies">
<label for="Cinema">Cinema</label>
<input type="checkbox" id="Lecture" name="hobbies">
<label for="Lecture">Lecture</label>
<input type="checkbox" id="Sport" name="hobbies">
<label for="Sport">Sport</label>
<input type="checkbox" id="Informatique" name="hobbies">
<label for="Informatique">Informatique</label>
</div>
<input id="token" name="token" type="hidden" value="my first website">
<div>
<label for="validation">validation</label>
<input type="submit" value="Envoyer le formulaire" id="validation">
If you have any clue of what isn't working or anything, then I'll gladly accept it. My only goal is to improve and I'm currently very bad.
Have a nice day and thanks for passing by :)

To get a value of a text input in JS, you need to get this input then get its value.
So for example: <input type="text" id="nom" name="nom" minlength="2">
to get this input value in JS, you have to follow 2 steps:
Assign the input element to variable -> let nom = document.getElementById('nom');
Get the value of this input element -> let nomValue = nom.value;
The previous approach can be applied to any text input (text, password, email, ...), textarea, & select menu
For checkboxes or radio buttons, you need to check if they are checked or not, for example: <input type="radio" id="Homme" name="sexe" value="Homme" > to check this, follow 2 steps:
Assign checkbox or radio button to a variable -> let Homme = document.getElementById('Homme');
Check if this checkbox or radio button is checked -> if (Homme.checked) {console.log('Checked')} else {console.log('Checked')}
For simple validation approach for your code, follow this snippet:
<!-- HTML Form -->
<form action="x.php" method="post" id="sexe" name="form">
<input type="text" id="nom" name="nom" minlength="2">
<input type="radio" id="Homme" name="sexe" value="Homme">
<input type="submit" value='Send' >
</form>
<!-- Validation Script -->
<script>
// Get Form Itself
let myForm = document.getElementById('sexe');
// Add Event To Form On Submit, Trigger The Validation Funcntion
myForm.addEventListener('submit', validateForm)
// Validate Form Function
function validateForm(e) {
// Get All Inputs In Your Form
let nom = document.getElementById('nom'); // Text Input
let Homme = document.getElementById('Homme'); // Radio Input
// Check Text Input Value If Not Empty
if(nom.value === '') {
// Prevent Form Submition
e.preventDefault();
// Alert Error Message
alert('Name Can Not Be Empty');
}
// Check If Radio Button Not Checked
else if (!Homme.checked) {
// Prevent Form Submition
e.preventDefault();
// Alert Error Message
alert('Radio Button Is Required');
}
// If The Previous Two Validation Steps Is Done And No Errors, The Form Will Be Sent
}
</script>

In my view, the easiest way to grab the value from the form is to use addEventListners with Submit event. It looks likes an element.addEventListner('submit',function);
var forms = document.getElementsByTagName('form'); //we have selected whole form
function formSubmitted(){
const emails = document.getElementsById('email');//select the email section
let emailValue = emails.value // it will give you the value of email after submitting
}
forms.addEventListner('submit',formSubmitted);//eventlistern which run after submiting the data in form

How to validate multiple inputs every focusout event using jquery?

Good day everyone, I'm having a problem on validating my inputs using focusout event. What i wan't is, every time the input was focusout it will validate that input only without affecting the other inputs. The problem is i have a lot of inputs and i wan't it with the same id. That's the problem because when one of my inputs triggered it validate all. I had a lot of research to this and some where relevant to my question but i still i don't get it and i'm new to programming. I need help please!
heres the link: https://jsfiddle.net/m7wa35tc/
var Main = {
init: function(){
this.handleBinds();
},
handleBinds: function(){
$('.required').on("keyup", function(){
if($.trim($(this).val()).length < 1){
$(this).css("border-color", "red");
}else{
$(this).css("border-color", "");
}
});
}
};
$(document).ready(function(){
Main.init();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Name
<input type="text" id="required">
</label>
<br>
<label>Corporate or Legal Name
<input type="text" id="required">
</label>
<br>
<label>Location Address
<input type="text" id="required">
</label>
<br>
<label>City, State
<input type="text" id="required">
</label>
<br>
<label>Zip/Postal Code
<input type="text" id="required">
</label>
<br>
<label>Country
<input type="text" id="required">
</label>
<br>
<label>Email Addresse
<input type="text" id="required">
</label>

You need to set unique id to each element you want to make reference, in this case use class="required" instead

Hide/display of 3 textboxes on selection of radio button

I have 2 radio buttons. On selection of one I want to display 3 text boxes and hide it on selection of other.
Here is the code.
These are my 2 radio buttons.
<input type="radio" name="type"> Fresher
<input type="radio" name="type"> Experienced
On click of radio button experienced I want to display these 3 text box.
Company Name: <input type="text" hidden="true"/> <br/>
Designation: <input type="text" hidden="true"/> <br/>
Year_of_Experience: <input type="text" hidden="true"/> <br/>
Please help me out with javascript for this as new to it.

You could do this as follows. First change your HTML to this:
<input type="radio" name="type" value="Fresher"> Fresher
<input type="radio" name="type" value="Experienced"> Experienced
<div id="textboxes" style="display: none">
Company Name: <input type="text" hidden="true"/>
Designation: <input type="text" hidden="true"/>
Year_of_Experience: <input type="text" hidden="true"/>
</div>
What this code adds to your code is to have a value for the radio buttons. This allows us to make a selection based on which radio button was selected. Secondly, the input fields are grouped together in a <div> to allow for easy hiding of the three input fields. After you have modifief your HTML as such, include jQuery on your website and use this code:
$(function() {
$('input[name="type"]').on('click', function() {
if ($(this).val() == 'Experienced') {
$('#textboxes').show();
}
else {
$('#textboxes').hide();
}
});
});
You can see how this works using this JSFiddle: http://jsfiddle.net/pHsyj/

This is the best example.Try something like this.,this is a sort of example
$("input[type='radio']").change(function(){
if($(this).val()=="other")
{
$("#otherAnswer").show();
}
else
{
$("#otherAnswer").hide();
}
});
http://jsfiddle.net/Wc2GS/8/
I guess this would solve your probs

<input type="radio" name="type" id='frsradio'> Fresher
<input type="radio" name="type" id='expradio'> Experienced <br>
<input type="text" class='txbx' hidden="true"/> <br/>
<input type="text" class='txbx' hidden="true"/> <br/>
<input type="text" class='txbx' hidden="true"/> <br/>
$(function() {
$('#expradio').click(function() {
$('.txbx').attr('hidden',false);
});
$('#frsradio').click(function() {
$('.txbx').attr('hidden',true);
});
});
WORKING jsfiddle

See there is no unique identity available for your html elements, i just given this code by thinking in a generic manner.
Try,
$('input[name="type"]:eq(1)').change(function(){
$('input[type="text"]').toggle(this.checked);
});

<input type="radio" name="type" onClick ="radio"> Fresher
<input type="radio" name="type" onClick ="radio"> Experienced
on click of radio button experienced i want to display these 3 text box.
<input type="text" hidden="true" class="text"/> <br/>
<input type="text" hidden="true" class="text"/> <br/>
<input type="text" hidden="true" class="text"/> <br/>
and javascript:-
<script>
function radio()
{
var result = document.getElementsByClassName('text'").style.display="none";
}
</script>

Try this
<input type="radio" name="type" value="fresher"> Fresher
<input type="radio" name="type" value="exp"> Experienced
<br/>
<input class="box" type="text" hidden="true"/> <br/>
<input class="box" type="text" hidden="true"/> <br/>
<input class="box" type="text" hidden="true"/> <br/>
Script
$("input[type='radio']").on('change',function(){
if($(this).val() == "exp")
$('.box').show('slow');
else
$('.box').hide();
});
DEMO

Try this....
<input type="radio" name="type" id="fresh"> Fresher
<input type="radio" name="type" id="exp"> Experienced
<input type="text" class="hid" hidden="true"/> <br/>
<input type="text" class="hid" hidden="true"/> <br/>
<input type="text" class="hid" hidden="true"/> <br/>
$("#fresh").change(function(){
$('.hid').css("style","display:none");
});
$("#exp").change(function(){
$('.hid').css("style","display:block");
});

For default hide the text boxes In OnRender Complete Method you need hide the three textbox for that you put the below code.
$("#textbox 1").hide();
$("#textbox 2").hide();
$("#textbox 3").hide();
You need to write the code in Radio button on change.
Using the Id get the value of radio button
var val=$('#radioId').val;
if(val=='Fresher')
{
$("#textbox 1").show();
$("#textbox 2").show();
$("#textbox 3").show();
}
else if (val=='Experienced'){
$("#textbox 1").hide();
$("#textbox 2").hide();
$("#textbox 3").hide();
}