HtmlService Form - Dynamic DropdownList - javascript

I have a HtmlService Form that takes data from user.
There are multiple dropdownlist in the form.
Is it possible to eliminate a selection from subsequent dropdownlist, if user has already selected it in the first dropdownlist? Will google.script.run be able to do that?

What you are looking for can be done with JavaScript right on the webpage, there is no need to make any calls back to the server with google.script.run. Here is an example JSfiddle of where you can click on a dropdown list and show a new portion of a site using JQuery: https://jsfiddle.net/rorfw6mb/1/
This should show you a basic way in which you can show different elements on the page based on the users selection.
var optionsTemplates = {
'Option 1': '<span>Option 1 selected</span>',
'Option 2': '<span>Option 2 selected</span>',
'Option 3': '<span>Option 3 selected</span>',
'Option 4': '<span>Option 4 selected</span>'
};
$('select').on('change', function(){
let value = $(this).val();
console.log(value);
if(value !== ''){
$('#option-container').removeClass('hidden');
$('#option-container').html(optionsTemplates[value]);
} else {
$('#option-container').addClass('hidden');
}
})
#option-container.hidden {
display: none;
}
#option-container {
margin: 5px;
border: 2px solid blue;
width: auto;
display:inline;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option></option>
<option value="Option 1">Option 1</option>
<option value="Option 2">Option 2</option>
<option value="Option 3">Option 3</option>
<option value="Option 4">Option 4</option>
</select>
<div id="option-container" class="hidden">
</div>

Related

Find empty select boxes

