We Keep Coding

GAS form- Onchange event in radio button, displaying an input box

One all day triying to display an input box if a radio button if checked on 'Si' value in a form made under google app script. All logic i saw here for a normal JS-HTML form failed and can't realize what is wrong
<div class="w3-half">
<label class="w3-text-brown"><b>¿Cuenta con alguna certificación o sello de calidad?</b></label>
<div class="w1-one">
<input class="w3-radio" type="radio" name="calidad" id="calidad" value="SI"onchange="my_function()" >
<label>SI</label>
<input class="w3-radio" type="radio" name="calidad"id="calidad" value="NO">
<label>NO</label>
</div>
</div>
<div class="w3-half">
<label class="w3-text-brown"><b>¿Cuál? </b></label>
<input class="w3-input w3-border w3-sand" id="selloCali" type="text"style="display:none;">
</div>
</div>
function my_function() {
if( document.getElementById("calidad").value == 'Si' ){
document.getElementById("selloCali").style.display = 'block';
} else {
document.getElementById("vigencia1").style.display = 'block';
};
};

How to Get the value of the checked radio button in a group using type attribute?

I am trying to add focus to a text area using jQuery.
$("input[type='checkbox']").click(function(){
$("#mycbxs input[type ='checkbox']").val("");
var radioButtonsChecked = $("input[value='']:checked");
radioButtonsChecked = $("#mycbxs:checked");
if(radioButtonsChecked == "B") {
$("#BAcbx").focus();
}
if(radioButtonsChecked == "M") {
$("#MAcbx").focus();
}
if(radioButtonsChecked == "P") {
$("#PHDcbx").focus();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mycbxs">
<br><strong> </strong>
<br><input type="checkbox" id="BAcbx" value="B"> BA
<br><input type="checkbox" id="MAcbx" value="M"> MA
<br><input type="checkbox" id="PHDcbx" value="P"> PHD
</div>
<div id="myinputs">
<br><strong>Discipline</strong>
<br><input type="text" id="BAText" size="30">
<br><input type="text" id="MAText" size="30">
<br><input type="text" id="PHDText" size="30">
</div>
Any ideas why it is not adding focus on the selected text areas? This is difficult since the HTML does not have a "Name" attribute (this is on purpose).
Thank you for help.

$("input[type='checkbox']").click(function(){
var radioButtonsChecked= $(this).val();
if(radioButtonsChecked == "B") { $("#BAcbx").focus(); }
if(radioButtonsChecked == "M") { $("#MAcbx").focus(); }
if(radioButtonsChecked == "P") { $("#PHDcbx").focus(); }
})
However in this case i suggest radio button so there is no multiple selection

You need to use radioButtonsChecked.val() == "B" instead of radioButtonsChecked == "B".

Here you go with a solution
$('input[type="checkbox"]').on('change', function(){
if($(this).is(':checked')){
$('#' + $(this).attr('text-id')).focus();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mycbxs">
<br><strong> </strong>
<br><input type="checkbox" id="BAcbx" text-id="BAText" value="B"> BA
<br><input type="checkbox" id="MAcbx" text-id="MAText" value="M"> MA
<br><input type="checkbox" id="PHDcbx" text-id="PHDText" value="P"> PHD
</div>
<div id="myinputs">
<br><strong>Discipline</strong>
<br><input type="text" id="BAText" size="30">
<br><input type="text" id="MAText" size="30">
<br><input type="text" id="PHDText" size="30">
</div>
I've used one extra attribute text-id in checkbox to keep the input textbox id
Hope this will help you.

if else or switch html checkbox get value

what coding html if else or switch for checkbox? Example when tick 1 checkbox 'text' statement will appear. But if tick 3 checkbox the statement change to 'another text'. Given my coding; If tick 'cat' checkbox 'British shorthair' checkbox will appear and click again 'cute' text appear. How to make it if two or more checkbox tick the text change example like 'super cute'
<script type="text/javascript">
function ShowHideDiv(Cat) {
var dvCat = document.getElementById("bigCat");
bigCat.style.display = Cat.checked ? "block" : "none";
console.log(Cat.value)
console.log("Text Inside LABEL:" + Cat.parentNode.textContent)
}
</script>
<label for="Cat">
<input type="checkbox" id="Cat" onclick="ShowHideDiv(this)" value="cat"/> Cat
</label>
<script type="text/javascript">
function ShowHideDiv2(Rabbit) {
var bigRabbit = document.getElementById("bigRabbit");
bigRabbit.style.display = Rabbit.checked ? "block" : "none";
console.log(Rabbit.value)
console.log("Text Inside LABEL:" + Rabbit.parentNode.textContent)
}
</script>
<label for="Rabbit">
<input type="checkbox" id="Rabbit" onclick="ShowHideDiv2(this)" value="Rabbit"/> Rabbit
</label>
<div id="bigCat" style="display: none">
<label>
<input type="checkbox" id="bigSubCat" /> British shorthair
</label>
<label>
<p id="subCats1" ></p>
</label>
<script>
document.getElementById("bigSubCat").addEventListener("click", function() {
document.getElementById("subCats1").innerHTML = "Cute";
});
</script>
<label>
<input type="checkbox" id="bigSubCat" /> Exotic Shorthair
</label>
</div>
<div id="bigRabbit" style="display: none">
<label>
<input type="checkbox" id="bigSubRabbit" /> White Rabbit
</label>
<label>
<input type="checkbox" id="bigSubRabbit" /> Black Rabbit
</label>

coding for last radio button text input

I have a list of 5 radio buttons, with the last radio button to select a manual entry text (an "other" option). I can't seem to get the form to work for all 5 possibilities - either it returns the radio value or the written value (currently only the written value and not any of the preset radio values). Can't get it to work for all of 5 possible returns.
Here's the javascript to either select text or clear it when unselected:
<script type= "text/javascript" >
function HandleRadioOtherBox(grp, txt)
{
var x, len = grp.length;
for (x =0; x<len; ++x)
{
if (grp[x].checked) break;
}
if (x < len && grp[x].value == txt.name)
{
txt.disabled = false;
txt.select();
txt.focus();
}
else
{
txt.value = "";
txt.disabled = true;
}
return true;
}
window.onload = function ()
{
var ele = document.forms[0].elements;
return HandleRadioOtherBox(ele['OPS'], ele['Country']);
}
</script>
And here, the HTML radio button portion:
<tr valign="top">
<td class="style3">Country: </td>
<td class="copy">
<input type="radio" name="OPS" value="United States" checked="checked"
onclick="return HandleRadioOtherBox(OPS, Country)" /> United States
<input type="radio" name="OPS" value="Canada"
onclick="return HandleRadioOtherBox(OPS, Country)" /> Canada
<input type="radio" name="OPS" value="England"
onclick="return HandleRadioOtherBox(OPS, Country)" /> England
<input type="radio" name="OPS" value="Australia"
onclick="return HandleRadioOtherBox(OPS, Country)" /> Australia <br />
<input type="radio" name="OPS" value="Country"
onclick="return HandleRadioOtherBox(OPS, Country)" /> Other Country:
<input type='text' name="Country" id="Country" maxlength='80' />
</td>
</tr>
Have spent many, many hours with not much of a hole made in the cement (yet). :-)
Help!

You can write a single function for your form which checks for two events:
radio button check
text input blur
and then gives an appropriate response based on which radio button registered a check event or whether the text input registered a blur event:
var radioButtons = document.querySelectorAll('input[type="radio"]');
var otherCountryRadio = document.querySelector('.other-country input[type="radio"]');
var otherCountryText = document.querySelector('.other-country input[type="text"]');
function returnValue() {
if (this === otherCountryRadio) {
otherCountryText.focus();
}
else {
if (this.value.match(/\w/)) {
console.log(this.value);
}
}
}
for (var i = 0; i < radioButtons.length; i++) {
radioButtons[i].addEventListener('change', returnValue, false);
}
otherCountryText.addEventListener('blur', returnValue, false);
div {
margin: 12px;
}
.other-country input[type="text"] {
visibility: hidden;
}
.other-country input:checked + input[type="text"] {
visibility: visible;
}
<form>
<div class="top-countries">
<label><input type="radio" name="OPS" value="United States" checked="checked" /> United States</label>
<label><input type="radio" name="OPS" value="Canada" /> Canada</label>
<label><input type="radio" name="OPS" value="England" /> England</label>
<label><input type="radio" name="OPS" value="Australia" /> Australia</label>
</div>
<div class="other-country">
<label>
<input type="radio" name="OPS" value="Other" /> Other Country
<input type="text" name="Country" />
</label>
</div>
</form>

Launch script after confirming action (HTML)

So, I'm currently doing my final internship for the Network Administration training at school. And I've been asked to create a simple web page that allows for selecting a range of servers to perform a clean install on. Like: when I select 'Server 1' and 'Server 4' > click 'Submit' > confirm my action > launch VBscript that performs clean install.
What I have so far (also refer to pieces of code at end):
- Basic welcome text
- Check boxes
- Select all (javascript)
- Continue button
- When clicking continue button > show warning that asks for confirmation
What I want it to do, is launching the script of the selected box(es) after confirming. Is that possible? I mean, I assume I'll need something else than HTML. Javascript maybe? How would I do such thing?
I'm not a total expert with this stuff, not at all. I do have some experience with HTML and CSS, but Javascript and all that? Nope, not at all. Would be very happy to have some help with this!
<html>
<head>
<title>
Huawei Cleaning Center
</title>
<script type="text/javascript">
function SetAllCheckBoxes(FormName, FieldName, CheckValue)
{
if(!document.forms[FormName])
return;
var objCheckBoxes = document.forms[FormName].elements[FieldName];
if(!objCheckBoxes)
return;
var countCheckBoxes = objCheckBoxes.length;
if(!countCheckBoxes)
objCheckBoxes.checked = CheckValue;
else
// set the check value for all check boxes
for(var i = 0; i < countCheckBoxes; i++)
objCheckBoxes[i].checked = CheckValue;
}
</script>
<script type="text/javascript">
function clicked() {
if (confirm('Weet u zeker dat u wilt doorgaan?')) {
yourformelement.submit();
} else {
return false;
}
}
</script>
</head>
<body>
<center><h1>Welkom bij Huawei Cleaning Center!</h1></center>
<br><br>
Kruis één of meerdere van de volgende servers aan waarop u een Clean Install wilt uitvoeren:<br><br>
<form method="GET" action="page17.php" name="myForm" onsubmit="return false;">
<label for="myCheckbox1">
<input type="checkbox" name="myCheckbox" value="1" id="myCheckbox1">
172.16.115.11 </label>
<br>
<label for="myCheckbox2"><input type="checkbox" name="myCheckbox" value="2" id="myCheckbox2">
172.16.115.21 </label>
<br>
<label for="myCheckbox3"><input type="checkbox" name="myCheckbox" value="3" id="myCheckbox3">
172.16.115.31 </label>
<br>
<label for="myCheckbox4"><input type="checkbox" name="myCheckbox" value="4" id="myCheckbox4">
172.16.115.41 </label>
<br><br><input type="submit" id="submit1" onclick="clicked();" value="Doorgaan">
<input type="button" onclick="SetAllCheckBoxes('myForm', 'myCheckbox', true);" value="Selecteer alles">
<input type="button" onclick="SetAllCheckBoxes('myForm', 'myCheckbox', false);" value="Deselecteer alles">
</form>
</body>
</html>

Change your js like this. Form gonna submit if you click yes
<script type="text/javascript">
function clicked() {
var confirmed = confirm('Weet u zeker dat u wilt doorgaan?')
if (confirmed) {
yourformelement.submit();
} else {
alert('You clicked No');
}
}
</script>

if you use JQuery you also could do this:
$(yourformelement).submit(function(e){
var dialogresult = confirm('Confirm');
if (dialogresult ) {
return true;
} else {
return false;
}
});

Looking at your code, it seems like you're using PHP. In this case you could try something like this in your php page (page17.php as referred in the action attribute):
if(!empty($_POST['serverList'])) {
foreach($_POST['serverList'] as $arg) {
exec('cscript "path/to/script.vbs" ' . $arg);
}
}
$_POST['serverList'] contains an array of the checkboxes values and the foraech loop will execute a VBscript passing the values as arguments.
Here's a snippet of the JS/CSS/HTML code:
function setCheckboxes(checkboxName, value) {
checkboxes = document.getElementsByName(checkboxName);
for (var i = 0, n = checkboxes.length; i < n; i++) {
checkboxes[i].checked = value;
}
}
function submitForm(checkboxName) {
checkboxes = document.getElementsByName(checkboxName);
for (var i = 0, n = checkboxes.length; i < n; i++) {
if (checkboxes[i].checked == true) {
confirmation = confirm('Weet u zeker dat u wilt doorgaan?');
if (confirmation) {
return true;
} else {
return false;
}
}
}
alert('No server selected!');
return false;
}
.main-heading {
margin-bottom: 60px;
text-align: center;
}
.info {
margin-bottom: 60px;
}
<h1 class="main-heading">Welkom bij Huawei Cleaning Center!</h1>
<p class="info">
Kruis één of meerdere van de volgende servers aan waarop u een Clean Install wilt uitvoeren:
</p>
<form method="POST" action="page17.php" name="myForm" onsubmit="return false;">
<label for="checkbox-1">
<input type="checkbox" name="serverList[]" value="1" id="checkbox-1">
172.16.115.11
</label>
<br>
<label for="checkbox-2">
<input type="checkbox" name="serverList[]" value="2" id="checkbox-2">
172.16.115.21
</label>
<br>
<label for="checkbox-3">
<input type="checkbox" name="serverList[]" value="3" id="checkbox-3">
172.16.115.31
</label>
<br>
<label for="checkbox-4">
<input type="checkbox" name="serverList[]" value="4" id="checkbox-4">
172.16.115.41
</label>
<br><br>
<input type="submit" onclick="submitForm('serverList[]');" value="Doorgaan">
<input type="button" onclick="setCheckboxes('serverList[]', true);" value="Selecteer alles">
<input type="reset" value="Deselecteer alles">
</form>
Hope it helps :)