Develop Reference

Can't get Result to show with HTML Forms and Javascript

I'm trying to get my results to show up in the text box inputs as per my assignment but I can't get them to show up at all. The math isn't showing up at all so my big issue is that I can't get the code to show up in the box.
document.querySelector.("#buttonS").addEventListener("click", function(e) {
if (document.querySelector("#gallons").reportValidity()) {
let gallons = document.querySelector("#gallons").value;
if (document.querySelector("#quarts").checked) {
quartsTotal = gallons * 4;
document.querySelector("#quartsResult").placeholder = `quartsTotal`);
} else if (document.querySelector("#pints").checked) {
} else if (document.querySelector("#cups").checked) {
}
}
});
<form id="bakimg">
<input type="number" step=".01" min="0" id="gallons" required><label for="gallons"> How many gallons of milk do you have?</label>
<br>
<br>
<label for="conversion">Which conversion would you like?</label><br>
<input type="radio" value="quarts" name="gallonsC" checked><label for="quarts">Quarts</label>
<input type="radio" value="pints" name="gallonsC"><label for="pints">Pints</label>
<input type="radio" value="cups" name="gallonsC"><label for="cups">Cups</label>
</form>
<br>
<button type="button" id="buttonS">Submit</button><br>
<h1>Results</h1>
<br>
<input type="text" id="quartsResult" placeholder=""><label for="quartsResult">Quarts</label><br>
<input type="text" id="pintsResult"><label for="pintsResult">Pints</label><br>
<input type="text" id="cupsResult"><label for="cupsResult">Cups</label>
</div>

Check your syntax and make the following changes:
Check the browser console for errors and use the appropriate syntax:
document.querySelector.("#buttonS")
should be written like this:
document.querySelector("#buttonS") // No . after querySelector
Check the extra parentheses:
document.querySelector("#quartsResult").placeholder = `quartsTotal`); // <-- Remove the closing parens
Add the proper IDs to the HTML input elements (quarts, pints, cups):
<input type="radio" value="quarts" name="gallonsC" checked id="quarts">
<input type="radio" value="pints" name="gallonsC" id="pints">
<input type="radio" value="cups" name="gallonsC" id="cups">
Remove the backticks in order to use the variable value (otherwise quartsTotal is still a string):
`quartsTotal` -> quartsTotal
// Perhaps this is what you meant:
`${quartsTotal}`
Good luck with the assignment!

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") {,,,}.

How to do toggle two mutually exclusive radio buttons in HTML

I have two radio buttons. When I click on one, the other should become unchecked, and vice versa.
The code I've produced so far is not working:
<input type="radio" id="rbdemail" onclick="chekrbdclick()" checked="checked" />
<input type="radio" id="rbdsitelnk" onclick="chekrbdclick()" />
function chekrbdclick()
{
// How to manage here?
}

Simple, just use a 'name' property with the same value for both elements:
<html>
<body>
<form>
<input type="radio" name="size" value="small" checked> Small
<br>
<input type="radio" name="size" value="large"> Large
</form>
</body>
</html>
hope it helps

<form>
<label>
<input type="radio" name="size" value="small" checked> Small
</label>
<br>
<label>
<input type="radio" name="size" value="large"> Large
</label>
</form>
Give them a name attribute with common value like size, and it will work. For best practice, you can place your input tag inside a label tag, so that, even if your user clicks on the text beside the button (ie on "Small" or "Large"), the respective radio button gets selected.

The perfect answer is above answered ,but I wanna share you how it can work by javascript ,this is javascript work (not standard answer) ....
<input type="radio" id="rbdemail" onclick="chekrbdclick(0)" checked="checked" value="Small" />Small<br>
<input type="radio" id="rbdsitelnk" onclick="chekrbdclick(1)" value="Large" />Large
<script>
function chekrbdclick(n)
{
var small = document.getElementById('rbdemail');
var large = document.getElementById('rbdsitelnk');
if(n === 0){
small.checked = true;
large.checked = false;
}
else {
small.checked = false;
large.checked = true;
}
}
</script>

Passing input id as jquery function paramenter

