Results 1 to 7 of 7

Thread: Help with on change javascript

  1. #1
    Join Date
    Apr 2014
    Posts
    19
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default Help with on change javascript

    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/

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    setStates() is not defined.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Apr 2014
    Posts
    19
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    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/

  4. #4
    Join Date
    Feb 2006
    Posts
    236
    Thanks
    8
    Thanked 3 Times in 3 Posts

    Default Javascript in onChange

    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:
    Code:
        <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:
    Code:
    	      <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.
    Last edited by Strangeplant; 07-24-2014 at 01:31 PM. Reason: added Fiddle

  5. #5
    Join Date
    Apr 2014
    Posts
    19
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    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

  6. #6
    Join Date
    Feb 2006
    Posts
    236
    Thanks
    8
    Thanked 3 Times in 3 Posts

    Default

    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.

    Code:
    <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';
    }">
    Last edited by Strangeplant; 07-25-2014 at 12:27 PM.

  7. The Following User Says Thank You to Strangeplant For This Useful Post:

    padders01 (07-25-2014)

  8. #7
    Join Date
    Apr 2014
    Posts
    19
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    That's brilliant, thanks for your help

Similar Threads

  1. Change the right things in CSS with Javascript
    By [Nicolas] in forum JavaScript
    Replies: 2
    Last Post: 03-09-2011, 01:47 AM
  2. change the 'src' value using javascript
    By grglaz in forum JavaScript
    Replies: 3
    Last Post: 01-07-2008, 03:15 AM
  3. useing php to change javascript var
    By armasmike in forum PHP
    Replies: 2
    Last Post: 01-02-2008, 10:56 AM
  4. Change CSS onload with javascript
    By theDude5B in forum JavaScript
    Replies: 0
    Last Post: 04-13-2006, 09:42 AM
  5. Replies: 1
    Last Post: 06-18-2005, 07:19 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •