Keep default value and pass it on - javascript

I have the following piece of code to grab the value of a drop down list. The problem I have is that due to the onchange event attribute the first value is not passed if a user does not select an option. Is there a way I can define when there is no change the first value is passed on?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo GetSelectOptionData</title>
<select name="mySelect" id="mySelect" onchange="getSelectedValue();">
<option value="aaaaaaaaa.xml">Text 1</option>
<option value="bbbbbbbbb.xml">Text 2</option>
</select>
<form action="test">
Value1: <input id="myField" type="text" value=""><br>
<input type="submit" value="Submit">
</form>
<script type="text/javascript">
function getSelectedValue() {
var value = document.getElementById('mySelect').value.split('.');
document.getElementById('myField').value = value[0];
}
</script>
</body>
</html>
Many thanks!

set the first option as selected default
<option selected="selected" ...
and call getSelectedValue() after everything is defined
<script type="text/javascript">
function getSelectedValue() {
var value = document.getElementById('mySelect').value.split('.');
document.getElementById('myField').value = value[0];
}
getSelectedValue()
</script>

Related

Separate select label options and get values in input in PHP

How about, I have a <select> tag which is filled with the BD.
What I want to do is that when selecting the desired option, that the <select> values are assigned to different <input> tags.
Currently I select some of the options, I get the value and the text of the option. I want to have them as 2 different options.
In my example I have this <select>
<option value = "1"> Pizza1 Pizza2 </ option>
My question is how to separate the text of the option so that Pizza 1 is in one option and Pizza2 is in a different option.
So that something like this:
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form action="#">
<select name="choose_food" onchange="showValue(this.value); showValue2(this.options[this.selectedIndex].innerHTML);">
<option value="1">Pizza1 Pizza2</option>
<option value="2">Hamburger1 Hamburger2</option>
<option value="3">Bacon1 Bacon2</option>
</select>
<br/>
<input type="text" name="food" id="food" value="" />
<br/>
<input type="text" name="food2" id="food2" value="" />
</form
</body>
</html>
<script type="text/javascript">
var showValue = function(x){
document.getElementById('food').value=x;
}
var showValue2 = function(x){
document.getElementById('food2').value=x;
}
</script>
Just put them in different option values as follows:
<option value="1">Pizza1</option>
<option value="2">Pizza2</option>
I hope I got what you mean. To make them different options, you just have to put them into different option tags, like so:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form action="#">
<select name="choose_food" onchange="showValue(this.value); showValue2(this.options[this.selectedIndex].innerHTML);">
<option value="1">Pizza1</option>
<option value="2">Pizza2</option>
<option value="3">Hamburger1 Hamburger2</option>
<option value="4">Bacon1 Bacon2</option>
</select>
<br/>
<input type="text" name="food" id="food" value="" />
<br/>
<input type="text" name="food2" id="food2" value="" />
</form
</body>
</html>
<script type="text/javascript">
var showValue = function(x){
document.getElementById('food').value=x;
}
var showValue2 = function(x){
document.getElementById('food2').value=x;
}
</script>

Drop down choosing whether Single or Double pay

