select box value on select shows in the textfield - javascript

i have been trying to make an script in php that allows me when i select any option on the select box then on selecting it its value gets displayed in the textfield. Kindly let me know how can i do that. I am a rookie so kindly bear my question if its stupid.
Kindly clcik on the followi8ng link for image help of my quesiton.
http://s18.postimage.org/d85l2m2nt/select_Box2.gif

If your elements are in a form, then put the following listener on the select element:
onchange="this.form.textareaName.value = this.value"
Where textareaName is the name of the textarea you want to set the value of.

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#slectboxid option').click(function(){
$('#textboxid').val($(this).val());
});
});
</script>
</head>
<body>
<form action="#" method="post">
<select name="select" id="slectboxid">
<option value="test">test</option>
<option value="test2">test2</option>
</select>
<input type="text" name="text" id="textboxid" />
</form>
</body>
</html>
use jquery,the above code snippet.it will help you.

Please Try this
<html>
<head>
<script type="text/javascript">
function assignText(obj) {
document.getElementById("textboxid").value = obj.options[obj.selectedIndex].value;
}
</script>
</head>
<body>
<form action="#" method="post">
<select name="select" id="slectboxid" onchange = 'assignText(this)'>
<option value="test">test</option>
<option value="test2">test2</option>
</select>
<input type="text" name="text" id="textboxid" />
</form>
</body>
</html>

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>

Access select element value on form submit

Refactoring how a select element is written and trying to figure out how to access the value of a select drop-down on form submit.
Currently, the code looks like this:
<select onchange="myFunc(this.value)">Some Options</select>
Would like to do something like this:
<form onsubmit="myFunc("Send the value of the select element")">
<select>Some Options</select>
<input type="submit"/>
</form>
What's the best way to grab the value of the select element given that "this" has a new context?
Do you prefer a solution with pure JS or can you use JQuery?
<html>
<head>
<script type="text/javascript" src="jquery-1.8.1.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
$('#myselect').change(function() {
console.log($(this).val());
});
});
</script>
<form id="myform">
<select id="myselect">
<option value="val1">opt1</option>
<option value="val2">opt2</option>
</select>
<input type="submit"/>
</form>
</body>
</html>
Here's the alternative with pure Javascript:
<html>
<head>
<script type="text/javascript" src="jquery-1.8.1.js"></script>
</head>
<body onload="domisready()">
<script type="text/javascript">
var domisready = function() {
document.getElementById('myselect').onchange = function() {
console.log(this.options[this.selectedIndex].value);
};
};
</script>
<form id="myform">
<select id="myselect">
<option value="val1">opt1</option>
<option value="val2">opt2</option>
</select>
<input type="submit"/>
</form>
</body>
</html>
assuming you have only one select in form and this refers to form context.Try this:
$(this).find('select').val();

dynamic form with input and select

I need an form with possibility to add new row consisting SELECT and INPUT. This works for me, but when I submit form no variable from SELECT is posted.
My HTML code:
<html>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<button id='add'>Add</button>
<form action="test.php" method="get">
<div class='container'>
<select>
<option name='service[]' value=1>HDD Recovery</option>
<option name='service[]' value=2>PC Clean</option>
<option name='service[]' value=3>Other</option>
</select>
Description<input type='text' name='desc[]'>
Price<input type='text' name='price[]'>
</div>
<input type="submit" value="Send">
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
var removeButton = "<button id='remove'>Remove</button>";
$('#add').click(function() {
$('div.container:last').after($('div.container:first').clone());
$('div.container:last').append(removeButton);
$('div.container:last input').each(function(){
this.value = '';
});
});
$('#remove').live('click', function() {
$(this).closest('div.container').remove();
});
});
</script>
<br>
</html>
How can i fix this ?
you have to name the select, not the options it holds.
<select name="service[]">
<option value="1">HDD Recovery</option>
<option value=2>PC Clean</option>
<option value=3>Other</option>
</select>
use
<select name='service[]'>
instead of giving name to option
<option name='service[]' value=1>HDD Recovery</option>

Categories