I'm new to jQuery.
I am trying to create a reusable function that will replace the text of a input field.
I pass in the field I want to change as one parameter and the new text as another parameter.
I figured I would try it out with some radio buttons.
HTML
<label>
<input type="radio" name="optradio" onClick="replaceText(txt_recipient, 'All')" value="0" checked>All</label>
<label>
<input type="radio" name="optradio" onClick="replaceText(txt_recipient, 'Geo')" value="1">Geographical Area</label>
<label>
<input type="radio" name="optradio" onClick="replaceText(txt_recipient, '')" value="2">Specific User</label>
<input type="text"id="txt_recipient" name="txt_recipient" value="All" />
JS
function replaceText(field, newtext) {
document.getElementById(field).text(newtext);
};
I originally toyed with the idea of
function replaceText(field, newtext) {
$(field).text(newtext);
};
but that didn't seem to work either. Help?

field is the actual element so just set the input value property.
function replaceText(field, newtext) {
field.value = newtext;
}
DEMO: http://jsfiddle.net/039v0wst/1/
with jQuery
function replaceText(field, newtext) {
$(field).val(newtext);
}
DEMO: http://jsfiddle.net/rgen7vLv/1/

First of all give unique names:
<input type="radio" name="optradio1" onClick="replaceText(txt_recipient, 'All')" value="0" checked>All</label>
Geographical Area
then js
$('input[name$="optradio1"]').val("newtext")

Can you pass the field id with ' '
E.g;
'txt_recipient' instead of 'txt_recipient

It is no longer recommended to declare event handlers inline in the HTML attributes.
Using a more modern syntax, I'd include a data attribute that specifies the text in the destination, the update your target using the string from the data attribute.
$('input[type="radio"]').change(function() {
$("#txt_recipient").val($(this).data("text"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label>
<input type="radio" name="optradio" data-text="All" value="0" checked>All</label>
<label>
<input type="radio" name="optradio" data-text="Geo" value="1">Geographical Area</label>
<label>
<input type="radio" name="optradio" data-text="" value="2">Specific User</label>
<input type="text"id="txt_recipient" name="txt_recipient" value="All" />

Onclick event not working with radio button

I am new to html
I am trying to add a onclick event with radio button but it is not working. I am unable to figure out the reason. Please help.
Example code
<script>
function select(btn)
{
var1=document.getElementById("radio1");
var2=document.getElementById("radio2");
var3=document.getElementById("radio3");
if(var1.checked==true)
{
document.myform.action="A.html";
}
elseif(var2.checked==true)
{
document.myform.action="B.html";
}
else
{
document.myform.action="C.html";
}
}
</script>
function test()
{
alert('Testing')
}
{% block radio_buttons %}
<br><br><br>
<!-- <input type="radio" id="radio1" name="project_type" value=0 checked onclick="alert('yes')"><label>Projects I own</label> -->
<input type="radio" id="radio1" name="project_type" value=0 checked onclick="select('this')"><label>Projects I own</label>
<br>
<input type="radio" id="radio2" name="project_type" value=1 onclick="test()"><label>Projects I manage</label>
<br>
<input type="radio" id="radio3" name="project_type" value=1 onclick="select()"><label>Projects I can edit</label>
<br>
{% endblock %}
This code I have added in templates. I tried adding alerts. Alert get exceuted but not onclick event

The select function contains a syntax error and is therefore never executed.
Write:
else if (var2.checked==true)
instead of
elseif (var2.checked==true)
To avoid these kind of errors open the developer console of your browser and check if syntax errors are shown.
Second the choice of select for the function name is unfortunate, since input elements have a select function which is called instead of your function.
To avoid this rename your function (e.g. radioSelect) and call it accordingly (onclick="radioSelect(this);").
Also your test function is placed outside of a script element which is not a good idea.

You have quite a few syntax errors in your code. And you don't need the (btn) after your select in your function. You have omitted a few semi-colons, not least the one after the testing alert.
This code works
<head>
<script>
function select() {
var1 = document.getElementById("radio1");
var2 = document.getElementById("radio2");
var3 = document.getElementById("radio3");
if (var1.selected === true) {
document.myform.action = "A.html";
}
else if(var2.selected === true) {
document.myform.action = "B.html";
} else {
document.myform.action = "C.html";
}
}
function test() {
alert('Testing');
}
</script>
</head>
<body>
<br>
<br>
<br>
<!-- <input type="radio" id="radio1" name="project_type" value=0 checked onclick="alert('yes')"><label>Projects I own</label> -->
<input type="radio" id="radio1" name="project_type" value=0 checked onclick="select();">
<label>Projects I own</label>
<br>
<input type="radio" id="radio2" name="project_type" value=1 onclick="test();">
<label>Projects I manage</label>
<br>
<input type="radio" id="radio3" name="project_type" value=1 onclick="select();">
<label>Projects I can edit</label>
</body>
Here is a fiddle