I hope someone will help me with this, here's the problem. All I want is when choose single in the drop down, I want the numbers in that textbox to be multiply by 1 and whether I choose double in the drop down it will only multiply by 2. Thank you in advance for the help. :)
Also here's my code, I think we can use onchange in here. But I don't know how? Thank you again for the help.
<html>
<head>
<title>Sample</title>
</head>
<body>
<form>
Number:
<input type="text" id="fnum"/>
<br/><br/>
Type:
<select>
<option>Choose</option>
<option value="Single">Single</option>
<option value="Double">Double</option>
</select>
<br/><br/>
Result:
<input type="text" id="result" readonly/>
</form>
</body>
</html>
Go ahead and try this.
The variable value will contain the value that you have in your select (dropdown)
<html>
<head>
<title>Sample</title>
<script src="http://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha256-/SIrNqv8h6QGKDuNoLGA4iret+kyesCkHGzVUUV0shc=" crossorigin="anonymous"></script>
</head>
<body>
<form>
Number:
<input type="text" id="fnum"/>
<br/><br/>
Type:
<select>
<option>Choose</option>
<option value="Single">Single</option>
<option value="Double">Double</option>
</select>
<br/><br/>
Result:
<input type="text" id="result" readonly/>
</form>
<script>
$('document').ready(function(){
$('select').change(function(){
var value = $('select').val();
var fnum = $('#fnum').val();
if(value == 'Single'){
var result = fnum*1;
$("#result").val(result);
}
else if(value == 'Double'){
var result = fnum*2;
$("#result").val(result);
}
})
})
</script>
</body>
</html>

Unable to add the value from dropdown list to end of url

I'm having trouble trying to add the value part of the dropdown list to the end of my url as each value is different for the dropdown list.
<!DOCTYPE html>
<html>
<head>
<title>Task 8</title>
</head>
<body>
<script type="text/javascript">
change(val) {
document.staff1.action="http://tl28serv/task7.php?staffID=" + val;
}
</script>
<form id="StaffName" action="http://tl28serv/task7.php?staffID=" method="post">
<select id="staff1">
<option value="12">Perce Trainor</option>
<option value="15">Chuck Norris</option>
<option value="23">Jane Zumba</option>
</select>
<br/>
<input type="submit" name="submit">
</form>
</body>
</html>
You are missing the function keyword. Also you need to call the function change() on onchange event. Do it like this:
<script type="text/javascript">
function change(th) { //Added function keyword
document.getElementById("StaffName").action="http://tl28serv/task7.php?staffID=" + th.value;
}
</script>
<form id="StaffName" action="http://tl28serv/task7.php?staffID=" method="post">
<select id="staff1" onchange="change(this)"> <!--Called change() here-->
<option value="12">Perce Trainor</option>
<option value="15">Chuck Norris</option>
<option value="23">Jane Zumba</option>
</select>
<br/>
<input type="submit" name="submit">
</form>
Demo. Check console.
If you want to handle changed uri on server side and do nothing with it on client side, you don't have to do anything. just send data to server.
If you use GET method, your id appears on uri string.
<!DOCTYPE html>
<html>
<head>
<title>Task 8</title>
</head>
<body>
<form id="StaffName" action="http://tl28serv/task7.php" method="get">
<select id="staffID">
<option value="12">Perce Trainor</option>
<option value="15">Chuck Norris</option>
<option value="23">Jane Zumba</option>
</select>
<br/>
<input type="submit" name="submit">
</form>
</body>
first of all you are trying to set action on select box, that is not correct, you have to set action on form. I think this should work.
<!DOCTYPE html>
<html>
<head>
<title>Task 8</title>
</head>
<body>
<script type="text/javascript">
function change(val) {
document.StaffName.action="http://tl28serv/task7.php?staffID=" + val;
}
</script>
<form id="StaffName" action="http://tl28serv/task7.php?staffID=" method="post">
<select id="staff1" onSelect="change(this.value)">
<option value="12" >Perce Trainor</option>
<option value="15">Chuck Norris</option>
<option value="23">Jane Zumba</option>
</select>
<br/>
<input type="submit" name="submit">
</form>
</body>
</html>
You don't need JavaScript to achieve this.
Here is how you do it with HTML
Change your form method to GET, instead of POST.
Change form action to http://tl28serv/task7.php
Add name attribute to select, with value staffID
Of course, there exists a Javascript solution as well.
Here is how you achieve it:
<body>
<form id="StaffName" action="http://tl28serv/task7.php" method="post">
<select id="staff1">
<option value="12">Perce Trainor</option>
<option value="15">Chuck Norris</option>
<option value="23">Jane Zumba</option>
</select>
<br/>
<input type="submit" name="submit">
</form>
// move script
<script type="text/javascript">
var staff = document.getElementById('staff1');
// attach "change" EventListener to #staff1
staff.addEventListener('change', function() {
document.getElementById('StaffName').action="http://tl28serv/task7.php?staffID=" + this.value;
});
</script>
</body>

