I am not a jquery guru in any sense, so I am seeking some help with the below code. What I am trying to do, is populate two input fields, based on what is selected from a dropdown field via a database call.

When I select a term from the dropdown, I want the term start date and term end date to populate in the appropriate fields. First here is my form:

<form class="form-horizontal margin-none" action="<?=BASE_URL;?>form/runSection/" id="validateSubmitForm" method="post" autocomplete="off">
                        <div class="control-group">
                            <label class="control-label"><font color="red">*</font> <?php _e( _t( 'Term' ) ); ?></label>
                            <div class="controls">
                                <select style="width:100%;" name="termCode" id="select2_10" required>
                                    <option value="">&nbsp;</option>
                                    <?php table_dropdown('term', 'termCode', 'termName'); ?>
                                </select>
                            </div>
                        </div>

                        <div class="control-group">
                            <label class="control-label"><?php _e( _t( 'Term Start/End' ) ); ?></label>
                            <div class="controls">
                                <input type="text" name="termStartDate" id="termStartDate" disabled class="span6" required />
                                <input type="text" name="termEndDate" id="termEndDate" disabled class="span6" required />
                            </div>
                        </div>

Second here is the javascript section:

<script type="text/javascript">
jQuery(document).ready(function(){
    jQuery('#select2_10').live('change', function(event) {
        $.ajax({
            type    : 'POST',
            url     : '<?=BASE_URL;?>section/runTermLookup/',
            dataType: 'json',
            data    : $('#validateSubmitForm').serialize(),
            cache: false,
            success: function( data ) {
                   for(var id in data) {        
                          $(id).val( data[id] );
                   }
            }
        });
    });
});
</script>

And third, here is the database info. How it works is that the url in the javascript code above is calling a method in a controller called runTermLookup which then routes to a method in the model with the same name.

    public function runTermLookup($data) {
        $bind = array(":term" => $data['termCode']);
        $q = DB::inst()->select( "term","termCode = :term","termID","termStartDate,termEndDate", $bind );
        $r = $q->fetch(\PDO::FETCH_ASSOC);
        $json = array( 'input#termStartDate' => $r['termStartDate'], 'input#termEndDate' => $r['termEndDate'] );
        echo json_encode($json);
    }

Any help with figuring out what I am missing is greatly appreciated. Thank you.

I forgot to mention that the issue is that $_POST['termCode'] (found in the controller and passed to the model) is not passing the data for some reason. If I hardcode the term, it works. For further analysis, I am including the controller's method as well.

    public function runTermLookup() {
        if(!$this->_auth->isUserLoggedIn()) { redirect( BASE_URL ); }
        $data = array();
        $data['termCode'] = isPostSet('termCode');
        $this->model->runTermLookup($data);
    }

Are there no suggestions or do I need to re-word what I am asking for or give more detail?

If you're using Google Chrome, open the page of your script, then open the Javascript Console (CTRL+Shift+J), open the Network tab and try select an option from the form, if the AJAX works fine you will see a POST request, by clicking on the Name (probably the url of the AJAX call), you can see what was sent.

Verify it is not empty and let us know, we will try to help, bye!

Thanks @cereal for giving some direction. I am not exactly sure how to read the output but the status code is a 302 and below is the Form Data output:

courseSection:
termCode:12/FA
deptCode:PSYC
minCredit:3.0
maxCredit:3.0
increCredit:3.0
courseLevelCode:100
acadLevelCode:UG
secShortTitle:Psychology 101
startDate:
endDate:
locationCode:
currStatus:
description:
_wysihtml5_mode:1
courseID:00000001

So, if that is stating that termCode is getting posted, then why can I not retrieve that variable to send it over to the database?

Fixed the problem. I saw that termCode had three different variables for the wrong fields. Once I updated them, it works. Thanks again @cereal for pointing me to using Chrome.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.