Activate text box if the "Other" option is selected and POST data - javascript

I found this code on another entry on here which works fine except the text field overwrites with nothing if a colour is selected form the select box so nothing is sent in the POST. Can anyone help?
<html>
<head>
<script type="text/javascript">
function CheckColors(val){
var element=document.getElementById('color');
if(val=='pick a color'||val=='others')
element.style.display='block';
else
element.style.display='none';
}
</script>
</head>
<body>
<select name="color" onchange='CheckColors(this.value);'>
<option>pick a color</option>
<option value="red">RED</option>
<option value="blue">BLUE</option>
<option value="others">others</option>
</select>
<input type="text" name="color" id="color" style='display:none;'/>
</body>
</html>
Thanks,
John

It looks like you need to set the selected color to the text box
in the Javascript section, change this:
if(val=='pick a color'||val=='others'){ //Always use curly brackets
element.style.display='';
element.value = '';
}
else {
element.style.display='none';
element.value = val;
}

Related

Post Select Options To Database When "other" field is selected

i'm using the code below to display an input field when "other" option is selected.
It works perfectly when "other" is selected.
However, i am unable to post to database when any other option apart from "other" is selected.
The problem is the text input negates the select options.
Any idea how to go about this?
There's a question that attempts to solve the problem but i don't have enough reputation to comment Stackoverflow.com/questions/9634783/how-to-activate-a-textbox-if-i-select-an-other-option-in-drop-down-box
<html>
<head>
<script type="text/javascript">
function CheckColors(val){
var element=document.getElementById('color');
if(val=='pick a color'||val=='others')
element.style.display='block';
else
element.style.display='none';
}
</script>
</head>
<body>
<select name="color" onchange='CheckColors(this.value);'>
<option>pick a color</option>
<option value="red">RED</option>
<option value="blue">BLUE</option>
<option value="others">others</option>
</select>
<input type="text" name="color" id="color" style='display:none;'/>
</body>
</html>
the problem is, that you have multiple form elements with the same name. This might work in some cases, but generally is a bad practice. Name them differently and let the code that processes the input handle the data.
If you really need an input with the name 'color' that holds the current color, here is a solution that should work:
function checkColors(val) {
var element = document.getElementById('color');
if (val == 'pick a color' || val == 'others') {
element.style.display = 'block';
} else {
element.value = val; //make sure element always has the right value;
element.style.display = 'none';
}
}
<html>
<head>
</head>
<body>
<select name="colorSelect" onchange='checkColors(this.value);'>
<option>pick a color</option>
<option value="red">RED</option>
<option value="blue">BLUE</option>
<option value="others">others</option>
</select>
<input type="text" name="color" id="color" style='display:none;' />
</body>
</html>

How to show only name in input box but name and number in dropdown list in select element

Html5 select element should:
Show account name and number in dropdown list.
If account is selected, only number should displayed in box
Number should stored in value on selection
I tried code below in Chrome.
After selecting 13111 Receiveables it shows 13111 Receiveables in input box.
How to fix this so that after selecting 13111 Receiveables only accont number
13111 is shown in field ?
Bootstrap 3 ,jquery, jquery-ui, ASP.NET MVC4 with Razor view engine are used.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
Account number:
<select>
<option label='' value=''></option>
<option value='13111' label='13111 Receiveables'>13111</option>
</select>
</body>
</html>
I modified #arsho's code
I believe you were looking for this:
HTML:
<body>
<br> Account number:
<select id="account_select">
<option id="optId" label='' value=''></option>
<option value='13111' label='13111 Receiveables'>13111</option>
<option value='13112' label='13112 Receiveables'>13112</option>
<option value='13113' label='13113 Rssseceiveables'>13113</option>
</select>
</body>
JS:
$(document).ready(function() {
$("#account_select").on("change", function() {
$this_value = $(this).val();
$("#optId").text($this_value);
$("#optId").attr("selected",true);
});
});
hope it helps...
Change the HTML as:
<body>
<input placeholder="Account number will be shown upon selection" type="text" id="account_number" />
<br> Account number:
<select id="account_select">
<option label='' value=''></option>
<option value='13111' label='13111 Receiveables'>13111</option>
</select>
</body>
In jQuery add the following snippet:
$(document).ready(function() {
$("#account_select").on("change", function() {
$this_value = $(this).val();
$("#account_number").val($this_value);
});
});
See in live codedpen http://codepen.io/arsho/pen/GZErBL

How To Value Copy and Paste in another Textbox from Dropdown

