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

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>

Related

Javascript onchange function not working on select tag

I made 2 input fields and 1 select field and I applied onchange() function to select tag which calls javascript and that script make calculation and show it in other two fields
but it is not working for some syntax or logic reasons. please take a look at my code ,any help would be appreciated.
<html>
<head>
<script type="text/javascript">
function update() {
var x = document.getElementsByName("n_person").value;
document.getElementsByName("m_income").value= x*5;
document.getElementsByName("y_income").value= x*4;
}
</script>
</head>
<body>
<div class="elist"> <span class="b_text"><span>*</span>Level 1:</span>
// here is select tag where I put onchage function <select class="ifield" name="n_person" onChange="update()">
<option value="" selected="selected">Choose no. of person referred</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
// These are teh input where resultant value will appear <input type="text" value="" placeholder="Your weekly Income..." name="m_income" id="weekly_income" class="field" readonly required />
<input type="text" value="" placeholder="Your day Income..." name="y_income" id="day_income" class="field" readonly required/>
</div>
<!--elist-->
</body>
</html>
See this fiddle
Updated JS
function update() {
var x = document.getElementsByName("n_person")[0].value;
document.getElementsByName("m_income")[0].value = x * 5;
document.getElementsByName("y_income")[0].value = x * 4;
}
The problem with your JS was you was not targetting the correct HTML elements using getElementsByName.
Please read more about it here
The method getElementsByName returns, as its name indicates, a list of elements with the specified name and not just one. In your case, the names are unique to the document and the method will return a list with just one value, but you'll still need to index this list. Therefore, you must change this:
var x = document.getElementsByName("n_person").value;
to
var x = document.getElementsByName("n_person")[0].value;
Do this also for the other uses of getElementsByName and your code will work.

add more add less using jquery clone with incrementing id

Curerntly working on jquery clone where I need to addrow and delete rows I have searched lot in stackoverflow and in google based on that i understand a bit on how jquery clone will work.
Any suggestion please
Here is the jquery code.
var count=0;
$(document).on("click", ".phn_btn_more", function () {
var $clone = $('.cloned-row:eq(0)').clone();
//alert("Clone number" + clone);
$clone.find('[id]').each(function(){this.id+='someotherpart'});
$clone.attr('id', "added"+(++count));
$('.cloned-row:eq(0)').after($clone);
});
$(document).on('click', ".btn_less1", function (){
var len = $('.cloned-row').length;
if(len>1){
$(this).closest(".btn_less1").parent().parent().parent().remove();
}
});
With the current code updated code I can able to increment id dynamically but it cloning two times.
with this code when i try to click add more button it was cloning the div but i am getting two div instead of one and Iam trying to add id and name incrementing dynamically
I know it may be a possible duplicate but still I am not getting why I am not able to incrementing id and name. For btn less for the first div btn_less class won't be available once user click add more from second add less button should appear
Here is the html code
<div class="em_pho cloned-row" id="phone_content">
<select id="sel_phntype" name="sel_phntype" class="sslt_Field">
<option selected='selected' value="">Phone Type</option>
<option value="BUSN">Business</option>
<option value="CAMP">Campus</option>
<option value="CELL" >Cellphone</option>
<option value="CEL2">Cellphone2</option>
<option value="FAX">FAX</option>
<option value="HOME">Home</option>
<option value="OTR">Other</option>
</select>
<span class = "ph-inline">
<input type="text" class="cc_field" placeholder="Country Code" id="txt_CC" maxlength="3" name="txt_CC" />
<input type="text" class="pn_field" placeholder="Phone Number" id="txt_Pno" name="txt_Pno" />
<input type="radio" name="preferred" id="rad_Prf" value="preferred">
<label class="radio-label">Preferred</label>
<!--<button class="btn_more" id="buttonvalue"></button>-->
<input type="button" class="phn_btn_more" id="buttonvalue"/>
</span>
</div>
Kindly help me
Thanks & regards
mahadevan
Not sure if this is what you wanted.
JSfiddle
Let me know if I missed out anything or if anything is wrong.
JQuery
var count=0;
$(document).on("click", ".phn_btn_more", function () {
var $clone = $('.cloned-row:eq(0)').clone();
//alert("Clone number" + clone);
$clone.find('[id]').each(function(){this.id+='someotherpart'});
$clone.find('.phn_btn_more').after("<input type='button' class='btn_less1' id='buttonless' value = 'remove'/>")
$clone.attr('id', "added"+(++count));
$(this).parents('.em_pho').after($clone);
});
$(document).on('click', ".btn_less1", function (){
var len = $('.cloned-row').length;
if(len>1){
$(this).parents('.em_pho').remove();
}
});

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.

