selectedIndex and text input 1

twospoons · Jun 12, 2003

hello all,

i have a page with a <select> and an <input type="text">

i am trying to write a little javascript that uses the onchange of each item to update the other based on user input. example, when the user clicks on an item in the select box the value of the text box changes, and if the user types something in the text box the selectedIndex of the select changes. i've got the select box changing the text box value, but i can't get the text box to change the select. any ideas?

code:

<script language="javascript">
function update_code(new_value) {
// alert(new_value);
window.document.transaction_code.transaction_code.value = new_value;
}

function update_description(new_value) {
// alert(new_value);
window.document.transaction_code.transaction_code.FindByValue(new_value).Selected = true;
}
</script>

<form name="transaction" action="somepage" method="post">
<select name="transaction_description" size="8" onchange="update_code(window.document.transaction.transaction_description.options[selectedIndex].value);">
<option value="N">Normal Order</option>
<option value="B">Bill Only</option>
<option value="D">Drop Ship</option>
<option value="R">Credit Memo - Return</option>
<option value="E">Credit Memo - Error</option>
<option value="A">Credit Memo - Adjustment</option>
<option value="S">Stickers Only</option>
<option value="T">Test Invoice</option>
</select>

<input type="text" name="transaction_code" value="" size="3" maxlength="1" onchange="update_description(window.document.transaction.transaction_code.value);">

</form>

sergeiY · Jun 12, 2003

you misspeled form reference ...

window.document.transaction_code.transaction_code.value
document.transaction.transaction_code.value

and also you don't need to refer to window object it works without no problemos

I played with your code a bit but you should be able to see what was wrong from here

Sergei
**************************************************

Code:

<!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot;>

<html>
<head>
	<title>Untitled</title>
<script language=&quot;javascript&quot;>
  function update_code() 
  {
    document.transaction.transaction_code.value = document.transaction.transaction_description.options[document.transaction.transaction_description.options.selectedIndex].value;
  }

  function update_description(new_value) 
  {
    // alert(new_value);
    document.transaction.transaction_code.FindByValue(new_value).Selected = true;
  }
</script>

</head>

<body>



<form name=&quot;transaction&quot; action=&quot;somepage&quot; method=&quot;post&quot;>
  <select name=&quot;transaction_description&quot; size=&quot;8&quot; onchange=&quot;update_code();&quot;>
    <option value=&quot;N&quot;>Normal Order</option>
    <option value=&quot;B&quot;>Bill Only</option>
    <option value=&quot;D&quot;>Drop Ship</option>
    <option value=&quot;R&quot;>Credit Memo - Return</option>
    <option value=&quot;E&quot;>Credit Memo - Error</option>
    <option value=&quot;A&quot;>Credit Memo - Adjustment</option>
    <option value=&quot;S&quot;>Stickers Only</option>
    <option value=&quot;T&quot;>Test Invoice</option>
  </select>

  <input type=&quot;text&quot; name=&quot;transaction_code&quot; value=&quot;&quot; size=&quot;3&quot; maxlength=&quot;1&quot;>

</form>


</body>
</html>

**************************************************

twospoons · Jun 13, 2003

i'm not sure what help your response is sergeiY (but thanks for trying)... the update_code() function was already working for me (that was just a typo in the post, sorry - document.transaction.transaction_code.value). I can't get the update_description() to work.

i need a function that takes a value from the text box and automatically highlights the corresponding element in the select box.

<input type="text" name="transaction_code" value="" size="3" maxlength="1" onchange="update_description(window.document.transaction.transaction_code.value);">

sergeiY · Jun 15, 2003

well I've tried to run your code and it was failing so I found a spelling mistake

now

this bit will never work:

Code:

document.transaction.transaction_code.FindByValue(new_value).Selected = true;

as you don't have a FindByValue field on your form

what I suggest u do is this:

run a loop over all elements in your dropdown and check if current value is eqal to your passed in value and then make it selected

something along these lines:

Code:

var maxLenght;
maxLenght = document.transaction.transaction_description.options.lenght;

for(i=0; i< maxLenght; i++)
{
  curValue = document.transaction.transaction_description.options[i].value;
  if(currValue == passedInValue)
  {
     document.transaction.transaction_description.options[i].selected= true;
     break;
  }
}

hope this will help

Sergei

twospoons · Jun 16, 2003

SWEET! thanx for the help.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

selectedIndex and text input 1

twospoons

IS-IT--Management

sergeiY

Programmer

twospoons

IS-IT--Management

sergeiY

Programmer

twospoons

IS-IT--Management

Similar threads

Part and Inventory Search

Sponsor