Question

I am using dialog to display a form and echo back message on submission. That works well. I also have a dropdown menu that on selection of value from that populates 2nd dropdown. This works well on it’s own, but if I try to merge the two, then the div id=”divId” is not being displayed or populated from the change. Now i will be the first to admit that my jQuery knowledge is basic to say the least, so I would appreciate any help from the experts. I have included code for your attention and await your comments. Thanks

This code is in seperate function.js

// Function to add box

function addbox() {

    $("#boxaddform").dialog({
        autoOpen: false,
        resizable: true,
        modal: true,
        title: 'Submit a box intake request',
        width: 470,
        beforeclose: function (event, ui) {
            $("#addbox").html("");

        }

    });

    $('#boxsubmit').click(function () {

        var box = $('.box').val();
        var service = $('#service').val();
        var authorised = $('.authorised').val();
        var data = 'box=' + box + '&authorised=' + authorised + '&service=' + service;
        $.ajax({
            type: "POST",
            url: "boxesadd.php",
            data: data,
            success: function (data) {
                $("#boxform").get(0).reset();
                $('#addbox').html(data);
                //$("#form").dialog('close');
                $("#flex1").flexReload();

            }
        });
        return false;

    });

    $("#boxaddform").dialog('open');

}

html

<script language="javascript" type="text/javascript">
      $(function() {
            $("#company").change(function() {
              if ($(this).val()!="") $.get("getOptions.php?customer=" + $(this).val(), function(data) {
                $("#divId").html(data);
                });
              });
      });
</script>

<!--- Form to add box -->

<div id="boxaddform" style="display:none;">
  <form id="boxform" method="post" class="webform" name="boxform" />

        <label for="company">Select a Company:</label>
                <select name="company" id="company" />
                    <option SELECTED VALUE="">Select a Company</option>
                        <?php
                                do {  
                                ?>
                    <option value="<?php echo $row_Recordsetcust['customer']?>"><?php echo $row_Recordsetcust['customer']?></option>
                        <?php

                    } 
                                while ($row_Recordsetcust = mysql_fetch_assoc($Recordsetcust));
                                $rows = mysql_num_rows($Recordsetcust);
                if($rows > 0)

                    {
                                mysql_data_seek($Recordsetcust, 0);
                                $row_Recordsetcust = mysql_fetch_assoc($Recordsetcust);
                    }

                ?>
            </select><br />
            <div id="divId"></div><br />
        <label for="service">Enter service level:</label>
                <select name="service" id="service">
                    <option SELECTED VALUE="">Select an option</option>
                    <option value="Standard">Standard</option>
                    <option value="Rapid">Rapid</option>
                </select>
                <br />
        <label for="box">Enter a Box#:</label>
                <input id="box" name="box" type="text" class="text ui-widget-content ui-corner-all inputbox box" />

        <label for="authorised">Requested By:</label>
                <input name="authorised" type="text" class="text ui-widget-content ui-corner-all inputbox authorised" id="authorised" value="<?php echo $_SESSION['kt_name_usr']; ?>" /><br />
    <div id="addbox"></div>
      <button id="boxsubmit" class="submit">Submit</button>
  </form>
</div>

getOptions.php

<?php
    $customer = mysql_real_escape_string( $_GET["customer"] ); // not used here, it's the customer choosen

    $con = mysql_connect("localhost","root","");
    $db = "sample";
      if (!$con)
        {
        die('Could not connect: ' . mysql_error());
        }

        mysql_select_db($db, $con);
        $query_rs_select_address2 = sprintf("SELECT * FROM company_com where idcode_com = '$customer'");
        $rs_select_address2 = mysql_query($query_rs_select_address2, $con) or die(mysql_error());
        $row_rs_select_address2 = mysql_fetch_assoc($rs_select_address2);
        $totalRows_rs_select_address2 = mysql_num_rows($rs_select_address2);



          echo 'Select delivery address'.'<select name="customeraddress">';
          echo '<option value="">Select delivery address</option>';
          while ($row_rs_select_address2 = mysql_fetch_assoc($rs_select_address2))
          {
          $address=$row_rs_select_address2['address1_com']. " ".
          $row_rs_select_address2['address2_com']. " ".
          $row_rs_select_address2['address3_com']. " ".
          $row_rs_select_address2['town_com']. " ".
          $row_rs_select_address2['postcode_com'];
          echo '<option
          value="address">'.$address.'</option>';
          }
          echo '</select>';
?>

Answer 1

Try putting this

$("#company").live('change', function() {
  if ($(this).val()!="") $.get("getOptions.php?customer=" + $(this).val(), function(data)  {
    $("#divId").html(data);
  });
});

in the first part of the scripts that you provided.

My idea is that maybe the change handling code is not capturing the dropdown and is not runned at all.
In order to test that put alert(‘test’); inside your current $(“#company”).change(function(){…}); block.