How would I set filter_branch=true and filter_branch_val=sony via $_GET when an option is selected?
<select name="filter_brand">
<option>Sony</option>
<option>LG</option>
</select>
So I have something like http://mypage.com/index.php?filter_branch=true&filter_branch_val=sony to be used for sql query filter.
If java script function will work for you . please try this code
HTML
<select name="filter_brand" onchange="sendFilter(this.value)">
<option>Sony</option>
<option>Lg</option>
<option>Samsung</option>
</select>
Javscript
<script type="text/javascript">
function sendFilter(vaa)
{
console.log(vaa);
window.location.href = 'product.php?
filter_branch_val='+vaa+'&filter_branch=true';
}
</script>
You can use jQuery for this. I have tested it and it is working.
Add this:
<head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> </head>
HTML
<select id="myselect" name="filter_brand" onchange="javascript:goToURL()">
<option>No selection *</option>
<option>Sony</option>
<option>LG</option>
</select>
SCRIPT
<script>
function goToURL(url){
var option = $( "#myselect option:selected" ).text();
var yoururl = "http://www.example.com/";
var url = yoururl+ "?page="+ option;
window.location.replace(url);
}
</script>
Try this and come back to me.
I used This and This as reference.
Related
e.g. buttons..
<body disabled>
does not work
Thank you
The following script will select all descendants of your form element. You can use any selector to get the desired set of elements and apply this script to disable them all.
<script >
var form_elem=document.querySelectorAll("form *");
for(var i of form_elem){
i.setAttribute("disabled", true);
}
</script>
I would use javascript:
<script language='Javascript'>
document.getElementById("this_is_the_submitbutton").disabled = true;
</script>
Your submitbutton needs to have have the id='this_is_the_submitbutton'
I have a dropdown menu in an html page. What I do not know how to code is how to save the menu option the user chooses, so that it can be moved into the gs file.
I have looked through the SO site for the code, but all I seem to find are answers involving javascript, php, etc. (Change Link with HTML Dropdown and Fill HTML dropdown box with external JSON file data for instance).
The test code I am trying to build is below:
html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<select id="Instrument">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<!--Need code here to save the option chosen above and code that
allows for the option chosen to be moved to the gs side of this.-->
</body>
</html>
I expect to be able to "save" the option and pass it to the Google script so it can be further manipulated there.
For instance, were I dealing simply with input fields, rather than data from a dropdown, I would write something like this:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<input id="idNewSongTitle" type="text" placeholder="Song Title"><br><br>
<input id="idNewSongWriters" type="text" placeholder="Song Writers">*<br><br>
<button onclick="saveUserInput()">Create New Lyric Doc</button></center><br><br>
<script>
window.saveUserInput = function() {
var docName = document.getElementById('idNewSongTitle').value;
var songTitle = document.getElementById('idNewSongTitle').value;
var songWriters = document.getElementById('idNewSongWriters').value;
console.log('songTitle: ' + songTitle)
google.script.run
.withSuccessHandler(openNewDoc)
.createNewLandscapeLyric({docName:docName,songTitle:songTitle, songWriters: songWriters})
}
function openNewDoc(results){
window.open(results.url, '_blank').focus();
}
</script>
</body>
</html>
Update
OK. Thank you #TheMaster. Now we're cookin'!
I used your 2nd suggestion and put it into a real world version I am working with as follows:
html
<!DOCTYPE html>
<html>
<head>
<base target="_top" />
</head>
<body>
<select id="InstrNum" name="Instrument Number">
<option>1</option>
<option>2</option>
<option>3</option>
</select><br><br>
<button onclick="saveUserInput()">Continue</button><br><br>
<script>
window.saveUserInput = function() {
var instrNum = document.getElementById('InstrNum').value;
console.log('instrNum: ' + instrNum)
google.script.run
.withSuccessHandler(openCatalog)
.insertInfo({instrNum:instrNum})
function openCatalog(results){
window.open(results.url, '_blank').focus();
}
}
</script>
</body>
</html>
gs
function onCheck(e) {
var ss = SpreadsheetApp.getActiveSpreadsheet();
var sheet = ss.getActiveSheet();
var cell= sheet.getActiveCell().getColumn();
var col = ss.getRange('Perform').getColumn();
if (cell == col){
var html = HtmlService.createHtmlOutputFromFile('index')
.setWidth(400)
.setHeight(300);
SpreadsheetApp.getUi()
.showModalDialog(html, 'Performance Information');
}
}
function insertInfo(objArgs){
var instrNum = objArgs.instrNum;
var ss = SpreadsheetApp.getActiveSpreadsheet();
var sheet = ss.getActiveSheet();
var cell= sheet.getActiveCell();
var oneCellRight = cell.offset(0, 1)
oneCellRight.setValue(instrNum);
}
It does exactly what I expected, except for two issues. (I.e., when I look at the SS, the value from the dropdown menu choice has been entered into the target cell.)
The two things not happening which I need to happen are:
The dialog box does not close when I click the "Continue" button.
The Catalog SS is not opened.
Any ideas on that?
Update 2
As #TheMaster notes, my questions immediately above are unrelated. I took a look at some similar code I have and realized I forgot the return statement. So, I added it as below and it solved one issue: opened up a new Catalog SS. However, it did not (and apparently one cannot) close the dialog, nor the original open Catalog SS page.
Revised gs
function insertInfo(objArgs){
var instrNum = objArgs.instrNum;
var ss = SpreadsheetApp.getActiveSpreadsheet();
var url = ss.getUrl()
Logger.log(url)
var sheet = ss.getActiveSheet();
var cell= sheet.getActiveCell();
var oneCellRight = cell.offset(0, 1)
oneCellRight.setValue(instrNum);
return {
url: url
};
That concludes this broadcast.
Script Logic:
change event is fired every time the option is changed and committed in select. You can use that to send data to server.
Alternatively, You can use your saveUserInput function to get the select's value. If you want to enforce some sort of data validation, use <form> instead.
Snippet:
<!DOCTYPE html>
<html>
<head>
<base target="_top" />
</head>
<body>
<select id="Instrument" name="InstrumentSelect">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<!--Code to save the option chosen above and code that
allows for the option chosen to be moved to the gs side of this.-->
<script>
handleOptionChange = function(e) {
console.info(e.target.value);
google.script.run.optionChanged(e.target.value);
};
document
.getElementById('Instrument')
.addEventListener('change', handleOptionChange);
</script>
</body>
</html>
OR
var instrument = document.getElementById('Instrument').value;
Maybe this question already asked but that not solve my problem.
This is my query in input box i want to show only years like this
Thanks in advance
Note: Already this qustions asked but it not solve my issue
How to Resolve input year only <input date="year">
You can use this snippet.
PHP Version:
<select class="form-control" name="startyear">
<?php
for ($year = (int)date('Y'); 1900 <= $year; $year--): ?>
<option value="<?=$year;?>"><?=$year;?></option>
<?php endfor; ?>
</select>
JavaScript Version:
<select name="yearpicker" id="yearpicker"></select>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
let startYear = 1800;
let endYear = new Date().getFullYear();
for (i = endYear; i > startYear; i--)
{
$('#yearpicker').append($('<option />').val(i).html(i));
}
</script>
Please try select and show year only. And guide is here
I would like to make a small correction to Rhalp's answer for efficiency sake. Don't initialize the object 219 times. In general it's much less work on the browser engine if you get the member before you loop over it.
<select name="yearpicker" id="yearpicker"></select>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script type="text/javascript">
let startYear = 1800;
let endYear = new Date().getFullYear();
for (i = endYear; i > startYear; i--)
{
$('#yearpicker').append($('<option />').val(i).html(i));
}
</script>
I have disabled button in a.html and some xyz button in b.html.
When the xyz button in b.html is clicked then the disabled button in a.html should get enabled.
I have been trying this for two days but am not getting anywhere. Can you help me?
If it's just plain html pages, you can use jQuery/ JavaScript to do this. Here is a simple example:
a.html:
<body>
<input id="aButton" type="button" value="A Button">
<script type="text/javascript">
$(document).ready(function() {
var enableAButton=getUrlParameter("enable");
if(enableAButton == "true"){
$('#aButton').prop('disabled', false);
}else{
$('#aButton').prop('disabled', true);//disabled by default
}
});
function getUrlParameter(sParam)
{
var sPageURL = window.location.search.substring(1);
var sURLVariables = sPageURL.split('&');
for (var i = 0; i < sURLVariables.length; i++)
{
var sParameterName = sURLVariables[i].split('=');
if (sParameterName[0] == sParam)
{
return sParameterName[1];
}
}
}
</script>
</body>
b.html:
<body>
<input id="bButton" type="button" value="B Button">
<script type="text/javascript">
$("#bButton").click(function(){
window.location.href="a.html?enable=true"
});
</script>
</body>
If both are different files without any relation you cant disable it directly. instead you can maintain a flag variable in the database of the student to track the info . enable and dis-able based on its value.
Could someone please give me a clue as to why the following code does not work under MSIE?
<html>
<body>
<select id="si">
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
</select>
<script type="text/javascript">
var e=document.getElementById("si");
e.size=3;
e[0].style.display="none"; // <-------- no effect
</script>
</body>
</html>
IE doesn't allow you to manipulate option elements directly. In my experience, you need to remove all of the option elements from the select and repopulate them with whatever changes you want to make already applied (in this case, one element removed).
For anyone having to deal with hiding option elements in those versions affected, I posted a workaround here which doesn't clone or remove the options but wraps spans around them, which is arguably much easier to deal with:
http://work.arounds.org/issue/96/option-elements-do-not-hide-in-IE/
This seems to work ok under MSIE, with hopefully no "side effects", if you find something wrong please let me know it, thanks.
<html>
<body>
<select id="si">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<script type="text/javascript">
var e=document.getElementById("si");
e.size=3;
var a = new Array();
var n = new Array();
var x = 2;
if(!a.length)for(var i=0,m=e.length;i<m;i++) {
a.push(e[i].value);
}
while(e.firstChild)
e.removeChild(e.firstChild);
for(var i=0,m=a.length;i<m;i++) {
if(x==a[i]) {
e.add(new Option(a[i],a[i]));
}
}
</script>
</body>
</html>