In Dropdown list onchange event - javascript

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>

Related

jquery addClass and removeClass when an option is selected

i have a select field, where i have two options in it. If an option is selected i want to add and remove Classe from a div!
On firefox its working fine, not on chrome and safari
Here is the code:
<label for="priv-firma-select">Bestellen als</label><br />
<select id="priv-firma-select" name="firma-privat">
<option id="privat">Privatperson</option>
<option id="firma">Firma</option>
</select>
Here is the jquery for it:
$j(document).ready(function() {
$j("#firma").click(function(){
$j(".input-company").addClass("show");
$j(".leweb_button_firma").addClass("hide");
$j(".leweb_button_privat").removeClass("hide");
});
$j("#privat").click(function(){
$j(".input-company").removeClass("show");
$j(".leweb_button_privat").addClass("hide");
$j(".leweb_button_firma").removeClass("hide");
});
});
The issue is because you're adding click event handlers to option elements. This is not well supported. Instead, add a change event handler to the select and check the chosen value.
Also note that you can use toggle() with a boolean argument to show/hide the elements, instead of adding or removing classes. Try this:
var $j = jQuery.noConflict();
$j("#priv-firma-select").change(function() {
var val = $j(this).val();
$j('.input-company, .leweb_button_privat').toggle(val == 'firma');
$j('.leweb_button_firma').toggle(val != 'firma');
}).change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="input-company">input-company</div>
<div class="leweb_button_firma">leweb_button_firma</div>
<div class="leweb_button_privat">leweb_button_privat</div>
<br /><br />
<label for="priv-firma-select">Bestellen als</label><br />
<select id="priv-firma-select" name="firma-privat">
<option value="privat">Privatperson</option>
<option value="firma">Firma</option>
</select>
$j(document).ready(function() {
$j("#priv-firma-select").change(function(){
if($(this).val() == "firma"){
$j(".input-company").addClass("show");
$j(".leweb_button_firma").addClass("hide");
$j(".leweb_button_privat").removeClass("hide");
}
else{
$j(".input-company").removeClass("show");
$j(".leweb_button_privat").addClass("hide");
$j(".leweb_button_firma").removeClass("hide");
}
});
});

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>

display selected from dropdown box in a form as readonly

I have a situation, ie, I wanted the selected data from the dropdown box to be displayed inside a form (of type text) below it and which should be readonly.(using html/javascript). I am not able to do that as i am a pioneer in that
Hope responses
The below is a rough sketch of a non-jquery method of dynamically changing one form box using input from a dropdown menu.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
function optionCallBack (arg) {
var currentOption = arg.options[arg.selectedIndex].text;
document.getElementById('changeForm').value = currentOption;
}
</script>
</head>
<body>
<select onclick="optionCallBack(this)" id='getForm'>
<option>asia</option>
<option>africa</option>
<option>america</option>
<option>europe</option>
</select>
<form>
<input value='europe' name='changeForm' id='changeForm'></input>
</form>
</body>
</html>
First of all, you need a select list like below (notice the onchange event handler)
<select onchange="fillTextBox(this)" id='mySelectList'>
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
</select>
You will also need a text box (lets give it an Id myTextBox)
<input value='' name='' id='myTextBox'></input>
You'll need the following script for fillTextBox function
function fillTextBox(obj) {
var sel = obj.value;
document.getElementById('myTextBox').value = sel;
}

Display the selected value of a Drop down list in a text field (javascript)

For Example:
These are the items in a drop down list.
<select name="cmbitems" id="cmbitems">
<option value="price1">blue</option>
<option value="price2">green</option>
<option value="price3">red</option>
</select>
When the user selects blue, i want to display the value of price1 in a text field below:
<input type="text" name="txtprice" id="txtprice" onClick="checkPrice()">
Thank you for answering
All you need to do is set the value of the input to the value of the select, in a select.onchange event handler.
var select = document.getElementById('cmbitems');
var input = document.getElementById('txtprice');
select.onchange = function() {
input.value = select.value;
}
Here is a link to a jsFiddle demo
This is the brute force way to look up the currently selected option, check its value and use its display text to update your input. Like Daniele suggested, if you have jquery at your disposal, this gets much, much easier. But if you can't use a JS framework for any reason, this should get you what you need.
<select name="cmbitems" id="cmbitems" onchange="updateTextField()">
...
</select>
<input type="text" ..... />
<script type="text/javascript">
function updateTextField()
{
var select = document.getElementById("cmbitems");
var option = select.options[select.selectedIndex];
if (option.id == "price1")
{
document.getElementById("txtprice").value = option.text;
}
}
</script>
$.on('change', '#cmbitems', function() {
$('#txtprice').val($('#cmbitems option:selected').val());
});
If you are using jquery just go with
$('select.foo option:selected').val(); // get the value from a dropdown select
UPDATE ( I forgot to inlcude the <input> population)
First, inlcude jquery in your html file.
In the <header> you include it:
<header>
<script type="text/javascript" src="YOUR_PATH_TO_LIBRARY/jquery-1.7.1-min.js"></script>
</header>
Then
<input type="text" name="txtprice" id="txtprice" onClick="javascript:$('select.foo option:selected').val();">