I am trying to use jQuery to locate empty form fields on the page.
For input text fields, I can use
input[value='']
For textarea fields, I can use
textarea:empty
What is the selector for finding select boxes whose selected option has an empty value?
Even though jQuery allows the selected option value to be retrieved with .val() the following does not work as a selector.
select[value='']
You can select all select boxes whose selected option has an empty value:
$('select option:selected[value=""]')
And you may also check if selected option has an empty value:
$('select option:selected').val() === ""
Demo:
$(function() {
console.log('The option with text "' + $('select option[value=""]').text() + '" has no value.');
$('select').change(function() {
if ($('select option:selected').val() === "") { // or $(this).val() === ""
console.log('This option has no value.');
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>
<option value="value1">Option 1</option>
<option value="value2">Option 2</option>
<option value="value3">Option 3</option>
<option value="">Option 4</option>
</select>
Edit:
Focus example:
$(function() {
$('.check').each(function() {
if (!$(this).val()) {
$(this).focus();
return false;
}
});
});
.check {
display: block;
margin-bottom: 15px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<input type="text" class="check" value="John Doe">
<select class="check">
<option value="value1">Opiton 1</option>
<option value="value2">Opiton 2</option>
<option value="value3">Opiton 3</option>
<option value="" selected>Opiton 4</option>
</select>
<textarea class="check" rows="4">The cat was playing in the garden</textarea>
</form>
Generic selector is probably not the best thing to use. I would select all the form elements and loop over them looking for the first one without a value
$(":input").each(function () {
if (!this.value) {
this.focus()
return false
}
})
You may need to add a check for checkboxes or radio buttons if you have those in your form.

popup to display selected options using javascript or ajax

i have a HTML code in which user can select multiple options. As the user is selcting options, the selected options should be displayed in either a popup using ajax or a div...I have already tried using selectbox with checkbox but that doesn't work and it became difficult to fetch parameters for further usage in perl cgi script. There is no code available for this..What is the easy way to get the selected options in a popup? i want the options to be displayed in the popup as they are getting selected.
HTML code:
<td>Server Name <font color = red>*</font></td>
<td>
<span title="Press the 'ctrl' key to select multiple servers">
<select name="serverlist" id="slist" size="4" multiple>
<option value="" disabled selected>Select servers</option>
<option>Server 1</option>
<option>Server 2</option>
<option>Server 3</option>
<option>Server 4</option>
<option>Server 5</option>
</select>
</span>
</td>
You can easily get the selected options.
You need to add onchange event first, and loop the options and get the selected values. Something like this:
<td>Server Name
<font color = red>*</font>
</td>
<td>
<span title="Press the 'ctrl' key to select multiple servers">
<select name="serverlist" id="slist" onChange="getSelectedServers()" size="4" multiple>
<option value="" disabled selected>Select servers</option>
<option>Server 1</option>
<option>Server 2</option>
<option>Server 3</option>
<option>Server 4</option>
<option>Server 5</option>
</select>
</span>
</td>
<div id="displaySelectedServers">
</div>
<script>
function getSelectedServers() {
var e = document.getElementById("slist");
var serversList = '';
for(var i = 0; i < e.options.length; i++) {
if (e.options[i].selected) {
serversList += '| ' + e.options[i].value + ' |';
}
}
document.getElementById("displaySelectedServers").innerHTML = serversList;
}
</script>
I hope my answer was helpful :)
Additional html for pop up div:
<div id=popUp>
</div>
addition CSS for popUp div:
#popUp{
display: none; // required if div is to "pop up" on change.
border: 1px solid black; // optional, put it here to give an idea on how to approach working with this div.
border-radius:4px; // optional
width:200px; // optional
min-height: 100px; // optional
}
#popUp>p{
display: inline-block; // optional
margin: 5px; // optional
}
and the jQuery to listen to changes in the select element iterate through the options to review which are selected and display the text content of those also in the pop up div:
$("select#slist").change(function(){ // Listen to <select> changes
$("div#popUp").show().empty(); // Make sure popUp is shown and cleared of contents.
$(this).find("option").each(function(index, value){ // Find options, iterate through them
if($(value).prop("selected")){ // check if option is selected
$("div#popUp").append(`<p>${$(value).text()}</p>`) // append option text content to popUp
}
});
});

load html content with default dropdown selection value

I am trying to load html page, based on dropdown selection. It works fine when selections are made. But want to load default page with default dropdown selection. Here is my code. Please help.
<!DOCTYPE html>
<html>
<head>
<style>
iframe {
display: block; /* iframes are inline by default */
background: #000;
border: none; /* Reset default border */
height: 100vh; /* Viewport-relative units */
width: 100vw;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js">
function showSelected(sel) {
locations = ["",
"/default.asp",
"test2.html",
"//example.com"
];
srcLocation = locations[sel.selectedIndex];
if (srcLocation != undefined && srcLocation != "") {
document.getElementById('content').innerHTML = '<iframe src="' + srcLocation +
'" width="100%" height="100%" frameborder="no" scrolling="auto"></iframe>';
//document.getElementById('content').innerHTML = "<br>Page Doesn't exists<br>";
}
}
$(function() {
$("select#page_selected").val("default.asp").change();
});
</script>
</head>
<body>
<select id="page_selected" onchange="showSelected(this);" onload="showSelected(this);">
<option value="">select an option...</option>
<option value="default.asp">Page 1</option>
<option value="test2.html">Page 2</option>
<option value="Page3.html">Page 3</option>
</select>
<div id="content"></div>
</body>
</html>
Something similar to below should do the work.
<select onchange="showSelected(this);" onload="showSelected(this);">
<option value="">select an option...</option>
<option value="default.asp" selected="selected">Page 1</option>
<option value="test2.html">Page 2</option>
<option value="Page3.html">Page 3</option>
</select>
Well HTML have an attribute for this, you can simply use selected attribute in your wanted option:
<select onchange="showSelected(this);">
<option value="">select an option...</option>
<option selected value="default.asp">Page 1</option>
<option value="test2.html">Page 2</option>
<option value="Page3.html">Page 3</option>
</select>
Your select does not have a page_selected id. Also there's a typo in default.asp
Without select id your code would have to be:
$(document).ready(function() {
$("select option").filter(function() {
return $(this).val() == "default.asp";
}).prop('selected', true);
//showSelected();
});
You could also use something like:
$(document).ready(function() {
$("select option[value='default.asp']").prop('selected', "selected");
//showSelected();
});
EDIT: to call the showSelected() after that, you'll need to pass in the $("select") object, but you could also just trigger the change event:
$("select").trigger("change");
Of course you'd want to add an id to your selectors!
EDIT: and you're not getting any errors in your console? For instance an error saying showSelected is not defined.
Here's a working fiddle: https://jsfiddle.net/oc8xcyce/
Even shorter: set the select value: https://jsfiddle.net/oc8xcyce/1/

Enabling/Disabling Select Boxes based on options chosen

I'm trying to enable/disable 2 select boxes based on selections made on a third box (controller) using jQuery.
What I'm trying to achieve is that when the user selects any of the first 2 options on the controller Selection box 2 will enable, when the user selects any of the last 2 options it will disable selection box 2 and enable selection box 3. If the user goes back on their selection this should enable once again selection box 2 and disable selection box 3, however it doesn't.
My code runs perfectly on the first iteration, but if the user comes back both boxes remain disabled no matter what his choice is.
Here's the snippet
$(function() { //document ready
$('#mySelect').change(function() {
if ($('#mySelect :selected').data('type') <= 2 ) { // if user selects the first 2 items
if ( $('#mySelect2 :selected').text() == "Disabled") { //if selection 2 text is Disabled
$('#mySelect2 :selected').text('Select Option'); // replace text with Select Option
$('#mySelect2').removeAttr('disabled'); //remove disabled attribute from select box
};
$('#mySelect').change(function() {
if ( $('#mySelect :selected').data('type') > 2) {
$('#mySelect2').prop('selectedIndex', 0);
$('#mySelect2').attr('disabled', true);
};
});
//$('#mySelect').change(function() { //
// $('#mySelect3').prop('selectedIndex', 0);
// $('#mySelect3').attr('disabled', 'disabled');
// });
}
else if ($('#mySelect :selected').data('type') > 2 ) {
if ( $('#mySelect3 :selected').text() == "Disabled") { // if text on select 3 is "Disabled"
$('#mySelect3 :selected').text('Select Option'); // changes value for text on first option of 3rd box
$('#mySelect3').removeAttr('disabled'); // removes disabled on 3rd checkbox
};
$('#mySelect').change(function() {
if ( $('#mySelect :selected').data('type') <= 2) {
$('#mySelect3').prop('selectedIndex', 0);
$('#mySelect3').attr('disabled', true);
};
});
// $('#mySelect').change(function() {
// $('#mySelect2').prop('selectedIndex', 0);
// $('#myselect3').attr('disabled', 'disabled');
};
});
});
body {
padding: 20px;
background-color: #efefef;
}
div.container {
background-color: #fff;
display:flex;
}
div.result {
margin-top: 20px;
background-color: #ddd;
min-height: 40px;
}
.result > p {
color: red;
}
select {
min-width: 100px;
margin: 20px 10px;
border: 1px solid #074481
}
select option {
line-height: 30px;
color: blue;
font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
<select name="mySelect" id="mySelect">
<option value="0" data-type="0" disabled selected>Please Select Option</option>
<option value="1" data-type="1">option 1</option>
<option value="2" data-type="2">option 2</option>
<option value="3" data-type="3">option 3</option>
<option value="4" data-type="4">option 4</option>
</select>
<select name="mySelect2" id="mySelect2" disabled>
<option value="0" data-type="0" disabled selected>Disabled</option>
<option value="1" data-type="1">option 1</option>
<option value="2" data-type="2">option 2</option>
<option value="3" data-type="3">option 3</option>
<option value="4" data-type="4">option 4</option>
</select>
<select name="mySelect3" id="mySelect3" disabled>
<option value="0" data-type="0" disabled selected>Disabled</option>
<option value="1" data-type="1">Yes</option>
<option value="2" data-type="2">No</option>
</select>
</div>
and here's the fiddle:
https://jsfiddle.net/rodcunha/cu07yfzv/12/
Thank you in advance for your help. I'm sure it is probably something really basic but I'm only starting out JS/jQ development and can't for the life of me figure it out.
There are some issues in your code.
The first is: you cannot attach an event handler each time you enter the same function:
$('#mySelect').change(function() {
Second point is: reduce complexity and make your code more readable. Avoid:
else if ($('#mySelect :selected').data('type') > 2 ) {
Another point is to avoid to repeat lines of code like in:
$('#mySelect3').prop('selectedIndex', 0);
$('#mySelect3').prop('disabled', true);
$('#mySelect3').text('Disabled');
You can chain:
$('#mySelect3').prop({selectedIndex: 0, disabled: true}).find(':selected').text("Disabled");
The snippet:
$(function() { //document ready
$('#mySelect').change(function() {
if ($('#mySelect :selected').data('type') <= 2 ) { // if user selects the first 2 items
if ( $('#mySelect2 :selected').text() == "Disabled") { //if selection 2 text is Disabled
$('#mySelect2 :selected').text('Select Option'); // replace text with Select Option
$('#mySelect2').removeAttr('disabled'); //remove disabled attribute from select box
};
$('#mySelect3').prop({selectedIndex: 0, disabled: true}).find(':selected').text("Disabled");
} else {
if ( $('#mySelect3 :selected').text() == "Disabled") { // if text on select 3 is "Disabled"
$('#mySelect3 :selected').text('Select Option'); // changes value for text on first option of 3rd box
$('#mySelect3').removeAttr('disabled'); // removes disabled on 3rd checkbox
};
$('#mySelect2').prop({selectedIndex: 0, disabled: true}).find(':selected').text("Disabled");
};
});
});
body {
padding: 20px;
background-color: #efefef;
}
div.container {
background-color: #fff;
display:flex;
}
div.result {
margin-top: 20px;
background-color: #ddd;
min-height: 40px;
}
.result > p {
color: red;
}
select {
min-width: 100px;
margin: 20px 10px;
border: 1px solid #074481
}
select option {
line-height: 30px;
color: blue;
font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<select name="mySelect" id="mySelect">
<option value="0" data-type="0" disabled selected>Please Select Option</option>
<option value="1" data-type="1">option 1</option>
<option value="2" data-type="2">option 2</option>
<option value="3" data-type="3">option 3</option>
<option value="4" data-type="4">option 4</option>
</select>
<select name="mySelect2" id="mySelect2" disabled>
<option value="0" data-type="0" disabled selected>Disabled</option>
<option value="1" data-type="1">option 1</option>
<option value="2" data-type="2">option 2</option>
<option value="3" data-type="3">option 3</option>
<option value="4" data-type="4">option 4</option>
</select>
<select name="mySelect3" id="mySelect3" disabled>
<option value="0" data-type="0" disabled selected>Disabled</option>
<option value="1" data-type="1">Yes</option>
<option value="2" data-type="2">No</option>
</select>
</div>
Try this:
$(function() { //document ready
$('#mySelect').change(function() {
if ($('#mySelect :selected').data('type') <= 2 ) { // if user selects the first 2 items
$('#mySelect2').prop('disabled', false);
$('#mySelect3').prop('disabled', 'disabled');
}
else if($('#mySelect :selected').data('type') > 2 ){
$('#mySelect3').prop('disabled', false);
$('#mySelect2').prop('disabled', 'disabled');
}
else{
$('#mySelect2').prop('disabled', 'disabled');
$('#mySelect3').prop('disabled', 'disabled');
}
});
});
You can add an onChange event for selectors and tie them to their own functions which will make things much easier and cleaner. So it would be something like:
<select onchange='myFunction()'>
<option value="0" data-type="0" disabled selected>Please Select Option</option>
<option value="1" data-type="1">option 1</option>
<option value="2" data-type="2">option 2</option>
<option value="3" data-type="3">option 3</option>
<option value="4" data-type="4">option 4</option>
</select>

A Placeholder for the `select` tag?

I'm wondering how to achieve the placeholder effect with the select tag, it would be really nice to have the default selected option something like "Please Chose an Option:".
I have tried some variations and they are not working so far and I'm sure that it can be achieved cause i seen it somewhere (can't remember where).
I have tried this:
1)
<fieldset>
<select data-placeholder="Please select a product" id="s1" class="global">
<option value="Some">Some</option>
<option value="Slower">Slower</option>
<option value="Slow">Slow</option>
<option value="Fast">Fast</option>
<option value="Faster">Faster</option>
</select>
</fieldset>
2)
<fieldset>
<select id="s1" class="global">
<option data-placeholder="true" value="Some">Some</option>
<option value="Slower">Slower</option>
<option value="Slow">Slow</option>
<option value="Fast">Fast</option>
<option value="Faster">Faster</option>
</select>
</fieldset>
Both are not working, maybe there is a jQuery method to make that?
Quick edit: I DON'T want to just disable one of the options and make it selected because it will still be showed in the drop-down list with the other items.
Here's two types of placeholder, re-selectable and hidden:
Demo: http://jsfiddle.net/lachlan/FuNmc/
Re-selectable placeholder:
<select>
<option value="" selected>Please select</option>
<option value="1">Item 1</option>
<option value="2">Item 2</option>
<option value="3">Item 3</option>
</select>
Hidden placeholder:
<select class="empty">
<option value="" selected disabled>Please select</option>
<option value="1">Item 1</option>
<option value="2">Item 2</option>
<option value="3">Item 3</option>
</select>
CSS to change the colour of the first item:
select option { color: black; }
select option:first-child { color: grey; }
select.empty { color: grey; }
/* Hidden placeholder */
select option[disabled]:first-child { display: none; }
And a little jQuery to toggle the font-color after selection:
// Applies to all select boxes that have no value for their first option
$("select:has(option[value=]:first-child)").on('change', function() {
$(this).toggleClass("empty", $.inArray($(this).val(), ['', null]) >= 0);
}).trigger('change');
Inspiration:
https://stackoverflow.com/a/5805194/1196148 - re-selectable placeholder
https://stackoverflow.com/a/8442831/1196148 - hidden placeholder
I've built a simple demo by following #Truth suggestion: http://jsfiddle.net/6QnXF/
(function($){
$('#myAwesomeSelect').change(function(){
if( !$(this).data('removedPlaceHolder'))
{
$(this).find('option:first').remove();
$(this).data('removedPlaceHolder', true);
}
});
})(jQuery);
I hope it works for you.
As far as I know, there's no way doing it with HTML alone (though that would be nice.)
You can fake it with a selected option (I know you don't want it, but it's probably the only way). Once another option is selected, you can remove it.
Here's a working example of what I describe.
My guess is that you're going to have to construct your own workaround for a select box. Something like a series of divs that act as options which when clicked are shown and have their value inserted into a hidden input field.

Categories