Help with on change javascript

[padders01]

Why doesn't the onchange script work?

Can anyone help me please?

When you user selects Internal Transfer or External Transfer from the Resolution drop down then it should bring another drop down

http://jsfiddle.net/m8ck7/2/

[jscheuer1]

setStates() is not defined.

[padders01]

Hi,

Thanks for your reply

The set states drop down works on my webpage

It's the "Resolution" drop down that is not working

I've updated the jsfiddle to show just the part I am looking at

http://jsfiddle.net/m8ck7/9/

[Strangeplant]

The problem is that your onchange call is not a function. 'display' is not used correctly, but you can use a javascript function here that will alter your display properties of the blocks that you have turned off like this:

    <select name="Resolution" id="resolution" onchange="document.getElementById('InternalTrans').style.display='inline';document.getElementById('ExternalTrans').style.display='inline';">

Please do not use spaces in an id, name or class!

The balance with some corrections is:

	      <option value=""></option>
      <option value="Advised of Correct Contact Number">Advised of Correct Contact Number</option>
      <option value="Call back Arranged">Call back Arranged</option>	
	  <option value="Customer Calling Back">Customer Calling Back</option> 
	  <option value="External Transfer">External Transfer</option> 
	  <option value="Internal Transfer">Internal Transfer</option>   
      <option value="Resolved - Completed on Call">Resolved - Completed on Call</option>     
    </select>
  </label></td>
</tr>
<tr>
    <tbody id="InternalTrans" style="display: none;">
  <td style="text-align: left;">Internal Transfer: </td>
  <td style="text-align: left;">
   <label>
    <select name="Internal Transfer" id="InternalTransfer">
      <option value="Claims">Claims</option>
      <option value="Customer Relations">Customer Relations</option>
      <option value="Team Manager">Team Manager</option>
      <option value="The Fraud Team">The Fraud Team</option>
      <option value="Customer Service Agent">Customer Service Agent</option>
    </select>
  </label></td>
    </tbody>
</tr>
      <tr>
    <tbody id="ExternalTrans" style="display: none;">
  <td style="text-align: left;">External Transfer: </td>
  <td style="text-align: left;"><label>
    <select name="External Transfer" id="ExternalTransfer">
      <option value="Claims">Claims</option>
      <option value="Customer Relations">Customer Relations</option>
      <option value="Team Manager">Team Manager</option>
      <option value="The Fraud Team">The Fraud Team</option>
      <option value="Customer Service Agent">Customer Service Agent</option>
    </select>
  </label></td>
    </tbody>
</tr>
</table>

See http://jsfiddle.net/m8ck7/19/

There are many many things you can do to make the selections change depending on previous actions with javascript. For reference, see http://www.javascriptkit.com/javatut...tcontent.shtml

Hope this helps.

[padders01]

Hi,

Thanks for your reply

I nearly works, but it brings both drop down menus when you select Internal Transfer not just the Internal Transfer and vice versa for External Transfer

[Strangeplant]

Sorry, I guess I thought you could figure out what you wanted to do from the example. Try this out:http://jsfiddle.net/m8ck7/25/ Just added some javascript. Personally, I like to call a function and place all of the javascript logic there, but I wrote it in-line so you could see easier what is going on. I added two lines to change the blocks to display='none' if it is not envoked, that way, the user could change their mind on the selection and the proper block will show/hide.
Again, I removed spaces from the tested option values (it can be anything, zxy123, etc), since only the associated text is displayed.

<select name="Resolution" id="resolution" onchange="
var e = document.getElementById('resolution'); 
var v = e.options[e.selectedIndex].value; 
if (v == 'InTran') {
     document.getElementById('InternalTrans').style.display='inline';
     document.getElementById('ExternalTrans').style.display='none';
}
else if (v == 'ExTran') {
     document.getElementById('ExternalTrans').style.display='inline';
     document.getElementById('InternalTrans').style.display='none';
}">

[padders01]

That's brilliant, thanks for your help