How to get onchange to set onclick=window.open(url)? - javascript

I have an app in GAS html service with a selection box for files, and a button next to it for opening them in a new tab. I can't figure out how to get it done. The files on the list get their values in a google-drive-file-id form (assume that fileID1-3 are ok), and i have a server script for getting the whole link. Here's how it's done:
HTML:
<select id='fileBox' name='fileBox' onchange="google.script.run.withSuccessHandler(gotFileLink).getFileLinkById(this.value)">
<option value=fileID1>File1.pdf</option>
<option value=fileID2>File2.pdf</option>
<option value=fileID2>File3.pdf</option>
</select>
<input type="button" value="Open File" id="linkButton" />
Server code:
function getFileLinkById(fileID) { return DriveApp.getFileById(fileID).getUrl(); }
Client code:
function gotFileLink(url) {
document.getElementById('linkButton').onclick = // what goes here?
}
I have tried several options using "window.open" but can't figure out how to make it work.
Thanks in advance.

Here is code which can help you to open you desired link on click of the button.
Here is a working link:
JSFIDDLE
<select id='fileBox' name='fileBox'>
<option value='http://www.google.com'>File1.pdf</option>
<option value='http://www.google.com'>File2.pdf</option>
<option value='http://www.google.com'>File3.pdf</option>
</select>
<input type="button" value="Open File" id="linkButton" />
var btn = document.getElementById('linkButton');
btn.addEventListener('click',GetInfo,false);
function GetInfo(){
var e = document.getElementById("fileBox");
var selectedUrl = e.options[e.selectedIndex].value;
window.open(selectedUrl);
}

Answering my own question, but based on maxspan's solution (which was not exactly what i wanted) I was able to solve this in another way:
<select id='fileBox'>
<option value=fileID1>File1.pdf</option>
<option value=fileID2>File2.pdf</option>
<option value=fileID2>File3.pdf</option>
</select>
<input type="button" value="Open File" id="linkButton" onclick="runner.withSuccessHandler(window.open).getFileLinkById(document.getElementById('fileBox').value)" />
If anyone has a different/better answer - I still want to hear it... thanks maxspan for helping me.

Related

Is there a way to disable a dropdown to users while still being able to submit a form with the disabled dropdown?

I have a dropdown that is disabled to the user. I want for the user to be able to press a button that changes the selected item to a different one. For example: from the 4th item in the dropdown to the 7th.
I've tried disabling the dropdown, but when I do that and submit the form, I get a PHP error saying Undefined index: id.
HTML:
<form>
<select id='id' name='id' autocomplete='none' disabled required>
<option value='2'>apple</option>
<option value='6'>banana</option>
<option value='10'>orange</option>
</select>
<button type='submit'>Submit</button>
</form>
JavaScript:
const dropdown = document.getElementById('dropdown');
const options = dropdown.options;
for (let i = 0; i < options.length; ++i) {
if (options[i].value === id) {
dropdown.selectedIndex = i;
break;
}
}
PHP (This line seems to be the one breaking):
$id = $_POST['id'];
It seems you haven't defined method and action in your form tag. By default, I think, the method is set to 'GET', so when checking 'POST' you'll run into your error.
Therefore, set "method='post'" (and best also an action, e.g. "action='/yourPageName.php') and see if that helps.
I figured out a solution that suits my needs. It was kind of simple. I just enabled the dropdown when I submitted the form, and instantly disabled it again.
id.removeAttribute('disabled');
const data = new FormData(document.getElementById('form'));
id.setAttribute('disabled', '');
request.send(data);
Thanks for the help though :)
A disabled input field will be ignored when you submit the form. I would suggest creating a hidden input field of name="id" if you want the user to view the dropdown but not select it.
<form>
<select id='id' autocomplete='none' disabled required>
<option value='2'>apple</option>
<option value='6'>banana</option>
<option value='10'>orange</option>
</select>
<input type="hidden" name='id' value="6" />
<button type='submit'>Submit</button>
</form>
You can make an hidden input with the id="id" and change the select id to "temp_id". Then, since you are making the request from javascript, you can just update the hidden field before making the request.
<select id='temp_id' autocomplete='none' disabled required>
<option value='2'>apple</option>
<option value='6'>banana</option>
<option value='10>orange</option>
</select>
<input type="hidden" name="id" id="id" value="">
Then, on your javascript, just before you make the request, run the code:
document.getElementById("id").value = document.getElementById("temp_id").value;

