Develop Reference

How to use a submit input button as a link to another webpage in the current tab?

I want to use an <input type="submit"> button as a link to open another webpage in the current tab. I am using the attribute multiple but I want to display the select menu like this
Here is my HTML:
<form id="link">
<select multiple="multiple" >
<option value="" disabled selected hidden>Моля изберете</option>
<option value="volvo">Кардиолог</option>
<option value="gastro.html" target="_blank">Гастроентеролог</option>
<option value="mercedes">Ортопед</option>
<option value="audi">Дерматолог</option>
<option value="audi">Уролог</option>
</select >
<div class="btn">
<button class="SubmitButton" type="submit" name="SUBMITBUTTON" value="Submit" onsubmit="return validateForm();" >Търси</button>
</div>
</form>
And here is my Javascript and jQuery:
$('#link').on('submit', function (e) {
// e.preventDefault();
var $form = $(this),
$select = $form.find('select'),
links = $select.val();
if (links.length > 0) {
for (i in links) {
link = links[i];
window.open(link);
}
}
});
How do I rewrite my code so that when the user submits the form, the new webpage opens in the current tab instead of a new window?

You can't change the behaviour of window.open. It's a user preference and browsing context: https://developer.mozilla.org/en-US/docs/Web/API/Window/open
But you could change your code. If it's an API, instead of open a new link you could just fetch this link and display the result somewhere.
But since it isn't look like an API... you could use some AJAX technologies to get its content and put it in an element at your current page (but it's look like a web at 2010).

Trying to guess your question the answer should be:
Do a preventDefault and then disable the submit Button. Now you can open your "tab".
In this way, users can submit only once and cannot open new pages

Your Problem
In your Javascript, you used window.open(link) to open the link. But this Javascript function opens URLs in a new window. You want the URL to open in the current tab, not to open in a new window or new tab.
My Solution
Replace this line in your code:
window.location = link;
With this line:
window.location.href = link;
This Javascript function stimulates clicking on a link.
Or simply replace your Javascript with the Javascript in my code snippet. I’ve also changed the .on(‘submit’, function(e) {…}); function, which is outdated, with .submit(function(e) {…}); which is the preferred method.
<form id="link">
<select multiple="multiple" >
<option value="" disabled selected hidden>Моля изберете</option>
<option value="volvo">Кардиолог</option>
<option value="gastro.html" target="_blank">Гастроентеролог</option>
<option value="mercedes">Ортопед</option>
<option value="audi">Дерматолог</option>
<option value="audi">Уролог</option>
</select >
<div class="btn">
<button class="SubmitButton" type="submit" name="SUBMITBUTTON" value="Submit" onsubmit="return validateForm();" >Търси</button>
</div>
</form>
$('#link').submit(function (e) {
// e.preventDefault();
var $form = $(this),
$select = $form.find('select'),
links = $select.val();
if (links.length > 0) {
for (i in links) {
link = links[i];
window.location = link;
}
}
});

Javascript code does not execute?

I'm working on a project. I'm trying to make my code so that when a user submits an option from a dropdown menu, if the user selects and submits the default ("Select a genre"), the form is not submitted and the page is not refreshed. Following is my Javascript code:
<script>
var menu = document.getElementById("submit");
menu.addEventListener("click", function() {
if (document.getElementById("dropdown").value == 'nothing')
{
return false;
}
});
</script
This is nested inside a head tag.
Following is my HTML code for the form:
<div>
<form method="POST">
<select id="dropdown" name="genre">
<option value="nothing">Select a genre</option>
<option value="rock">Rock</option>
</select>
<br/>
<br/>
<input id="submit" type="submit"/>
</form>
</div>
The javascript doesn't seem to work, since even when I submit the form while selecting the "Select a genre" option, my form is still submitted, and the python code does work on the value 'nothing', which gives errors.
EDIT: Upon adding further functionality to my project by adding more javascript code, the javascript code again didn't work. I used google chrome's developer tools and stumbled upon this error which seems to be related to why the code isn't working:
Uncaught TypeError: $(...).addEventListener is not a function
at (index):18

Try event.preventDefault():
var menu = document.getElementById("submit");
menu.addEventListener("click", function(event) {
if (document.getElementById("dropdown").value == 'nothing')
{
event.preventDefault();
}
});
<div>
<form method="POST">
<select id="dropdown" name="genre">
<option value="nothing">Select a genre</option>
<option value="rock">Rock</option>
</select>
<br/>
<br/>
<input id="submit" type="submit"/>
</form>
</div>

It is just a declaration of Code if you don't bind to $( document ).ready() or make it as self-invoking function.
First solution:
$( document ).ready(functino(){
var menu = document.getElementById("submit");
menu.addEventListener("click", function() {
if (document.getElementById("dropdown").value == 'nothing')
{
return false;
}
});
});
Another Solution:
(function(){
var menu = document.getElementById("submit");
menu.addEventListener("click", function() {
if (document.getElementById("dropdown").value == 'nothing')
{
return false;
}
});
}());

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>

Getting the select option value to pass into action attribute so it can pass as url and open up the website

The Url website is appearing in the address, but it's not opening the website page....
<form action=" ">
<select name="url">
<option value="https://www.google.com">google</option>
<option value="https://www.yahoo.com">yahoo</option>
</select>
<input type="submit"/>
</form>
<script>
function SetData(){
var select = document.getElementById('url').value;
var test_id = select.options[select.selectedIndex].value;
document.form.action = test_id;
form.submit();
}
</script>

Have a look at this...it's just a clickhandler on the submit button which opens the selected webpage.
HTML:
<select id="url">
<option value="https://www.google.com">Google</option>
<option value="https://www.yahoo.com">Yahoo</option>
</select>
<button type="button" onclick="openUrl()">Open</button>
Javascript:
function openUrl(){
var select = document.getElementById("url");
var url = select.options[select.selectedIndex].value;
window.open(url,'_blank');
}
https://jsfiddle.net/kamys76g/

here i have changed some script
when click on button page is redirect as on selected value and also attribute is posted in querystring
<script>
function SetData(){
var select = document.getElementsByName('url')[0].value;
document.forms[0].action = select;
document.forms[0].submit();
}
</script>
<form action=" ">
<select name="url">
<option value="https://www.google.com">google</option>
<option value="https://www.yahoo.com">yahoo</option>
</select>
<input type="submit" value="submit" onclick="SetData()"/>
</form>

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

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.