Selecting Dropdown value with onchange

Question

Can you please tell me what I am doing wrong. I am trying to select the new dropdown value. I am trying to verify that I have gopt the new value by calling an alert function where the value outputs as undefined but i am able to select the id just fine. Code is below:

<?php
    require'includes/opendb.php';
    $DNS = $_GET['DNS']
?>
<html>
    <head>

    </head>

    <body>
        <p>
            This section allows you to connect Uplink ports to different switches. Be sure that all the information is correct before you submit.
        </p>
        <form action="" method="post" enctype = "multipart/form-data">
            <table border = 1>
                <tr>
                    <td>DNS From</td>
                    <td>DNS To</td>
                </tr>
                    <?php
                        $DNS_FROM = $DNS."_port-%";
                        $select = "SELECT * FROM `uplink_port_mapping` WHERE DNS_From LIKE '$DNS_FROM'";
                        $select1 = mysqli_query($conn, $select);
                        $select2 = "SELECT DNS_From FROM `uplink_port_mapping` WHERE DNS_From NOT LIKE '$DNS_FROM' AND DNS_To = ''";
                        $select3 = mysqli_query($conn, $select2);
                        $i = 0;
                        while($uplink_from = mysqli_fetch_assoc($select1)){
                            echo "<tr>";
                                echo "<td>".$uplink_from['DNS_From']."</td>";
                                echo "<td>"."<select name = 'uplink_to_".$i."' id = 'uplink_to_".$i."' Onchange = 'dropdown(this)'> 
                                    <option value = '".$uplink_from['DNS_To']."' selected='selected'>". $uplink_from['DNS_To']."</option>";

                                mysqli_data_seek($select3, 0);

                                while($uplink_to = mysqli_fetch_assoc($select3)){
                                    echo "<option value='".$uplink_to['DNS_From']."'>".$uplink_to['DNS_From']."</option>";
                                }
                                echo"</select>";
                                echo"</td>";
                            echo"</tr>";
                            ++$i;
                        }
                    ?>
            </table>
        </form>
    </body>
</html>
<script>
    function dropdown(checkbox){
        var id = checkbox.id;
        var value = checkbox.val;
        alert("You have changed "+id+" to "+value)
    }
</script>

HTML VERSION FROM CHROME SOURCE

<html>
    <head>

    </head>

    <body>
        <p>
            This section allows you to connect Uplink ports to different switches. Be sure that all the information is correct before you submit.
        </p>
        <form action="" method="post" enctype = "multipart/form-data">
            <table border = 1>
                <tr>
                    <td>DNS From</td>
                    <td>DNS To</td>
                </tr>
                    <tr><td>HEPSAN02_port-00</td><td><select name = 'uplink_to_0' id = 'uplink_to_0' Onchange = 'dropdown(this)'> 
                                    <option value = 'HEPSAN5_port-00' selected='selected'>HEPSAN5_port-00</option><option value='HEPSAN03_port-24'>HEPSAN03_port-24</option><option value='HEPSAN1_port-01'>HEPSAN1_port-01</option><option value='HEPSAN1_port-02'>HEPSAN1_port-02</option><option value='HEPSAN4_port-18'>HEPSAN4_port-18</option><option value='HEPSAN4_port-19'>HEPSAN4_port-19</option></select></td></tr><tr><td>HEPSAN02_port-01</td><td><select name = 'uplink_to_1' id = 'uplink_to_1' Onchange = 'dropdown(this)'> 
                                    <option value = 'HEPSAN5_port-01' selected='selected'>HEPSAN5_port-01</option><option value='HEPSAN03_port-24'>HEPSAN03_port-24</option><option value='HEPSAN1_port-01'>HEPSAN1_port-01</option><option value='HEPSAN1_port-02'>HEPSAN1_port-02</option><option value='HEPSAN4_port-18'>HEPSAN4_port-18</option><option value='HEPSAN4_port-19'>HEPSAN4_port-19</option></select></td></tr><tr><td>HEPSAN02_port-02</td><td><select name = 'uplink_to_2' id = 'uplink_to_2' Onchange = 'dropdown(this)'> 
                                    <option value = '' selected='selected'></option><option value='HEPSAN03_port-24'>HEPSAN03_port-24</option><option value='HEPSAN1_port-01'>HEPSAN1_port-01</option><option value='HEPSAN1_port-02'>HEPSAN1_port-02</option><option value='HEPSAN4_port-18'>HEPSAN4_port-18</option><option value='HEPSAN4_port-19'>HEPSAN4_port-19</option></select></td></tr>           </table>
        </form>
    </body>
