CODEWITHSUNDEEP
javascriptphpjqueryhtml
prabu
prabu

Reputation: 141

How to show my selected value of dropdownlist in textbox

I have a code which is used to populate the words from text file to listbox. If i select any value from listbox then it display a selected word within the text box (within the form - to post the value to another script)

javascript code:

<script>
  function getSelectedValue(theValue){
    document.getElementById('pasteTheValue').innerHTML=theValue;
  }
</script>

php code: 

//open the file
$read_your_file = @fopen($your_file, "r") or die ("Couldn't Access $your_file");

//create a variable to hold the contents of the file
$contents_your_file = fread($read_your_file, filesize($your_file));

//array of file contents
$your_array = explode("\n",$contents_your_file);

//close the file
fclose($read_your_file);

//counts the number elements in the property_categories array
$num_elmnts_array = count($your_array) ;

//elements in the drop down list
//$drop_elmnts = 0;

//begin creating your dropdown menu...

$your_menu = "<select name=\"list\" onchange=\"getSelectedValue(this.value)\">";  
//For loop to begin
for($counter = 0; $counter < $num_elmnts_array; $counter++){
$your_menu .= "<option value=\"$your_array[$counter]\">$your_array[$counter]        </option>";
//$counter++;
}
//end select menu
$your_menu .= "</select>";
?>

<p><b><?php echo "$your_menu"; ?></b><br>
<p id="pasteTheValue"></p>

This works fine. This display a selected word as usual normal text within the page. But i want to show this (or get the value) within the text box. Please help me to solve this.

Upvotes: 0

Views: 10383

Answers (7)

immayankmodi
immayankmodi

Reputation: 8590

To get selected value you need to use .value in JavaScript and .val() in jQuery.

Using JavaScript

function getSelectedValue(theValue){
var SelectedValue = theValue.options[theValue.selectedIndex].value;
document.getElementById('pasteTheValue').innerHTML=SelectedValue ;
}

Using jQuery

$('select').change(function () {
var SelectedValue = $('select').val();
$('#pasteTheValue').innerHTML = SelectedValue;
}

Source: here is a complete tutorial on how to get selected value of dropdown list using javascript

Upvotes: 0

arrigonfr
arrigonfr

Reputation: 742

try this

$(document).ready(function(){
    document.getElementByID('listID').on('change',function(){
        var list  = document.getElementByID('listID');
        var indx = list.selectedIndex;
        document.getElementByID('otherFieldID').val(list[indx].text);
    });
});

Upvotes: 0

Satish Sharma
Satish Sharma

Reputation: 9635

use a textbox with id like this

<input type="text" id="my_textbox" value="" />

Now change in your JS Function

function getSelectedValue(theValue){
 document.getElementById('pasteTheValue').innerHTML=theValue;
 document.getElementById('my_textbox').value=theValue; // add this line
}

UPDATE 2 :

 function getSelectedValue(theValue){
     document.getElementById('my_textbox').value=theValue; // add this line
    }

Upvotes: 1

TBI
TBI

Reputation: 2809

You are inserting selected value from listbox to p tag, if you want to insert that inside of textbox, Use this code -

<input type="text" id="textboxid" value="" />

Now, in your js function - 

function getSelectedValue(theValue){
   document.getElementById('pasteTheValue').innerHTML=theValue; // to insert in p tag
   document.getElementById('textboxid').value=theValue; // to insert inside of textbox
}

Upvotes: 1

wallop
wallop

Reputation: 2581

this jsbin should help you jsbin_example

<select id='selectList' onClick="showSelected(this)">
  <option>list1</option>
  <option>list2</option>
  <option>list3</option>
  <option>list4</option>

  </select>
  <input type="text" id='show' />

function showSelected(thisObj)
{

  document.getElementById('show').value = thisObj.options[thisObj.selectedIndex].text;

}

If you are ok using jquery it should be even more easier

Upvotes: 0

Martin Folkeseth
Martin Folkeseth

Reputation: 317

Hope http://jsfiddle.net/o5xxz67f/ will help. 

$(document).ready(function(){
    $('select').change(function(){
       alert($(this).val()); 
    });
});

Upvotes: 1

Viswanath Donthi
Viswanath Donthi

Reputation: 1821

Consider Dropdown list element id as myDropDown. Now your task can be done as shown below:

$("#myDropDown").change(function(){
   var selectedValue = $(this).val();
   $("#pasteTheValue").val(selectedValue);
});

Upvotes: 0

Related Questions