How To Value Copy and Paste in another Textbox from Dropdown - javascript

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>

Related

Pass the text from a form Select-Option to a text input field

I would like to pass the text portion (not the value) of a form Select-Option to a hidden text-input field within the same form when the user makes a selection.
I have explored some java and PHP 'examples' I found in my research, but none of them seem to work for me.
I have posted a raw example of the form to see if anyone can lead me to water. Any help wouold be appreciated.
HMTL
<html>
<head>
</head>
<body>
<form action="fruitBasket.php" method="post" enctype="multipart/form-data">
<select id="fruitSelector" name="fruitSelector">
<option value="0" selected="selected" disabled="disabled">Select Fruit</option>
<option value="1">Grapes</option>
<option value="2">Strawberries</option>
<option value="3">Peaches</option>
<option value="4">Blueberries</option>
</select>
<br>
<br>
<input type="text" class="hiddenField" name="hiddenField" placeholder="Selected fruit appears
here.">
</form>
</body>
</html>
It's not as easy as getting the selected option's value, which can be retrieved simply as selectElement.value, yet it's not difficult at all.
selectElement.options will give you an array of ALL the options inside the select element.
You will find the selected option's index to be selectElement.selectedIndex.
With that said, you can access to the selected option like this: selectElement.options[selectElement.selectedIndex].
Finally, you can get the text property like this: selectElement.options[selectElement.selectedIndex].text
Here's the code:
// THIS CONSTANT REPRESENTS THE <select> ELEMENT
const theSelect = document.getElementById('fruitSelector')
// THIS LINE BINDS THE input EVENT TO THE ABOVE select ELEMENT
// IT WILL BE EXECUTED EVERYTIME THE USER SELECTS AN OPTION
theSelect.addEventListener('input', function() {
// THIS IS HOW YOU GET THE SELECTED OPTION'S TEXT
let selectedOptText = theSelect.options[theSelect.selectedIndex].text
// FINALLY, THIS COPIES THE ABOVE TEXT TO THE INPUT ELEMENT:
document.querySelector('.hiddenField').value = selectedOptText;
})
<form action="fruitBasket.php" method="post" enctype="multipart/form-data">
<select id="fruitSelector" name="fruitSelector">
<option value="0" selected="selected" disabled="disabled">Select Fruit</option>
<option value="1">Grapes</option>
<option value="2">Strawberries</option>
<option value="3">Peaches</option>
<option value="4">Blueberries</option>
</select>
<br>
<br>
<input type="text" class="hiddenField" name="hiddenField" placeholder="Selected fruit appears
here.">
</form>
well if you want to pass the text portion you should add the names as the values too like
---
code
---
<option value="Grapes">Grapes</option>
<option value="Strawberries">Strawberries</option>
---
code
---

How can I create a textbox if a certain item is selected in a drop-down list?

I have a drop-down list that contains the following values:
<option>Aramex</option>
<option>DHL</option>
<option>FedEx</option>
<option>Other</option>
When the user select Other, I want to show a text box. How can I do that?
I'm using Laravel 4.2
One method:
<script type="text/javascript>
// Function to on change of the <select>, display the other input box
$(document).ready(function(){
$("#choices").on("change"),function(){
if($("#choices').val() == "Other"){
$("#otherinput").show();
}else{
$("#otherinput").hide();
}
});
});
</script>
<!-- hide the input box initially -->
<style>
#otherinput{display: none;}
</style>
<!-- These must have values since they're options, FYI, but set an ID for select and add values to options -->
<select id='choices'>
<option value='Aramex'>Aramex</option>
<option value='DHL'>DHL</option>
<option value='FedEx'>FedEx</option>
<option value='Other'>Other</option>
</select>
<!-- hidden until you select other option within the <select> -->
<input type='text' name='textinput' id='otherinput' />
here is the correct fix:
<script type="text/javascript">
function showfield(name){
if(name=='Other')document.getElementById('div1').innerHTML='Other: <input type="text" name="other" />';
else document.getElementById('div1').innerHTML='';
}
</script>
<select name="travel_arriveVia" id="travel_arriveVia" onchange="showfield(this.options[this.selectedIndex].value)">
<option selected="selected">Please select ...</option>
<option value="DHL">DHL</option>
<option value="Aramex">Aramex</option>
<option value="FedEx">FedEx</option>
<option value="Other">Other</option>
</select>
<div id="div1"></div>

Multiple textboxes fill the dropdown selection having same class in jquery

I have used the concept of multiple textboxes having same class fill with the multiple dropdown option selection which also having same class.I have facing problems in it.when i click the first dropdown option then it change the second textbox value.I want that if i click on first dropdown option it changes the values of first textbox not other or if click the second dropdown option it will change the value of second textbox.
<form action="" method="post">
<select name="drop[]" id="budget" class="drop">
<option value="1">option1</option>
<option value="2">option2</option>
<option value="3">option3</option>
</select>
<input type="text" name="txt" id="txt" class="txt" value="text1"><br>
<select name="drop[]" id="budget1" class="drop">
<option value="1">option1</option>
<option value="2">option2</option>
<option value="3">option3</option>
</select>
<input type="text" name="txt" id="txt1" class="txt" value="text2">
</form>
$('input[name="txt"]').each(function () {
$('.drop').on('change', function(){
var total = $(this).val();
$('input[name="txt"]').val($(this).find("option:selected").attr("value"));
});
});
You need to find out the next input element which should be updated when you change a select element. You can use the below code to achieve this.
$('.drop').on('change', function(){
var total = $(this).val();
$(this).next("input:first").val($(this).find("option:selected").attr("value"));
});
Plunker : https://plnkr.co/edit/qFjuFtwhHBvDE9zxAup2?p=preview

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

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

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;
}

Categories