How to retrieve data from MySql database based on a dropdown selection and button click?

Question

I am trying to retrieve some data from a MySql database on select change and button click. Data from the resulting row is supposed to be displayed in 2 text boxes in a hidden div, which is shown on button click.

empstatus.php

sql = "select * from mx_party_master";
$result = mysqli_query($db , $sql);
<body>

<?php myNav(); ?> <!-- A function to display a sidebar -->

<div class="container-fluid">
<div class="jumbotron">
<form action="#" method="GET">

<!-- DROPDOWN LIST -->
<select class="form-control" name="selectemp" id="selectemp">
<option  value="">Select Party..</option>
<?php while($res= mysqli_fetch_assoc($result)){ ?>
<option value="<?php $res['KUNNR']; ?>"><?php echo $res['KUNNR'].' 
'.$res['NAME1']; ?></option>
<?php }?>
</select>
<br>

<!-- BUTTON TO SHOW THE HIDDEN DIV AND RETRIEVE DATA FROM THE DATABASE -->
<button type="button" class="btn btn-lg btn-dark" name="subemp" 
id="subemp">Search</button>

<!-- DIVISION WITH INPUT FIELDS WHERE DATA IS TO BE DISPLAYED-->    
<div class="hiddendiv" style="display: none;">
<label for="open">Open Order: </label>
<input type="text"  class="form-control" name="open" id="open"/>
<br>
<label for="open">Open Delivery: </label>
<input type="text"  class="form-control" name="opendel" id="opendel" />
</div>

</form>
</div>
</div>
</body>

<!-- AJAX CODE -->

<script>
$(document).ready(function () {
    (function ($) {
        $('#selectemp').change(function () {
            $('#subemp').click(function(){
                $('.hiddendiv').toggle();

                    $.ajax({
                        type: "POST",
                        url: "empstatest.php",
                        dataType: 'JSON',
                        data: $('#selectemp').serialize()
                    }).done(function (data) {
                        $('#open').val(data.ordblock); <!-- I'M SURE I'M DOING THIS WRONG -- >
                        $('#opendel').val(data.ordblock);
                    });
            });
        });
    })(jQuery);
});
</script>

empstatest.php

<?php
session_start();
header('Content-type: application/json');
$db = mysqli_connect("credentials");

$value =  $_POST['selectemp'];
$sql = "select ordblock, delblock from mx_crlimit where kunnr = '$value'";
$res = pg_query($db, $sql);
$is = '';
$data = pg_fetch_assoc($res);
$is = json_encode($data);
echo $is;
?>

I'm new to Jquery and there's probably something wrong the ajax code, especially where I'm trying to display the data in the input field. Kindly help me solve this issue.

You're not showing what is happening, how do we know what is wrong? What result are you getting, where are you sending it? But one thing that is not helping you is that your form method is set to GET and you are trying to access the POST, so I suspect your variables are unassigned — imposterSyndrome
– imposterSyndrome, Commented Mar 12, 2019 at 12:11
For a start, empstatest.php is not sending anything back to the AJAX call. Add a echo $is; after the last line — RiggsFolly
– RiggsFolly, Commented Mar 12, 2019 at 12:12
That's all the code I have written sir. I'm getting no output. Only the input fields are getting displayed. — melonhusk
– melonhusk, Commented Mar 12, 2019 at 12:13
Where is your jQuery code and what output are you getting when you console log a response? — imposterSyndrome
– imposterSyndrome, Commented Mar 12, 2019 at 12:18

Professor Abronsius · Accepted Answer · 2019-03-12 13:10:14Z

The problem, I believe, is that you have declared the dataType as JSON but you are, in fact, simply sending a string. If you omit the dataType entirely it works though processing the response ( and I don't use jQuery ) did not appear to work without further fudging - I added JSON.parse( data )

With luck the following demo will illustrate these changes and allow you to get your code working.

<?php
    /* this emulates the remote script ( empstatest.php ) */
    if( $_SERVER['REQUEST_METHOD']=='POST' ){
        ob_clean();

        /* payload to emulate db call */
        $data=new stdClass;
        $data->ordblock=sprintf( 'ord-%d-%s', $_POST['selectemp'], uniqid() );  #randomness abounds!

        exit( json_encode( $data ) );
    }   
?>
<html>
    <head>
        <title></title>
        <script src='//code.jquery.com/jquery-latest.js'></script>
        <script>
            let url=location.href;/*empstatest.php*/

            $( document ).ready(function () {
                ( function($) {
                    $('#selectemp').change(function () {
                        $('#subemp').click(function(){
                            $('.hiddendiv').toggle();
                            $.ajax({
                                type:'POST',
                                url:url,
                                data: $('#selectemp').serialize(),
                                success:function( data ){
                                    let json=JSON.parse( data );
                                    $('#open').val( json.ordblock );
                                    $('#opendel').val( json.ordblock );
                                }
                            });
                        });
                    });
                })(jQuery);
            });
        </script>
    </head>
    <body>
        <select name='selectemp' id='selectemp'>
            <option selected hidden>Select
            <?php
                for( $i=1; $i<=20; $i++ )printf('<option value=%d>Option - %d',$i,$i);
            ?>
        </select>

        <button type='button' class='btn btn-lg btn-dark' id='subemp'>Search</button>

        <div class='hiddendiv' style='display: none;'>
            <label for='open'>Open Order: </label>
            <input type='text'  class='form-control' name='open' id='open'/>
            <br>
            <label for='open'>Open Delivery: </label>
            <input type='text'  class='form-control' name='opendel' id='opendel' />
        </div>

    </body>
</html>

Collectives™ on Stack Overflow

How to retrieve data from MySql database based on a dropdown selection and button click?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related