CODEWITHSUNDEEP
phpjqueryhtmlajaxjquery-ui
user3350885
user3350885

Reputation: 749

Working with text box onchange and ajax load for dropdown jQuery PHP MYSQL

I have to do something like this and here is my code

  1. When start and end date is completed, I need to enable the author select box.
  2. The author names should be dynamically loaded from database based on the start and end date.

My form is ready, and the script is done with my minimal knowledge. Needs some expert help in completing my code.

Any help in doing this will be highly appreciable

<script type="text/javascript">
    $("#to_date_change").change('input',function() {
        $('#author_code').prop('disabled', false);
    });
</script>

<table>
    <thead>
        <tr>
            <th class="text-center">Start Date</th>
            <th class="text-center">End Date</th>
            <th class="text-center">Resources</th>
        </tr>
    </thead>
    <tbody>
        <?php for($i=1; $i<=5; $i++) { ?>
        <tr>
            <td>
                <input class="start_date_change" id="start_date_change" name="from_date_<?php echo $i; ?>" type="text">
            </td>
            <td>
                <input class="end_date_change" id="end_date_change" name="to_date_<?php echo $i; ?>" type="text">
            </td>
            <td class="text-justify" nowrap="nowrap">
                <select disabled="disabled" name="author_code_<?php echo $i; ?>" id="author_code" class="author_code" style="width: 250px;">
                    <option value="">Select Author</option>
                    <?php 
                    // ............. this should come from ajax load based on start and end date ................
                    echo "<option value=".$tbemp[$r][0].">".$tbemp[$r][0]." - ".$tbemp[$r][2]."</option>";
                    // ............. this should come from ajax load based on start and end date ................
                    ?>
                </select>
            </td>
        </tr>
        <?php } ?>
    </tbody>
</table>

Upvotes: 1

Views: 1683

Answers (1)

Ajay Kumar Ganesh
Ajay Kumar Ganesh

Reputation: 1852

Use ajax call to send data and fetch result, use that result to display. 

var start_date,end_date;
//fetch and assign the date to these variables

$.ajax({
    url: "/path/to/script/for/processing",
    type: "post",
    data: {start: start_date,end: end_date}
}).done(function(data){
    //data contains the result returned from the script. 
    // use that data to display.
});

Upvotes: 2

Related Questions