Javascript: how to get selected option value that is in the datalist with inside select

On this below code, Am trying to get the value of selected 'option' from 'select' element that is in the 'datalist' element. Have tried something, but, i couldn't. Am expecting solution only in javascript. As of now, it always alerts the first option value however we change the option value. It should alert actual option value when i change the option value on the input box. For example if i select 'Blueberry' then it should omit 'Bluberry'.
<html>
<head>
<title>HTML 5 test Elements</title>
</head>
<body>
<div>
<label>Your favorite fruit:
<datalist id="fruit">
<select name="fruits">
<option value="Blackberry">Blacskberry</option>
<option value="Blackcurrant">Blackcurrant</option>
<option value="Blueberry">Blueberry</option>
</select>
If other, please specify:
</datalist>
<input type="text" name="fruit" list="fruit"/>
</label>
<script type="text/javascript">
document.getElementsByName("fruit")[0].onchange = function (event) {
var evt = event || window.event;
var parElem = evt.srcElement || evt.target;
alert(document.getElementsByName("fruits")[0].options[document.getElementsByName("fruits")[0].selectedIndex].value);
}
</script>
</div>
</body>
</html>
Any idea? please.
First of all, you can remove <select> element and just keep the <datalist> and its nested <options>. Just use the datalist. Then you can use the input event to check for a change on the <input> which is connected to the datalist
Here is a working fiddle: http://jsfiddle.net/bkab62rq/
If you would like to get the alert only if the one of the preset values is used try following:
<html>
<head>
<title>HTML 5 test Elements</title>
</head>
<body>
<div>
<label>Your favorite fruit:
<datalist id="fruit">
<select id="fruits">
<option value="Blackberry">Blacskberry</option>
<option value="Blackcurrant">Blackcurrant</option>
<option value="Blueberry">Blueberry</option>
</select>
If other, please specify:
</datalist>
<input type="text" name="fruit" list="fruit"/>
</label>
<script type="text/javascript">
document.getElementsByName("fruit")[0].onchange = function (event) {
var evt = event || window.event;
var parElem = evt.srcElement || evt.target;
for (var i=0; i<document.getElementById('fruits').options.length; i++)
{
if (document.getElementById('fruits').options[i].value == document.getElementsByName("fruit")[0].value)
{
alert(document.getElementById('fruits').options[i].value);
break;
}
}
}
</script></div></body></html>
This should do the Magic ;)
Here you got an Fiddle:
http://jsfiddle.net/16e8qanz/19/
This should work
Greetz Anders

Update Textbox with Combobox value on ValueChange event