Javascript/Jquery to go to URL from <input> and <datalist>

My problem:
I am looking to make an input box that autocompletes suggestions as I type them in. Upon typing them taking the first selection (this is already figured out in the plug-in) by either clicking or pressing enter, I'd like to submit that selection which is tied to a URL to redirect to that new URL.
Basic Example of Plug-in
This here is directly from the developer's website and an example of what is used.
<input class="form-control awesomplete" list="mylist" />
<datalist id="mylist">
<option>Ada</option>
<option>Java</option>
<option>JavaScript</option>
<option>Brainfuck</option>
<option>LOLCODE</option>
<option>Node.js</option>
<option>Ruby on Rails</option>
</datalist>
The Basic Changes
What I would use it for is to navigate a list of U.S. states. The idea here would be to redirect a new (or current window) to the URL associated with the state. Alabama going to http://www.alabama.gov, and so on.
<input class="form-control awesomplete" list="states" />
<datalist id="states">
<option>Alabama</option>
<option>Alaska</option>
<option>Arizona</option>
<option>Arkansas</option>
<option>California</option>
<option>Colorado</option>
<option>Connecticut</option>
</datalist>
I stuck here:
After going through many searches and seeing that Jquery or Javascript is required for this, I've tried to go through some solutions, but cannot quite seem to make it work. It might not even be possible. I didn't want to throw in too many examples of what I tried and clutter the post up, so I tried to leave it in its most basic form with the idea in mind.
As far as I know, I'd need to tie a URL to a value with the option tag, correct? I have examples of this in my code, but once again, I tried to leave this in its most basic form for the viewer.
You could store the URL in a value property, and then read that out when the input is made:
var aweInput = new Awesomplete(myinput);
myinput.addEventListener('awesomplete-select', function(e) {
var url = e.text.value; // The value associated with the selection
console.log('navigating to: ' + url)
// Some optional actions:
e.preventDefault(); // Prevent the URL from appearing in the input box
e.target.value = e.text.label; // Set the value to the selected label
aweInput.close(); // close the drop-down
//window.location.href = url;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/awesomplete/1.1.2/awesomplete.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/awesomplete/1.1.2/awesomplete.css" />
<input id="myinput" list="states" />
<datalist id="states">
<option value="http://www.alabama.gov/">Alabama</option>
<option value="http://alaska.gov/">Alaska</option>
<option value="https://az.gov/">Arizona</option>
<option value="http://www.arkansas.gov/">Arkansas</option>
<option value="http://www.ca.gov/">California</option>
<option value="https://www.colorado.gov/">Colorado</option>
<option value="http://portal.ct.gov/">Connecticut</option>
</datalist>
It seems to me that you already did most of the job, just need to write a small javascript / jquery function to do the redirect.
For example (on blure event):
var placeHolder = '[countryCode]';
var urlTemplate = 'https://www.' + placeHolder + '.gov';
$('.awesomplete').on('blur', function(e){
var value = e.target.value;
var nextUrl = urlTemplate.replace(placeHolder,value);
console.log('redirecting to - ' + nextUrl);
//window.location.href = nextUrl; // uncomment for redirecting
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="form-control awesomplete" list="states" />
<datalist id="states">
<option>Alabama</option>
<option>Alaska</option>
<option>Arizona</option>
<option>Arkansas</option>
<option>California</option>
<option>Colorado</option>
<option>Connecticut</option>
</datalist>
Within the API for Awesomplete, you'll find the event list. Once of the events, awesomplete-selectcomplete, fires an event when the user has selected their option. This is what you'll want to hook into.
You'll want to redirect the user with the method window.location.href.
See code below:
var input = document.getElementById('myinput');
new Awesomplete(input);
input.addEventListener('awesomplete-selectcomplete', (e) => {
// This callback will be called whenever a selection is made.
console.log(e.text.label) // Grabs the text of the selection
console.log('navigating to: ' + "www." + e.text.label + ".gov")
//window.location.href = "www." + e.text.label + ".gov";
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/awesomplete/1.1.2/awesomplete.js"></script>
<input id="myinput" list="states" />
<datalist id="states">
<option>Alabama</option>
<option>Alaska</option>
<option>Arizona</option>
<option>Arkansas</option>
<option>California</option>
<option>Colorado</option>
<option>Connecticut</option>
</datalist>
As you can see, I don't know the URLs for any of the government websites, but you can build up the URL as you need to.

Using innerHTML of <select> for windows.open()

On a page of my website I want user to select one choice of a and when they click on "connect" it open a new tab with the correct link.
code :
<select name="choice" id="choice">
<option value="Server1.html">Server1</option>
<option value="Server2.html">Server2</option>
<option value="Server3.html">Server3</option>
</select>
<input type="button" name="go_button" id= "go_button" value="go" onclick="go_to_the_link()"/>
<script>
function go_to_this_link(){
var element = document.getElementById("choice");
var link = element.innerHTML;
myWindow = window.open(link,"_blank");
}
</script>
According to the documentation this should works ... but since I'm new to JS and not expert in HTML I must have failed something.
I want to use JS only and make something that also works with datalist.
Any help is welcome !
Solved:
Ok I had 2 problem :
In order to post this on stackoverflow I changed all my variable and function name, and I forgot to change one ...
As said in the comment, I needed to use "value" and not innerHTML. I tried with value once but it also failed that's why I gave up this, I guess something else was wrong.
Thx for helping solving the problem !
(working) code :
<select name="choice" id="choice">
<option value="Server1.html">Server1</option>
<option value="Server2.html">Server2</option>
<option value="Server3.html">Server3</option>
</select>
<input type="button" name="go_button" id= "go_button" value="go" onclick="go_to_the_link()"/>
<script>
function go_to_the_link(){
var element = document.getElementById("choice");
var link = element.value;
myWindow = window.open(link,"_blank");
}
</script>

Show selected form values - before submit?

I'm looking to use onClick="return confirm('are you sure ?')" to get users to confirm what they are submitting.
Basic form is:
<form>
<Select name='val[]' class='select'><option></option><option value='a'>a</option><option value='b'>b</option><option value='c'>c</option><option value='d'>d</option></select>
<Select name='opt'><option>AAA</option><option>BBB</option><option>CCC</option></select>
<input type='submit' name='submit' value='submit' onClick="return confirm('are you sure ?')">
</form>
When they click submit how do I update the return confirm to show the values they have selected from the dropdown lists?
edit:
I should have mentioned this page is using the Jquery Chosen script from http://harvesthq.github.io/chosen/
The first option is a multiselect and is using chosen to make it look nicer.
The suggestion from dishwasherWithProgrammingSkill works but doesn't show the multivalues selected.
Anyway to do that ?
Update:
Using : var opt3=$('#opt1').val();
Returns me a comma separated list. How do I remove the commas ?
Thanks
I think this is what you are looking for.
<form>
<select name='val' class='select' id='opt1'>
<option></option>
<option value='a'>a</option>
<option value='b'>b</option>
</select>
<select name='opt' id='opt2'>
<option value='AAA'>AAA</option>
<option value='BBB'>BBB</option>
</select>
<input type='submit' name='submit' value='submit' onClick="return function1();">
</form>
<script type='text/javascript'>
function function1(){
var opt1=document.getElementById("opt1").value;
var opt2=document.getElementById("opt2").value;
var response=confirm("Are you sure? option1="+opt1+" option2="+opt2);
return response;
}
</script>
UPDATE
Since you already got the values by using var opt3=$('#opt1').val(); the rest is easy, use the split() function in javascript. It is similar to the explode() function in php.
here is the sample.
var opt3=$('#opt1').val();
var valArray=opt3.split(","); //The parameter determines where you want to split.
for (var i = 0; i < valArray.length; i++) {
alert(valArray[i]);
}
You will have to write a function for it. Using jquery you can use $(form).submit(function(){}); to pull your values in on submit, show the confirm dialog and set the content.
Let me know how you do!
http://api.jquery.com/submit/
It would be best to separate your javascript from your form, and add an event listener. But, if you still want to use onclick you could add an id to each of your form elements, and get the value using getElementById() -
<form>
<select name='val[]' id='val' class='select'><option></option><option value='a'>a</option><option value='b'>b</option><option value='c'>c</option><option value='d'>d</option></select>
<select name='opt' id='opt'><option>AAA</option><option>BBB</option><option>CCC</option></select>
<input type='submit' name='submit' value='submit' onClick="return confirm('are you sure? val='+getElementById('val').value +' opt='+getElementById('opt').value)" />
</form>
see this jsFiddle example - http://jsfiddle.net/rpcBS/
You will need to listen for onSubmit() and not onClick()
<form onSubmit="return confirm('are you sure?);">
<Select name='val[]' class='select'><option></option><option value='a'>a</option><option value='b'>b</option><option value='c'>c</option><option value='d'>d</option></select>
<Select name='opt'><option>AAA</option><option>BBB</option><option>CCC</option></select>
<input type='submit' name='submit' value='submit'>
</form>
onClick will not stop the form from submitting.

Disable SUBMIT button until select box choices

I have a small form.
Two select box elements and a submit button.
The select box elements collectively when selections are chosen, fire off an ajax request.
What I want to do is, disable the submit button UNTIL user has made selections from the select drop downs.
They must make a selection from BOTH select drop downs, before the Submit button is enabled.
I dont mind if the submit button is hidden until selections made.
Brief Code:
<form id="ad_form" method="post" action="">
<p>
<select id="ad_type" name="ad_type">
<option value="" selected="selected">Select premium ad type</option>
<option value="<?php echo TYPE_USER;?>">Featured Agent</option>
<option value="<?php echo TYPE_LISTING;?>">Featured Listing</option>
</select>
<label for="ad_type" class="labelStrong">Advertising Type</label>
</p>
<p>
<select id="ad_duration" name="ad_duration">
<option value="" selected="selected">Select premium ad duration</option>
<option value="weekly">Weekly</option>
<option value="fortnightly">Fortnightly</option>
<option value="monthly">Monthy</option>
</select>
<label for="ad_duration" class="labelStrong">Advertising Duration</label>
</p>
<p>
<div id="calender">
</div>
</p>
<p>
<input type="submit" name="submit" value="Submit" id="submitorder" />
</p>
</form>
Here's a demo that seems to do what you want:
http://jsfiddle.net/Yr59d/
That javascript code would go in a $(document).ready() block
$(function() {
$("#submitorder").css("visibility", "hidden");
$("#ad_form select").bind("change", function() {
if ($("#ad_type").val().length > 0 && $("#ad_duration").val().length > 0) {
$("#submitorder").css("visibility", "visible");
} else {
$("#submitorder").css("visibility", "hidden");
}
});
});
If you give all your selects a common class name (like 'required') , you can do something like this:
$('select.required').change(function() {
var total = $('select.required').length;
var selected = $('select.required option:selected').length;
$('#submitorder').attr('disabled', (selected == total));
});
This is not tested code. This documentation might help. This jquery discussion might help too.
Gah, I'll have to agree with Kon on this one - fix-now-worry-about-it-later answers have their place but an elegant solution that is simple at the same time has to be the way to go.
My solution: (with credit from a thread at: JQuery Enable / Disable Submit Button in IE7)
$('select.required').change(function() {
var total = = $('select.required').length;
var selected = $('#ad_form').find("select.required option[value!='':selected").length;
$('#submitorder').prop('disabled', (selected != total));
});
Incidentally, thanks ctcherry for demoing the code on the JSFiddle site - I've not seen that before and will make use of it in the future!
Use listeners on both select buttons for change and check whether the other is also set. If set, enable the submit button.

Categories

Resources