Opening drop down links in same tab

I'm using a dropdown menu to provide a few different links, but I want the links to open in a the same tab, not a new one. This is code I found, but I have a very lacking knowledge of Javascript
<script type="text/javascript">
var urlmenu = document.getElementById( 'menu1' );
urlmenu.onchange = function() {
window.open( this.options[ this.selectedIndex ].value );
};
</script>
Try this!
<html>
<body>
<form name="blah_blah">
<select name="ddmenu_name" id="ddmenu_name" style="width: 80% !important;">
<option value="" selected>Select Site</option>
<option value="http://www.yahoo.com">Yahoo!!!</option>
<option value="http://www.gmail.com">Gmail</option>
<option value="http://www.google.co.in">Google</option>
<option value="http://www.facebook.com">Facebook</option>
</select>
<input type="button" name="Submit" value="Go!" onClick="window.open(ddmenu_name.value,'newtab'+ddmenu_name.value)">
</form>
</body>
</html>
Or might as well refer to this fiddle
http://jsfiddle.net/ChU8G/
So, you can open the content in an iframe element, but this is old school, and you should be using ajax.
var urlmenu = document.getElementById( 'menu1' );
var iframe = document.getElementById("my-page");
urlmenu.onchange = function() {
iframe.src=this.options[ this.selectedIndex ].value ;
};
var urlmenu = document.getElementById('menu1');
urlmenu.onchange = function() {
location.href = this.options[this.selectedIndex].value;
};
You dont neet to open a new window if you just want to redirect the current tab.
Use location.href insteat. The property-setter redirects your current Tab.
Old post but I spent hours looking for a solution without anything working. This is simple and works for me.
*Although this works with no problem for all of these links on my website it throws a "refused to connect" error for some sites on the stack overflow preview - not sure why.
<form id="pageFinderForm">
<label class="input" for="PageFinder">Find a web page</label>
<select id="page_list" name="page_list" form="pageform">
<option value="https://stackoverflow.com">stack overflow</option>
<option value="https://www.bing.com">Bing</option>
<option value="https://www.google.com">Google</option>
</select>
<input type="button" name="Submit" value="Go!" onClick="window.open(page_list.value,'_self')">
</form>

In Dropdown list onchange event

My code is as follows:
<!DOCTYPE html>
<html>
<body>
<script>
function tab()
{
current=document.getElementById("test");
next=document.getElementById("run");
if(current.value!="-1")
{
next.focus()
}
}
</script>
<select id="test" onchange="tab()">
<option value="-1">--select--</option>
<option value="1" >TEST</option>
<option value="2">RUN</option>
</select>
<input type="text" name="run"/>
</body>
</html>
Definition: I have a dropdown which is having four values. If I change one value to another value in the dropdown it autotab to the textbox. As per my code, it is working fine.
But the issue is when I select 1st value in the dropdown then the autotab is working and again I select the same value from the dropdown (autotab is not working). I know that the problem is in the event. There is no change so the event won't fire. Please help me to rectify the issue.
There is no element with id run, which is being referenced by:
document.getElementById("run");
You probably intended to write:
<input type="text" name="run" id="run"/>
Use onBlur() instead of onchange().
The onBlur event is fired when you have moved away from an object without necessarily having changed its value.
The onChange event is only called when you have changed the value of the field.
please have a lookinto this to know about events
Try using mouseup & keyup event as a work around:
var current = document.getElementById("test");
var next = document.getElementById("run");
var open = false; //drop-down closed
var watchOpen = function() {
open = !open; //inverse flag to identify state of drop-down
};
var tab = function() {
if (!open && current.value !== "-1") {
next.focus();
}
};
<select id="test" onmouseup="watchOpen();tab();" onkeyup="watchOpen();tab();">
<option value="-1">--select--</option>
<option value="1">TEST</option>
<option value="2">RUN</option>
</select>
<input type="text" id="run" /><!-- replaced name with id -->
try to use onBlur() .It will solve the problem
I think this is possible with html5
onselect
Try this :
<!DOCTYPE html>
<html>
<body>
<select id="test" onchange="tab()">
<option value="-1">--select--</option>
<option value="1">TEST</option>
<option value="2">RUN</option>
</select>
<input type="text" name="run" id="run" />
<script type="text/javascript">
function tab() {
current = document.getElementById("test");
next = document.getElementById("run");
if (current.value != "-1") {
next.focus();
next.value = current.options[current.selectedIndex].text;
} else {
next.value = "";
}
}
</script>
</body>
</html>

Categories

Resources