loading ajax value in html input field

Question

I have a dropdown with content )Course Title) from the database in the index.php file. I get dropdown selected data and send it to a PHP file. In PHP file using received (Course Title), I select related Course (Start Date) and (End Date) and send them to a PHP file using AJAX.

I have two input tags of type text, which I want its value to be related (Start Date) and (End Date) when users click a course title.

When I show the received (Start Date) and (End Date) in a div it is showing well, but when I want to set the values of input tags relatively start_date and end_date it is not showing anything.

I am new in ajax and jquery and don't know what is problem

following is my index.php

<!DOCTYPE html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<form method="post" action="insert.php">
    <select name="training_title" id="dropdownList"">
        <option value=""></option>
        <?php
        require('db.php');
        $sql = "SELECT distinct(COURSE_TITALE) FROM [MicrosoftDynamicsAX].[dbo].[ETIS_Course_Final]";
        $params = array();
        $options = array("Scrollable" => SQLSRV_CURSOR_KEYSET);
        $stmt = sqlsrv_query($conn, $sql, $params, $options);
        $row_count = sqlsrv_num_rows($stmt);
        if ($row_count === false)
            echo "Error al obtener datos.";
        else
            while ($row = sqlsrv_fetch_array($stmt)) {
                ?>
                <option name="training_title" value="<?php echo $row[0]; ?>"><?php echo $row[0]; ?></option>
                <?php
            }
        sqlsrv_close($conn);
        ?>
    </select>
    <input type="text" name="start_data" id="start_data" value="">
    <input type="text" name="end_date" id="end_date" VALUE="">
    <button type="submit" name="submit" id="submit"> Submit</button>
</form>
<div id="result"></div>
<script>
    $(document).ready(function () {
        $('#dropdownList').on('change', function () {
            var val1 = $("#dropdownList option:selected").val();
            $.ajax({
                type: 'POST',
                url: 'test.php',
                data: {text1: val1},
                success: function (response) {
                    $('#result').html(response);
                }
            });
        });
    });
</script>
</body>

and following is test.php file

    <?php
$text1 = $_POST['text1'];

require('db.php');
$sql = "SELECT distinct(STARTDATETIME) FROM [MicrosoftDynamicsAX].[dbo].[ETIS_Course_Final] where COURSE_TITALE='$text1'";
$params = array();
$options = array("Scrollable" => SQLSRV_CURSOR_KEYSET);
$stmt = sqlsrv_query($conn, $sql, $params, $options);
$row_count = sqlsrv_num_rows($stmt);

if ($row_count === false)
    echo "Error.";
else
    while ($row = sqlsrv_fetch_array($stmt)) {
        echo $row['STARTDATETIME']->format('d/m/y');
    ?>
        <?php
    }
$sql1 = "SELECT distinct(ENDDATETIME) FROM [MicrosoftDynamicsAX].[dbo].[ETIS_Course_Final] where COURSE_TITALE='$text1'";
$params1 = array();
$options1 = array("Scrollable" => SQLSRV_CURSOR_KEYSET);
$stmt1 = sqlsrv_query($conn, $sql1, $params1, $options1);
$row_count = sqlsrv_num_rows($stmt1);

if ($row_count === false)
    echo "Error.";
else
    while ($row = sqlsrv_fetch_array($stmt1)) {
        echo $row['ENDDATETIME']->format('d/m/y');
    ?>
        <?php
    }
sqlsrv_close($conn);

"when I want to set the values of input tags relatively start_date and end_date it is not showing anything"...where in the code are you doing that? I don't see any attempt to create or populate any input tags. Did you try? If so, please show your attempt and then maybe we can fix it. Without seeing the code, it isn't 100% clear what you wanted to do, or what the problem is. Thanks — ADyson
– ADyson, Commented Dec 2, 2019 at 12:04
"when I want to set the values of input tags relatively start_date and end_date it is not showing anything." Can you explaine ? — Simone Rossaini
– Simone Rossaini, Commented Dec 2, 2019 at 12:29
actually I want to Get Content in text field dynamically, based on the dropdown selection — azim
– azim, Commented Dec 2, 2019 at 12:46
success: function (response) { $('#start_date').val(response); } — azim
– azim, Commented Dec 2, 2019 at 12:48

Kishan · Accepted Answer · 2019-12-02 13:03:44Z

1

You have to return two values from test.php so it's better to use json return.Check below code :

$(document).ready(function () {
    $('#dropdownList').on('change', function () {
        var val1 = $("#dropdownList option:selected").val();
        $.ajax({
            type: 'POST',
            url: 'test.php',
            data: {text1: val1},
            dataType : 'json',
            success: function (response) {
                $('#start_data').val(response.STARTDATETIME);
                $('#end_date').val(response.ENDDATETIME);
            }
        });
    });
});

and below is test.php code :

    <?php
    $text1 = $_POST['text1'];
    $return_array = array('status'=>false,'STARTDATETIME'=>'','ENDDATETIME'=>'');
    require('db.php');
    $sql = "SELECT distinct(STARTDATETIME) FROM [MicrosoftDynamicsAX].[dbo].[ETIS_Course_Final] where COURSE_TITALE='$text1'";
    $params = array();
    $options = array("Scrollable" => SQLSRV_CURSOR_KEYSET);
    $stmt = sqlsrv_query($conn, $sql, $params, $options);
    $row_count = sqlsrv_num_rows($stmt);
    if ($row_count === false){
        //"Error.";
    }
    else{
        while ($row = sqlsrv_fetch_array($stmt)) {
            $return_array['STARTDATETIME'] =  $row['STARTDATETIME']->format('d/m/y');
            $return_array['status'] = true;
        }
    }

    $sql1 = "SELECT distinct(ENDDATETIME) FROM [MicrosoftDynamicsAX].[dbo].[ETIS_Course_Final] where COURSE_TITALE='$text1'";
    $params1 = array();
    $options1 = array("Scrollable" => SQLSRV_CURSOR_KEYSET);
    $stmt1 = sqlsrv_query($conn, $sql1, $params1, $options1);
    $row_count = sqlsrv_num_rows($stmt1);
    if ($row_count === false){
        //"Error.";
    }
    else{
        while ($row = sqlsrv_fetch_array($stmt1)) {
            $return_array['ENDDATETIME'] = $row['ENDDATETIME']->format('d/m/y');
            $return_array['status'] = true;
        }
    }
    sqlsrv_close($conn);
    echo json_encode($return_array);
    exit;
?>

answered Dec 2, 2019 at 13:03

Kishan

7934 silver badges10 bronze badges

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

8 Comments

ADyson Over a year ago

The only flaw in this is setting $return_array['status'] = true; in two different places. Just because it's true in one place doesn't make it true in the other place. Also, what's the purpose of this variable, even? It will be obvious to the calling code if any of the values are missing. Otherwise, this is a good approach.

Kishan Over a year ago

status is used if we want to display error at front side when there is no data in database.

ADyson Over a year ago

yes but, the front side can simply check if the date fields are null or not. A separate status isn't needed for that. Either that or, the server should return an appropriate HTTP error status code (which is a more RESTful solution). But anyway, your approach would not fulfil the requirement. For example if there is no "start" date, but an "end" date exists, status would still be true (and the same in the opposite case), so even if you want to use it, it doesn't do the job correctly

Kishan Over a year ago

If end date is exist then we can display it in end date input right? And you can change response as you want now just requirements to fulfil.

ADyson Over a year ago

yes, of course, but the requirements imply that there should be both dates present in every case. Anyway, we're getting off the main topic. It was a side issue I pointed out.

|

Collectives™ on Stack Overflow

loading ajax value in html input field

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related