Hi guys can anyone tell me how to copy a field value to another field when we just like use check box in dropdown we have to click a check box then value Copy in textbox.
When we have Select Checkbox Value Move in textbox auto.
I am using MultiSelect Dropdwon list and my need it when i am Select Checkbox Value like option 1 or 2 value Move in textbox automatic in below text box.
<SCRIPT language="JavaScript">
$(document).ready(function() {
$("#dropdown").on('change',function(){
var dropdownVal=this.value;
$("#textbox").val(dropdownVal);
});
});
</SCRIPT>
</head>
<body onload="prettyPrint();">
<form>
<p>
<select multiple="multiple" name="dropdown" style="width:370px">
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
<option value="orange">Orange</option>
</select>
</p>
<input type="text" class="normal" id="textbox" name="textbox"
style="width:450px;"></td>
</form>
<script type="text/javascript">
$("select").multiselect().multiselectfilter();
</script>
i think it may help you .....
one
two
three
four
$(document).ready(function() {
$("#dropdown").on('change',function(){
var dropdownVal=this.value;
$("#textbox").val(dropdownVal);
});
});
</script>

How to stdout selected value in JavaScript?

Suposse user hits SPACE in a text -field. I want to check the value in the select -box. I use input.addEventListener('keydown', function(e)... to track the SPACE-hitting-point but how can I get the value of the select block <select id='topic'><option value="hello"></option> ...</section>?
How can you stdout the value of the selected index? Cannot understand why not below.
var el = document.getElementById("topic");
var topicValue = el.options[el.selectedIndex].value;
// PROBLEM: Won't do anything (despite inside <script> -tags)
window.alert(topicValue);
where the topic is the select <select id="topic"[^>]*>[^<]*</select>.
There any many events you can look at.
This has a list of them all
http://www.w3schools.com/tags/tag_select.asp
onkeydown and onmousedown will alert you prior to the onchange (user pressing enter) event
The events work in the select, not to options but just conditional to the script.
<html>
<body>
<script>
function alertMe(option){
if(option == "saab"){
window.alert("you clicked saab in selec!");
document.getElementById("txt").value='saab!';
}
}
</script>
<select onChange="alertMe(this.value);">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="m"> Mercedes</option>
<option>Audi</option>
</select>
<input type="text" id="txt" value="change me"></input>
</body>
</html>
[Answers to the updated]
You can access the select with document.getElementById('topic').options.selectedIndex or mySelect.options[selectedIndex].value (does not work with me). And apparently you could create a form to which you could refer by document.forms['topic'].elements[id] but not sure about this one. More.
#Kosh that is irritating! Just do a dictionary = {0:"topic", 1:"hello",...,n:"topic_{n}"} and then use the getElementById('topic').selectedId as a key and forget the values. Not solved but rounded.
[Update] I think I solved it, just el.value, no selectedIndex needed:
<html>
<body>
<script>
function printSelectValue()
{
var el = document.getElementById("selectOne");
alert(el.value);
}
</script>
<select id="selectOne" onChange="printSelectValue()">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="m"> Mercedes</option>
</select>
</body>
</html>

How to use onClick() or onSelect() on option tag in a JSP page?

How to use onClick() or onSelect() with option tag? Below is my code in which I tried to implement that, but it is not working as expected.
Note: where listCustomer domain object list getting in JSP page.
<td align="right">
<select name="singleSelect" ">
<c:forEach var="Customer" items="${listCustomer}" >
<option value="" onClick="javascript:onSelect(this);> <c:out value="${Customer}" /></option>
</c:forEach>
</select>
</td>
How do I modify it to detect that an option is selected?
Neither the onSelect() nor onClick() events are supported by the <option> tag. The former refers to selecting text (i.e. by clicking + dragging across a text field) so can only be used with the <text> and <textarea> tags. The onClick() event can be used with <select> tags - however, you probably are looking for functionality where it would be best to use the onChange() event, not onClick().
Furthermore, by the look of your <c:...> tags, you are also trying to use JSP syntax in a plain HTML document. That's just... incorrect.
In response to your comment to this answer - I can barely understand it. However, it sounds like what you want to do is get the value of the <option> tag that the user has just selected whenever they select one. In that case, you want to have something like:
<html>
<head>
<script type="text/javascript">
function changeFunc() {
var selectBox = document.getElementById("selectBox");
var selectedValue = selectBox.options[selectBox.selectedIndex].value;
alert(selectedValue);
}
</script>
</head>
<body>
<select id="selectBox" onchange="changeFunc();">
<option value="1">Option #1</option>
<option value="2">Option #2</option>
</select>
</body>
</html>
Even more simplified: You can pass the value attribute directly!
<html>
<head>
<script type="text/javascript">
function changeFunc(i) {
alert(i);
}
</script>
</head>
<body>
<select id="selectBox" onchange="changeFunc(value);">
<option value="1">Option #1</option>
<option value="2">Option #2</option>
</select>
</body>
</html>
The alert will either return 1 or 2.
The answer you gave above works but it is confusing because you have used two names twice and you have an unnecessary line of code. you are doing a process that is not necessary.
it's a good idea when debugging code to get pen and paper and draw little boxes to represent memory spaces (i.e variables being stored) and then to draw arrows to indicate when a variable goes into a little box and when it comes out, if it gets overwritten or is a copy made etc.
if you do this with the code below you will see that
var selectBox = document.getElementById("selectBox");
gets put in a box and stays there you don't do anything with it afterwards.
and
var selectBox = document.getElementById("selectBox");
is hard to debug and is confusing when you have a select id of selectBox for the options list . ---- which selectBox do you want to manipulate / query / etc is it the local var selectBox that will disappear or is it the selectBox id you have assigned to the select tag
your code works until you add to it or modify it then you can easily loose track and get all mixed up
<html>
<head>
<script type="text/javascript">
function changeFunc() {
var selectBox = document.getElementById("selectBox");
var selectedValue = selectBox.options[selectBox.selectedIndex].value;
alert(selectedValue);
}
</script>
</head>
<body>
<select id="selectBox" onchange="changeFunc();">
<option value="1">Option #1</option>
<option value="2">Option #2</option>
</select>
</body>
</html>
a leaner way that works also is:
<html>
<head>
<script type="text/javascript">
function changeFunc() {
var selectedValue = selectBox.options[selectBox.selectedIndex].value;
alert(selectedValue);
}
</script>
</head>
<body>
<select id="selectBox" onchange="changeFunc();">
<option value="1">Option #1</option>
<option value="2">Option #2</option>
</select>
</body>
</html>
and it's a good idea to use descriptive names that match the program and task you are working on am currently writing a similar program to accept and process postcodes using your code and modifying it with descriptive names the object is to make computer language as close to natural language as possible.
<script type="text/javascript">
function Mapit(){
var actualPostcode=getPostcodes.options[getPostcodes.selectedIndex].value;
alert(actualPostcode);
// alert is for debugging only next we go on to process and do something
// in this developing program it will placing markers on a map
}
</script>
<select id="getPostcodes" onchange="Mapit();">
<option>London North Inner</option>
<option>N1</option>
<option>London North Outer</option>
<option>N2</option>
<option>N3</option>
<option>N4</option>
// a lot more options follow
// with text in options to divide into areas and nothing will happen
// if visitor clicks on the text function Mapit() will ignore
// all clicks on the divider text inserted into option boxes
</select>
in this example de select tag is named as: aula_clase_cb
<select class="form-control" id="aula_clase_cb" >
</select>
document.getElementById("aula_clase_cb").onchange = function(e){
id = document.getElementById('aula_clase_cb').value;
alert("id: "+id);
};
<div class="form-group">
<script type="text/javascript">
function activa(){
if(v==0)
document.formulario.vr_negativo.disabled = true;
else if(v==1)
document.formulario.vr_negativo.disabled = true;
else if(v==2)
document.formulario.vr_negativo.disabled = true;
else if(v==3)
document.formulario.vr_negativo.disabled = true;
else if(v==4)
document.formulario.vr_negativo.disabled = true;
else if(v==5)
document.formulario.vr_negativo.disabled = true;
else if(v==6)
document.formulario.vr_negativo.disabled = false;}
</script>
<label>¿Qué tipo de vehículo está buscando?</label>
<form name="formulario" id="formulario">
<select name="lista" id="lista" onclick="activa(this.value)">
<option value="0">Vehiculo para la familia</option>
<option value="1">Vehiculo para el trabajo</option>
<option value="2">Camioneta Familiar</option>
<option value="3">Camioneta de Carga</option>
<option value="4">Vehiculo servicio Publico</option>
<option value="5">Vehiculo servicio Privado</option>
<option value="6">Otro</option>
</select>
<br />
<input type="text" id="form vr_negativo" class="form-control input-xlarge" name="vr_negativo"/>
</form>
</div>
You can change selection in the function
window.onload = function () {
var selectBox = document.getElementById("selectBox");
selectBox.addEventListener('change', changeFunc);
function changeFunc() {
alert(this.value);
}
}
<!DOCTYPE html>
<html>
<head>
<title>Selection</title>
</head>
<body>
<select id="selectBox" onChange="changeFunc();">
<option> select</option>
<option value="1">Option #1</option>
<option value="2">Option #2</option>
</select>
</body>
</html>
<html>
<head>
<title>Cars</title>
</head>
<body >
<h1>Cars</h1>
<p>Name </p>
<select id="selectBox" onchange="myFunction(value);">
<option value="volvo" >Volvo</option>
<option value="saab" >Saab</option>
<option value="mercedes">Mercedes</option>
</select>
<p id="result"> Price : </p>
<script>
function myFunction($value)
{
if($value=="volvo")
{document.getElementById("result").innerHTML = "30L";}
else if($value=="saab")
{document.getElementById("result").innerHTML = "40L";}
else if($value=="mercedes")
{document.getElementById("result").innerHTML = "50L";}
}
</script>
</body>
</html>```
Other option, for similar example but with anidated selects, think that you have two select, the name of the first is "ea_pub_dest" and the name of the second is "ea_pub_dest_2", ok, now take the event click of the first and display the second.
<script>
function test()
{
value = document.getElementById("ea_pub_dest").value;
if ( valor == "value_1" )
document.getElementById("ea_pub_dest_nivel").style.display = "block";
}
</script>
Change onClick() from with onChange() in the . You can send the option value to a javascript function.
<select id="selector" onChange="doSomething(document.getElementById(this).options[document.getElementById(this).selectedIndex].value);">
<option value="option1"> Option1 </option>
<option value="option2"> Option2 </option>
<option value="optionN"> OptionN </option>
</select>
If you need to change the value of another field, you can use this:
<input type="hidden" id="mainvalue" name="mainvalue" value="0">
<select onChange="document.getElementById('mainvalue').value = this.value;">
<option value="0">option 1</option>
<option value="1">option 2</option>
</select>
example dom onchange usage:
<select name="app_id" onchange="onAppSelection(this);">
<option name="1" value="1">space.ecoins.beta.v3</option>
<option name="2" value="2">fun.rotator.beta.v1</option>
<option name="3" value="3">fun.impactor.beta.v1</option>
<option name="4" value="4">fun.colorotator.beta.v1</option>
<option name="5" value="5">fun.rotator.v1</option>
<option name="6" value="6">fun.impactor.v1</option>
<option name="7" value="7">fun.colorotator.v1</option>
<option name="8" value="8">fun.deluxetor.v1</option>
<option name="9" value="9">fun.winterotator.v1</option>
<option name="10" value="10">fun.eastertor.v1</option>
<option name="11" value="11">info.locatizator.v3</option>
<option name="12" value="12">market.apks.ecoins.v2</option>
<option name="13" value="13">fun.ecoins.v1b</option>
<option name="14" value="14">place.sin.v2b</option>
<option name="15" value="15">cool.poczta.v1b</option>
<option name="16" value="16" id="app_id" selected="">systems.ecoins.launch.v1b</option>
<option name="17" value="17">fun.eastertor.v2</option>
<option name="18" value="18">space.ecoins.v4b</option>
<option name="19" value="19">services.devcode.v1b</option>
<option name="20" value="20">space.bonoloto.v1b</option>
<option name="21" value="21">software.devcode.vpnfree.uk.v1</option>
<option name="22" value="22">software.devcode.smsfree.v1b</option>
<option name="23" value="23">services.devcode.smsfree.v1b</option>
<option name="24" value="24">services.devcode.smsfree.v1</option>
<option name="25" value="25">software.devcode.smsfree.v1</option>
<option name="26" value="26">software.devcode.vpnfree.v1b</option>
<option name="27" value="27">software.devcode.vpnfree.v1</option>
<option name="28" value="28">software.devcode.locatizator.v1</option>
<option name="29" value="29">software.devcode.netinfo.v1b</option>
<option name="-1" value="-1">none</option>
</select>
<script type="text/javascript">
function onAppSelection(selectBox) {
// clear selection
for(var i=0;i<=selectBox.length;i++) {
var selectedNode = selectBox.options[i];
if(selectedNode!=null) {
selectedNode.removeAttribute("id");
selectedNode.removeAttribute("selected");
}
}
// assign id and selected
var selectedNode = selectBox.options[selectBox.selectedIndex];
if(selectedNode!=null) {
selectedNode.setAttribute("id","app_id");
selectedNode.setAttribute("selected","");
}
}
</script>
In my case:
<html>
<head>
<script type="text/javascript">
function changeFunction(val) {
//Show option value
console.log(val.value);
}
</script>
</head>
<body>
<select id="selectBox" onchange="changeFunction(this)">
<option value="1">Option #1</option>
<option value="2">Option #2</option>
</select>
</body>
</html>
focus clears value, so select any value is a change and fires myFunc(this) and blur defocus for reselect
<html>
<head>
<script type="text/javascript">
function myFunc(el) {
//Show option value
console.log(el.value);
}
</script>
</head>
<body>
<select id="selectBox" onchange="myFunc(this);this.blur();" onfocus="this.selectedIndex = -1;">
<option value="1">Option #1</option>
<option value="2">Option #2</option>
</select>
</body>
</html>

Categories