I have a script that creates options in select and another script that should write test in console when I'm choosing electro option. But It's not working.
scripts:
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', (event) => {
function addOption() {
var optionArr = ['-', 'eletro', 'auto'];
var select = document.getElementsByName('butterbean_stm_car_manager_setting_autofilling')[0];
for(var i=0; i<optionArr.length; i++){
var opt = document.createElement('option');
opt.text = optionArr[i];
opt.value = optionArr[i];
select.add(opt);
}
}
addOption();
});
</script>
<script type="text/javascript">
let autofilling = document.getElementsByName('butterbean_stm_car_manager_setting_autofilling').value;
if(autofilling == 'eletro'){
console.log('test');
};
</script>
THERE IS NO CONSOLE ERRORS
Related
I wanted to create a form that will insert into a particular GSheet. All other fields are working (adding correctly to the GSheet file after submitting) but the dynamic drop-down list just inserts nothing even though, before submitting the form, the dynamic value is seen and able to be selected in the form.
Script:
<script>
function loadItem() {
google.script.run.withSuccessHandler(function(ar)
{
var itemSelect = document.getElementById("CATEGORY");
console.log(ar);
let option = document.createElement("option");
option.value = "";
option.text = "";
itemSelect.appendChild(option);
ar.forEach(function(item, index)
{
let option = document.createElement("option");
option.value = item[1];
option.text = item[0];
itemSelect.appendChild(option);
});
}).getList();
};
function onSelect()
{
$("#CATEGORY option:selected").value();
};
</script>
HTML for the dropdown:
<label for="CATEGORY"><strong>CATEGORY</strong></label>
<select id="CATEGORY" onchange="onSelect()" class="form-control" name="CATEGORY" required>
</select>
<script>
loadItem();
</script>
Code in Code.gs in my Google App Script for the GSheet:
function getList() {
var ss = SpreadsheetApp.getActiveSpreadsheet();
var dataSheet = ss.getSheetByName('Category');
var getLastRow = dataSheet.getLastRow();
return dataSheet.getRange(2, 2, getLastRow - 1, 2).getValues();
}
Form submit code:
function preventFormSubmit() {
var forms = document.querySelectorAll('form');
for (var i = 0; i < forms.length; i++) {
forms[i].addEventListener('submit', function (event) {
event.preventDefault();
});
}
}
window.addEventListener('load', preventFormSubmit);
function handleFormSubmit() {
var formdata = $('#myForm').serializeArray()
formdata.push({
name: 'myfile',
value: myfile
})
google.script.run.withSuccessHandler(success).processForm(formdata);
}
function success(){
document.getElementById("myForm").reset()
Swal.fire({
position: 'center',
icon: 'success',
title: 'THE FILE HAS BEEN ADDED!',
showConfirmButton: false,
timer: 3500,
})
function Redirect() {
window.location = "";
}
setTimeout(Redirect, 3000);
}
var myfile ={},file, reader = new FileReader();
reader.onloadend = function(e) {
myfile.data = e.target.result
myfile.name = file.name
console.log(myfile)
};
$('#file').change(function(){
file = $('#file')[0].files[0]
reader.readAsDataURL(file);
})
Form code in Code.gs
function processForm(formdata){
var superscript = SuperScript.initSuper(url,sh)
var formObject = {}
formdata.forEach(element => formObject[element.name] =
element.value)
var file = superscript.uploadFile(folderId,formObject.myfile.data,formObject.myfile.name)
var ss= SpreadsheetApp.openByUrl(url);
var ws=ss.getSheets()[0]
ws.appendRow([
formObject.col1,
formObject.col2,
new Date(),
formObject.TITLE,
formObject.SUBTITLE,
formObject.DESCRIPTION,
formObject.TYPE,
formObject.YEAR_RELEASED,
formObject.CATEGORY,
file.getUrl()
]);
}
try:
return $('#CATEGORY').find(":selected").val();
The reason val() doesn't do the trick is because clicking an option doesn't change the value of the dropdown--it just adds the :selected property to the selected option which is a child of the dropdown.
also your function should return something in order for the output of it to be used.
Referred this answer:
jQuery Get Selected Option From Dropdown
I have a drop down list created from an array in JavaScript. I want to do something with the selected value when I change the dropdown value.
var newArray = [3,5,4,6]
var container = document.getElementById('container')
var dropdown = creatSelectDropDown('thisDropdown', newArray)
container.appendChild(dropdown)
function creatSelectDropDown(id, array) {
var dropdown = document.createElement("select");
dropdown.id = id;
for (var i = 0; i < array.length; i++) {
var option = document.createElement("option");
option.text = array[i];
option.value = array[i];
dropdown.options.add(option);
}
return dropdown;
}
So in the above code I would either have :
option.onclick = dosomething();
Or
dropdown.onchange = dosomething(getvalueofoptiontag);
I'm obviously missing something simple here ...
Fiddle to play with : https://jsfiddle.net/reko91/hnLxt4xh/1/
Can bind a function to change with this syntax:
dropdown.onchange = function(event) {
console.log(event);
}
or using eventListener:
dropdown.addEventListener("change", function(event) {
console.log(event);
}, false);
What you are doing wrong is that you have to pass a function to the onchange event, like:
var dosomething = function() { /* do something */}
dropdown.onchange = dosomething;
I am trying to populate a dropdown list with a bunch of names that are stored in a .txt in the same directory as the HTML code. Each name is on a new line of this file and"names" is the id of the dropdown that will store the names.
Upon loading the page, the list is not populated at all. Any guidance would be awesome.
<script type = "text/javascript">
window.onload = function () {
var select = document.getElementById("names");
var textFile = "/names.txt";
jQuery.get(textFile, function(textFileData) {
var EachLineInTextFile = textFileData.responseText.split(",");
for (var i = 0, len = EachLineInTextFile.length; i < len; i++) {
var option = document.createElement('option');
option.text = option.value = EachLineInTextFile[i];
select.add(option, 0);
};
};
};
</script>
Thanks!
It looks like the major issue was that I needed a better version of jquery. Thank you everyone for your help!
<script type = "text/javascript">
window.onload = function () {
var select = document.getElementById("names");
var textFile = "/names.txt";
jQuery.get(textFile, function(textFileData) {
window.alert(textFileData);
var EachName= textFileData.split("\n");
for (var i = 0, len = EachName.length; i < len; i++) {
var option = document.createElement('option');
option.text = option.value = EachName[i];
select.add(option, 0);
};
});
};
</script>
I'm new to Javascript (but fairly proficient in php) and I'm trying to use a set of associative arrays to perform two tasks.
First: Populate a dropdown menu (this part is working)
var select = document.getElementById('FName');
var options = fNames;
for(var i = 0; i < (options.length-1); i++) {
var opt = options[i];
var el = document.createElement("option");
el.textContent = opt;
el.value = opt;
select.appendChild(el);
}
The 'fNames' variable is an array with a list of strings which I've taken from a php array. I have another array, called 'fDesc' which is indexed to match the 'fNames' array. Something like this:
var fNames = ["aName", "bName", "cName"]
var fDesc = ["aDesc", "bDesc,", "cDesc"]
They're currently separate arrays, not a single multidimensional one.
How can I make "aDesc" appear in a text box when "aName" is selected from the pulldown menu?
First of all, the for element is population less elements, you should remove the -1 of (options.length-1)
Then you need to asociate a handler event for select.onchange and use index of to retrieve the index of the array.
HTML:
<select id='FName'></select>
<input id='AName' type='text'/>
JS:
var fNames = ["aName", "bName", "cName"];
var fDesc = ["aDesc", "bDesc,", "cDesc"];
var select = document.getElementById('FName');
var options = fNames;
for(var i = 0; i < (options.length); i++) {
var opt = options[i];
var el = document.createElement("option");
el.textContent = opt;
el.value = opt;
select.appendChild(el);
}
select.onchange = function(){
var textbox = document.getElementById('AName');
textbox.value = fDesc[fNames.indexOf(select.value)];
}
JsFiddle:
http://jsfiddle.net/dBtUz/
better put aName as text and aDesc as value.
HTML
<select id='FName' onchange='fillText()'></select>
<input id='Fdesc' type='text'/>
Javascript
window.onload = function(){
var fNames = ["aName", "bName", "cName"]
var fDesc = ["aDesc", "bDesc", "cDesc"]
var select = document.getElementById('FName');
for(var i = 0; i < (fNames.length); i++) {
var el = document.createElement("option");
el.textContent = fNames[i];
el.value = fDesc[i];
select.appendChild(el);
}
select.selectedIndex = -1;
}
function fillText(){
document.getElementById('Fdesc').value = document.getElementById('FName').value;
}
You need to search the index of the selected value and then you get with that index the same position in your search array.
Updated Solution also with manual fill:
<script>
document.addEventListener('DOMContentLoaded', onDomContentLoaded);
// data
var fNames = ["aName", "bName", "cName"];
var fDesc = ["aDesc", "bDesc", "cDesc"];
function onDomContentLoaded() {
var mySelect = document.getElementById("mySelect");
fillSelect(mySelect);
mySelect.addEventListener('change', onSelectChange);
}
function fillSelect(mySelect) {
for(var i = 0; i < (fNames.length); i++) {
var opt = fNames[i];
var el = document.createElement("option");
el.textContent = opt;
el.value = opt;
mySelect.appendChild(el);
}
}
function onSelectChange(){
var selectedValue = this.options[this.selectedIndex].value;
//console.log('selected value', selectedValue);
var selectedValueIndexInArray = fNames.indexOf(selectedValue);
var fieldOutput = document.getElementById("output");
fieldOutput.innerHTML = fDesc[selectedValueIndexInArray];
}
</script>
<select id="mySelect"></select>
<div id="output"></div>
Working Example
http://jsfiddle.net/x92ka/4/
I would like to iterate over a IndexedDB objectStore, get the results and populate this select box.
This is my HTML
<tr>
<td>
<select id="opt" name="opt"></select>
</td>
</tr>
This is my JavaScript
function populateOptions() {
var options = [ "1", "2", "3", "4", "5"];
var opt = document.getElementById("opt");
for (var i = 0; i < options.length; i++) {
var option = document.createElement("option");
option.value = options[i];
var optionText = document.createTextNode(options[i]);
option.appendChild(optionText);
opt.appendChild(option);
}
}
populateOptions();
Try the following:
var dbreq = indexeddb.open("db");
dbreq.onsuccess = function (conn){
var trans = dbreq.result.transaction(["objectstore"]);
var obj = trans.objectStore("objectstore");
var cursor = obj.openCursor();
cursor.onsuccess = function (e) {
if (!cursor.result) {
var opt = document.getElementById("opt");
var option = document.createElement("option");
option.value = cursor.result.value;
var optionText = document.createTextNode(cursor.result.value);
option.appendChild(optionText);
opt.appendChild(option);
cursor["continue"]()
} else {
// cursor ended
}
}
Or use my linq2indexeddb library and do it like this:
var db = linq2indexedDB("db");
db.linq.from("objectstore").select.then(null, null, function(e){
var opt = document.getElementById("opt");
var option = document.createElement("option");
option.value = e.data;
var optionText = document.createTextNode(e.data);
option.appendChild(optionText);
opt.appendChild(option);
});
for more information about indexeddb I can reffer to my blog. Here I frequently post information about the indexedDB API.
In html :
<body onload="load()">
In javascript :
function load(){
populateOptions();
}
or shortly :
<body onload="populateOptions()">