My ultimate goal with this is to make a dropdown that allows user input also. The best I can seem to do is an textbox next a dropdown that makes it look like they are similar, the issue I am running into is that I need the textbox to update whenever my dropdown value is changed. I have some code I've been playing with (below), but it doesn't seem to be getting me anywhere! Any pointers on how I can get this to work, or am I messing up the syntax? (fairly new to both jscript and html)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<style type="text/css">
select
{
width:200px;
}
</style>
<head>
<title>Test</title>
<script type="text/JavaScript">
var select = document.getElementById('theItems');
var input = document.getElementById('stroke');
function otherSelect()
{
input.value = select.value;
}
</script>
</head>
<body>
<form action="" method="">
<input name="stroke"/>
<select name="theItems" onchange="otherSelect()">
<option value="item1">Item One</option>
<option value="item2">Item Two</option>
<option value="item3">Item Three</option>
<option value="item3">Item Four</option>
<option value="other">Other</option>
</select>
<div id="otherBox" style="visibility: hidden;">
If other: <input name="otherField" type="text" />
</div>
</form>
</body>
You should execute your script in the window.onload event. The elements are not available to your script when it is being executed. Change your script to this
<script type="text/JavaScript">
window.onload = function(){
var select = document.getElementById('theItems');
var input = document.getElementById('stroke');
function otherSelect()
{
input.value = select.value;
}
}
</script>
This way the script will be executed after the HTML elements have been rendered by the browser.
Here's a simple pure JavaScript implementation of what you want. http://jsfiddle.net/24Xhn/
We're going to setup the markup so the select box and the other input box have similar name and id attributes. We'll use classes to setup/initialize the onchange events and make sure the inputs start off hidden and disabled. By toggling the "disabled" attribute, true or false we are making it so the input or select don't show up when the form is submitted, submit the form in the JSFiddle with different combinations and you'll see the output in the query string of the URL.
HTML
<select id="items1" name="items1" class="select-other">
<option value="item1">Item One</option>
<option value="item2">Item Two</option>
<option value="item3">Item Three</option>
<option value="item3">Item Four</option>
<option value="other">Other</option>
</select>
<input id="items1-other" name="items1-other" class="input-other" />
JS
// setup
var inps = document.getElementsByClassName("input-other");
for(var i=0; i<inps.length; i++) {
var inp = inps[i];
// hide & disable the "other" input
inp.style.display = "none";
inp.disabled = true;
// set onchange, if input is empty go back to select
inp.onchange = function() {
var val = this.value;
if(val == "") {
this.style.display = "none";
this.disabled = true;
// get its associated select box
var sel = document.getElementById(this.id.replace(/-other$/i, ""));
sel.style.display = "";
sel.disabled = false;
}
};
}
var sels = document.getElementsByClassName("select-other");
for(var i=0; i<sels.length; i++) {
var sel = sels[i];
// set onchange if value is other switch to input
sel.onchange = function() {
var val = this.value;
if(val == "other") {
this.style.display = "none";
this.disabled = true;
// get associated input box
var inp = document.getElementById(this.id + "-other");
inp.style.display = "";
inp.disabled = false;
}
};
}
I just realized what was wrong. I didn't truly look at the html until I copied and pasted it into a test application and I figured out the issue.
You need to set the id tag to the stroke and theItems not the name tag. That's why it's not doing anything. There was, I'm guessing, a copy/paste issue as well because you didn't have a closing html tag, but I assumed you just missed copying that. Also, you don't really need global variables in order to retrieve the input and select you just need them inside the actual function, and you can actually pass the select into the function like so.
Your code corrected:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test</title>
<style type="text/css">
select
{
width:200px;
}
</style>
<script type="text/javascript">
function otherSelect(obj)
{
var input = document.getElementById('stroke');
input.value = obj.value;
}
</script>
</head>
<body>
<form action="" method="">
<input id="stroke" name="stroke"/>
<select id="theItems" name="theItems" onchange="otherSelect(this)">
<option value="item1">Item One</option>
<option value="item2">Item Two</option>
<option value="item3">Item Three</option>
<option value="item3">Item Four</option>
<option value="other">Other</option>
</select>
<div id="otherBox" style="visibility: hidden;">
If other: <input name="otherField" type="text" />
</div>
</form>
</body>
</html>
I also wanted to create a combobox with an auto-updating text field next to it for new entries, and came up with this in less than an hour, based on simple html and javascript examples from w3schools.com. It works perfectly on my IE browser.
<!DOCTYPE html>
<html>
<head>
<script>
function updateField(name, value)
{
document.getElementById(name).value = value;
}
</script>
</head>
<body>
<select name='10' onchange='updateField(this.name, this.value)'>
<option value='volvo'>Volvo</option>
<option value='saab'>Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<input type="text" id="10" value="volvo">
</body>
</html>

Categories