If statement in javascript forms

Im fairly new to javascript but have some experience in HTML. I am trying to create a form which allows me to select an option from the drop down menu, which further expands the form (showing new fields on the same page) depending on the option selected from the drop down menu. I figured I need some sort of if statement to achieve this but I can't seem to figure out the right way to do so. I already have the drop down menu working. I would put the code I already have on here, but for some reason its not letting me
Thanks for your help
EDIT - Ran the code from comments through HTML tidy
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content=
"HTML Tidy for Linux/x86 (vers 11 February 2007), see www.w3.org" />
<title>Ipod Inventory</title>
<script language="JavaScript" type="text/javascript">
//<![CDATA[
function submitSelect(form) { alert (form.reason.selectedIndex); document.body.innerHTML() = "<h3>NEW STUFF<h3>"; }
//]]>
</script>
</head>
<body>
<h3>General</h3>Employee Requesting:
<form>
<input type="text" name="employee" value="" />
</form>
<form name="myform" action="" method="get" id="myform">
Reason: <select name="reason">
<option>
Conference/Meeting
</option>
<option>
Loaner
</option>
</select> <input type="button" name="submit" value="Submit" onclick=
"submitSelect(this.form)" /><br />
</form>
</body>
</html>
What you could do is split your page in different div sections, one for each case in your dropdown. You would then alter the display property of those divs using
element.style.display = 'none'
or
element.style.display = 'block'
If your setup is more complex, you might want to create a list of fields that should be visible for each item in your combo box, and then show/hide using the same technique.
For example, you would have a dropdown with male, and female. You would then have to div elements, whose id would be male or female. Then you would use
function toggle() {
if (document.getElementById('selector').value == 'male') {
document.getElementById('male').style.display = 'block';
document.getElementById('female').style.display = 'none';
}
else {
document.getElementById('male').style.display = 'none';
document.getElementById('female').style.display = 'block';
}
}
var selectmenu=document.getElementById("mymenu")
selectmenu.onchange=function(){ //run some code when "onchange" event fires
var chosenoption=this.options[this.selectedIndex] //this refers to "selectmenu"
if (chosenoption.value!="nothing"){
window.open(chosenoption.value, "", "") //open target site (based on option's value attr) in new window
}
}
Thats the if condition you need to use and the example also shows how to bind change event too..(code snippet extracted from javascript kit)
What you want to do is start with the onchange event of your reason select box:
<select name="reason" id="reason" onchange="myFunc();">
myFunc() (excuse the name, I'm not very creative) will be where you do your showing/hiding of the other inputs - probably not a different form, as usually inputs are collected into a single form on a page. Each input (or set of inputs) should be in it's own <div> tag, and you can then use the element.style.display property of the tag to show/hide the inputs, as described in the other answers. For example, you might have the following in your form:
<form name="myform" action="" method="get" id="myform">
Reason: <select name="reason" id="reason" onchange="myFunc()">
<option>
Conference/Meeting
</option>
<option>
Loaner
</option>
</select>
<div id="conferenceInputs">
Conference:
<select name="conferenceSelectBox" id="conferenceSelectBox">
<option>Option 1</option>
<option>Option 2</option>
</select>
</div>
<div id="loanerInputs">
Loaner:
<select name="loanerSelectBox" id="loanerSelectBox">
<option>Option 1</option>
<option>Option 2</option>
</select>
</div>
<input type="button" name="submit" value="Submit" onclick="submitSelect(this.form)" />
</form>
The myFunc() javascript would look something like this:
function myFunc() {
var selectElem = document.getElementById('reason');
var optionText = selectElem.options[selectElem.selectedIndex].text;
switch(optionText) {
case "Conference/Meeting":
document.getElementById('conferenceInputs').style.display = 'block';
document.getElementById('loanerInputs').style.display = 'none';
break;
case "Loaner":
document.getElementById('loanerInputs').style.display = 'block';
document.getElementById('conferenceInputs').style.display = 'none';
break;
default:
}
}
Finally, you would want to have a javascript function that loads with the HTML page - <body onload="anotherFunc()"> that sets both div's style.display properties to 'none' so that they don't appear before the user selects anything.

Categories

Resources