</html>
<script>
    function dropdown(checkbox){
        var id = checkbox.id;
        var value = checkbox.val;
        alert("You have changed "+id+" to "+value)
    }
</script>

Thanks for any help :)

Rino Raj · Accepted Answer · 2016-03-14 10:21:02Z

1

Changes Made

► var value = checkbox.val; to var value = checkbox.value;

Working Demo

function dropdown(checkbox) {
  var id = checkbox.id;
  var value = checkbox.value;
  alert("You have changed " + id + " to " + value)
}

<p>
  This section allows you to connect Uplink ports to different switches. Be sure that all the information is correct before you submit.
</p>
<form action="" method="post" enctype="multipart/form-data">
  <table border=1>
    <tr>
      <td>DNS From</td>
      <td>DNS To</td>
    </tr>
    <tr>
      <td>HEPSAN02_port-00</td>
      <td>
        <select name='uplink_to_0' id='uplink_to_0' Onchange='dropdown(this)'>
          <option value='HEPSAN5_port-00' selected='selected'>HEPSAN5_port-00</option>
          <option value='HEPSAN03_port-24'>HEPSAN03_port-24</option>
          <option value='HEPSAN1_port-01'>HEPSAN1_port-01</option>
          <option value='HEPSAN1_port-02'>HEPSAN1_port-02</option>
          <option value='HEPSAN4_port-18'>HEPSAN4_port-18</option>
          <option value='HEPSAN4_port-19'>HEPSAN4_port-19</option>
        </select>
      </td>
    </tr>
    <tr>
      <td>HEPSAN02_port-01</td>
      <td>
        <select name='uplink_to_1' id='uplink_to_1' Onchange='dropdown(this)'>
          <option value='HEPSAN5_port-01' selected='selected'>HEPSAN5_port-01</option>
          <option value='HEPSAN03_port-24'>HEPSAN03_port-24</option>
          <option value='HEPSAN1_port-01'>HEPSAN1_port-01</option>
          <option value='HEPSAN1_port-02'>HEPSAN1_port-02</option>
          <option value='HEPSAN4_port-18'>HEPSAN4_port-18</option>
          <option value='HEPSAN4_port-19'>HEPSAN4_port-19</option>
        </select>
      </td>
    </tr>
    <tr>
      <td>HEPSAN02_port-02</td>
      <td>
        <select name='uplink_to_2' id='uplink_to_2' Onchange='dropdown(this)'>
          <option value='' selected='selected'></option>
          <option value='HEPSAN03_port-24'>HEPSAN03_port-24</option>
          <option value='HEPSAN1_port-01'>HEPSAN1_port-01</option>
          <option value='HEPSAN1_port-02'>HEPSAN1_port-02</option>
          <option value='HEPSAN4_port-18'>HEPSAN4_port-18</option>
          <option value='HEPSAN4_port-19'>HEPSAN4_port-19</option>
        </select>
      </td>
    </tr>
  </table>
</form>

edited Mar 14, 2016 at 10:21

answered Mar 14, 2016 at 10:18

Rino Raj

6,2622 gold badges29 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user2417483 Over a year ago

why are you including jQuery?

Rino Raj Over a year ago

@jeff Its out of habit while creating a code snippet. Thanks for pointing it out. I will edit my answer

Deepak Over a year ago

@RinoRaj Yeah.. Just did it.. Thanks btw :)

Collectives™ on Stack Overflow

Selecting Dropdown value with onchange

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related