I'm trying to modify several selectboxes using the following code in a custom.js file. Each ID is in different pages and the code that I'm using in footer.php is the following:
<script>
var selectFunction = function() {
document.getElementById('ofae').options[0].text = 'Artists';
};
var selectFunctionn = function() {
document.getElementById('ofav').options[0].text = 'Artists';
};
</script>
Then:
<?php
// without if statement
echo '<script type="text/javascript"> $(function(){ selectFunction();selectFunctionn(); }); </script>';
?>
The problem is that only one of them get executed, when I'm in page 2 and the first value is NULL it doesn't execute the rest of the code.
A test file test.php with the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test php echo script</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
<select id="ofav">
<option value="">o1</option>
<option value="">o2</option>
<option value="">o3</option>
<option value="">o4</option>
<option value="">o5</option>
</select>
<select id="ofae">
<option value="">o1</option>
<option value="">o2</option>
<option value="">o3</option>
<option value="">o4</option>
<option value="">o5</option>
</select>
<script>
var selectFunction = function() {
document.getElementById('ofav').options[0].text = 'Artists';
document.getElementById('ofae').options[0].text = 'Artists';
}
</script>
<?php
// without if statement
echo '<script type="text/javascript"> $(function(){ selectFunction(); }); </script>';
?>
</body>
</html>
works fine!
Check:
if there are no typing errors
if PHP if statement is correct
if there are two <select> blocks
...
modify your function like this and it will work
var selectFunction = function() {
if(document.getElementById('ofae') != null){
document.getElementById('ofae').options[0].text = 'Artists';
}
else if(document.getElementById('ofav') != null){
document.getElementById('ofav').options[0].text = 'Artists';
}
};
I hope this will solve your problem
Related
I am trying to change the value of a specific cell in Google Sheets based on a users selection from a dropdown menu. Also, might be worth mentioning that this dropdown menu is inside an HTML table generated from Sheets data. Everything works except for this one little thing. Help would be greatly appreciated!
HTML Snippet:
<select id="status" name="status">
<option value="current" id="current"><?= tableData[i][j] ?></option>
<option value="submitted" id="submitted">Submitted</option>
</select>
<script>
let select = document.querySelector('#status');
select.addEventListener('change', update(i, j));
</script>
Code.gs function:
var rfi= SpreadsheetApp.openById("REDACTED");
var sheet = rfi.getSheetByName('Sheet1');
function update(i, j) {
sheet.getRange(i, j).setValue("In Review");
}
If you want to pass coordinates, try
in html
<option value="<?=(i+1)+'|'+(j+1)?>" id="current"><?= tableData[i][j] ?></option>
in gs
function update(coord) {
sheet.getRange(coord.split('|')[0], coord.split('|')[1]).setValue("In Review");
}
will be finalized after your spreadsheet is published
sample
For instance, this works and shows how to transfer coordinates
html
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<script>
<? var data = listOfItems(); ?>
</script>
<select id="choice" name="choice">
<option value="" disabled selected >Choose ...</option>
<? for (var i = 0; i < data.length; i++) { ?>
<? for (var j = 0; j < data[0].length; j++) { ?>
<option value="<?=(i+1)+'|'+(j+1)?>" ><?=data[i][j]?></option>
<? } ?>
<? } ?>
</select>
<script>
$('#choice').change(function(){
google.script.run.update ($(this).val());
});
</script>
</body>
gs
function load() {
var ui = HtmlService.createTemplateFromFile('load')
.evaluate()
.setSandboxMode(HtmlService.SandboxMode.IFRAME)
.setTitle("test ...");
SpreadsheetApp.getUi().showSidebar(ui);
}
var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('mySheet')
function listOfItems() {
return sheet.getDataRange().getValues()
};
function update(coord){
sheet.getRange(coord.split('|')[0], coord.split('|')[1]).setValue("In Review");
}
I can't undertand what are I am missing to fire my "change" event in a combobox.
I tried some different options I found in some post, but noone works, so, I think I'm missing something
My html:
<!DOCTYPE html>
<html class="no-js" lang="es">
<script src="../Scripts/jquery-1.10.2.js"></script>
<script src="../Scripts/jquery-ui-1.10.js"></script>
<script src="../Scripts/jquery.validate.js"></script>
<script src="../Scripts/jquery.easyui.min.js"></script>
<body>
<select class="myCombobox" id="myId">
<option value="A">Opt A</option>
<option value="B">Opt B</option>
</select>
<script>
myJs.init();
</script>
</body>
</html>
My js:
var myJS = (function() {
var module = {};
module.initCombo = function(){
$('.myCombobox').combobox( {
change: function( event, ui ) {
console.log(ui);
var selected_value = ui.item.value;
alert("You selected : "+selected_value);
}
});
};
module.init = function() {
module.initCombo();
};
return {
init: module.init
};
})();
Why is the cange event not launched?
I need to pass the dropdown selected value to the jQuery plugin.
HTML:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.requiredplugin.js"></script>
</head>
<body>
<select name="Type" id="sid">
<option value="value1">value1</option>
<option value="value2" selected>value2</option>
<option value="value3">value3</option>
</select>
<textarea name="source" id="src1" cols="150" rows="20"></textarea>
<script type="text/javascript">
$("#src1").keyup(function(e) {
$(this).pluginmethod(e.keycode);
});
</script>
</body>
</html>
jquery.requiredplugin.js:
(function ($) {
// jQuery plugin definition
$.fn.pluginmethod = function (keycode) {
return this.each(function () {
var $str = $('#src1');
var $soml = $('#sid');
var somlan = $soml.val(); //if I assign var somlan with some static value my code works
var som = $str.val();
/* My code goes here where I use both var som and var somlan*/
});
};
})(jQuery);
I am able to get the value of $('#src1') and if assign var somlan with some static value then my code works. But if I want to use dropdown selected value(whose id is "sid" ) and retrieve the value in the plugin as var $soml = $('#sid'); then my code doesn't work.
How can I use dropdown selected value in my plugin?
Try this : modify your plugin method with two argument instead of one and pass value of select box as second argument.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.requiredplugin.js"></script>
</head>
<body>
<select name="Type" id="sid">
<option value="value1">value1</option>
<option value="value2" selected>value2</option>
<option value="value3">value3</option>
</select>
<textarea name="source" id="src1" cols="150" rows="20"></textarea>
<script type="text/javascript">
$("#src1").keyup(function(e) {
$(this).pluginmethod(e.keycode,$('#sid').val());
});
</script>
</body>
</html>
Plugin
(function($) {
// jQuery plugin definition
$.fn.pluginmethod = function(keycode, selectVal) {
return this.each(function() {
var $str = $('#src1');
//var $soml = $('#sid');
var somlan= selectVal;
var som= $str.val();
/* My code goes here where I use both var som and var somlan*/
});
};
})(jQuery);
try it like this in your jquery.requiredplugin.js
(function($) {
$.fn.pluginmethod = function(keycode) {
return this.each(function() {
var $str = $('#src1');
var $soml = $('#sid option:selected').text();
var somlan= $soml.val();
var som= $str.val();
/* Your code goes here where you use both var som and var somlan*/
});
};
})(jQuery);
Hope this helps.
You should try :
$("#sid option:selected").text();
or
$("#sid option").is("selected").text()
It looks like sormeone already asked a similar question at jQuery Get Selected Option From Dropdown
This will return an object if i'm right
var sid = $('#sid').find(":selected");
I'm trying to learn JavaScript but I've gotten stuck.
Here's a JSFiddle demonstrating the code below.
The problem here is that I want a function or something to calculate the total, but I do not know how to pick up the variable from inside the if-statement.
Is there any way to do this? Thanks in advance!
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
function funky(){
var mengde = document.getElementById("options").value;
var valgt = document.getElementById("fruit").value;
if(valgt == "banan") {
mengde*=10;
document.getElementById("totalt1").innerHTML = mengde;
}
if(valgt == "eple") {
mengde*=20;
document.getElementById("totalt2").innerHTML = mengde;
}
if(valgt == "melon") {
mengde*=30;
document.getElementById("totalt3").innerHTML = mengde;
}
if(valgt == "appelsin") {
mengde*=40;
document.getElementById("totalt4").innerHTML = mengde;
}
}
</script>
</head>
<body>
<input id="options" type="text"></input>
<select id="fruit">
<option>Velg Frukt!</option>
<option value="banan">Banan</option>
<option value="eple">Eple</option>
<option value="melon">Melon</option>
<option value="appelsin">Appelsin</option>
<option value="totis">Totalt</option>
</select>
<button onclick="funky()">Submit!</button>
<p id="totalt1"></p>
<p id="totalt2"></p>
<p id="totalt3"></p>
<p id="totalt4"></p>
</body>
</html>
If I understand correctly, you're looking for something like this (although not the nicest javascript I'm trying to keep it similar to the approach you started out with)
http://jsfiddle.net/YZBL7/
if(valgt == "banan") {
total = mengde + " banan costs " + mengde * 10;
}
//....
document.getElementById("totalt1").innerText += total + "\n";
Can any one give me a sample code that gets the selected value from an existing combo box?
I have this code but its not doing anything:
function check ()
{
var e = document.getElementById("ticket_category_clone");
var str = e.options[e.selectedIndex].text;
alert(str);
if (str==="Hardware")
{
SPICEWORKS.utils.addStyle('#ticket_c_hardware_clone{display: none !important;}');
}
}
SPICEWORKS.app.helpdesk.ready(check);
heres a img of the code
and the code
<select id="ticket_category_clone" name="ticket[category]" hdpp="ticket_category">
<option value=""></option><option value="Hardware">Hardware</option>
<option value="Software">Software</option>
<option value="Rede" selected="selected">Rede</option>
<option value="Pedidos">Pedidos</option>
<option value="Formação/Dúvida">Formação/Dúvida</option>
<option value="Outro">Outro</option><option value="#edit_categories#">Edit Categories...</option></select>
what i want its find a way to get the selected value fo that combobox
There is an unnecessary hashtag; change the code to this:
var e = document.getElementById("ticket_category_clone").value;
I use this
var e = document.getElementById('ticket_category_clone').value;
Notice that you don't need the '#' character in javascript.
function check () {
var str = document.getElementById('ticket_category_clone').value;
if (str==="Hardware")
{
SPICEWORKS.utils.addStyle('#ticket_c_hardware_clone{display: none !important;}');
}
}
SPICEWORKS.app.helpdesk.ready(check);
It probably is the # sign like tho others have mentioned because this appears to work just fine.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<select id="#ticket_category_clone">
<option value="hw">Hardware</option>
<option>fsdf</option>
<option>sfsd</option>
<option>sdfs</option>
</select>
<script type="text/javascript">
(function check() {
var e = document.getElementById("#ticket_category_clone");
var str = e.options[e.selectedIndex].text;
alert(str);
if (str === "Hardware") {
alert('Hi');
}
})();
</script>
</body>