Retrieve and print data to textboxes from mysql DB using ajax

Question

I have the following text fields:

<input type="text" name="empid" id="empid" tabindex="1" onblur="getname()">
<input type="text" name="name" id="name" tabindex="2"/>
<input type="text" name="city" id="name" tabindex="3"/>
<input type="text" name="state" id="name" tabindex="4"/>

and database table is:

empid       name     city        state
EMP471      BBB      bbbbb       cccccc
EMP444      AAA      xxxx        yyyyyy

I'm new to php. I found some code on internet to retrieve data. but its not working.

Ajax code is:

function getname() {
    var id=$("#id").val();   
    $.ajax({
        type:"post",
        dataType:"text",
        data:"id="+id,
        url:"getinsdata.php",   
        success:function(response)
        { 
            $("#name").val(response.name);   
            $("#city").val(response.city); 
            $("#state").val(response.state); 
        }
    });
}

and php code is

<?php
    include 'connection.php';
    $id=$_POST['id'];
    $id=$_POST['id'];
    $query=mysql_query("select name,city,state from ins_master where id=$id");
    $result=mysql_fetch_row($query);
    echo $result[0];   
    exit;
?>

when we select the empid then the respective name, city, state should be shown in textboxes when onblur event fires in PHP using AJAX.

Stack Overflow is not a code writing service. We are always glad to help and support new coders but you need to help yourself first. You are expected to try to write the code yourself. Please read How to create a Minimal, Complete, and Verifiable example. — user8034901
– user8034901, Commented Aug 29, 2018 at 6:50
Possible duplicate of fetching data from database and display it using ajax — Sinto
– Sinto, Commented Aug 29, 2018 at 6:52
Where is getinsdata.php? Is it direct in the root of your website (which is probably localhost)? I would expect to see a path there — Mawg
– Mawg, Commented Aug 29, 2018 at 7:32
getinsdata.php is in the root folder only(both files are in same path). — Seetha Ramanjaneyulu Mallipudi
– Seetha Ramanjaneyulu Mallipudi, Commented Aug 29, 2018 at 7:36

Dice · Accepted Answer · 2018-08-29 07:40:00Z

1

What are you trying to achieve? Send the datas and get the response according to a query? Get some datas?

I'd go

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</head>
<body>
<form id="test" method="POST">
<input type="text" id="name" required minlength="5" name="name"/>
<input type="password"  id="pw" required name="pw"/>
<input id ="sub" type="submit"/>
</form>
<div id="answer"></div>
</body>
<script>
    $("#sub").click(function(event){
        event.preventDefault();
        query = $.post({
            url : 'check_ajax.php',
            data : {'name': $('input[name=name]').val(), 'pw': $('#pw').val()},
        });
        query.done(function(response){
            $('#answer').html(response);
        });
    });
</script>

This is check_ajax.php :

<?php
var_dump($_POST);

?>

in the second file but that's where you're supposed to do your query and insert/select

As people said we don't write code but give clues and since it's basics/fundamentals I can't help more cause you have to understand. Copy paste ain't a great idea

answered Aug 29, 2018 at 7:40

Dice

2351 silver badge9 bronze badges

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

12 Comments

Dice Over a year ago

I don't do that. I'm really new to programming but I don't have those really bad habits and try to make simple/understandable code . Try to start with good manners/habbits. I did use a lot of var_dump or echo/console.log a variable but mostly to check received posts

Dice Over a year ago

I only show them until I'm done with a single functionalty. I work as units. once it's good I dd (vim key on VSC) the same 1 line (dump post), sometimes I dump session too

Mawg Over a year ago

As you say that you are "really new to programming" are you aware of our code review site? When your code is working and debugged, you can code there and get feedback from others about your coding style, problems you may have missed, efficiency, etc

Dice Over a year ago

I def need to have a look and post some code there. I have quite a harsh teacher who virtualy killed 80% of students in my class on first semester cause of bad logic and the others where asked to see how I code xD

Dice Over a year ago

Even if I'm new I don't seem to lack of logic, teacher actualy ask people to come by me so they have a hint on how to code. I could show some projects I did in php/js. So far I've made a Chessboard game in Node.JS, a veterinary office consultations/appointments website (php/sql/ajax), and a music_player w/ playlists/pro and non pro artists on the model of Deezer

|

Nipun · Accepted Answer · 2019-03-12 13:17:50Z

Try this html

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

    <script type="text/javascript">
        function getname(val) {
            $.ajax({
                url: 'getinsdata.php',
                type: 'POST',
                data: 'state_id='+val,
                dataType: 'json',
                success:function(data){
                    var len = data.length;
                    if(len > 0){
                        var id = data[0]['id'];
                        var name = data[0]['name'];
                        var city = data[0]['city'];
                        var state = data[0]['state'];

                        document.getElementById('name').value = name;
                        document.getElementById('city').value = city;
                        document.getElementById('state').value = state;    
                    }
                }
            });
        }
    </script>
</head>
<body>

    <form method="post">
        <input type="text" name="empid" id="empid" tabindex="1"  onblur="getname(this.value);">
        <input type="text" name="name" id="name" tabindex="2"/>
        <input type="text" name="city" id="city" tabindex="3"/>
        <input type="text" name="state" id="state" tabindex="4"/> 

    </form>
</body>
</html>

and getinsdata.php is

<?php
    include('connection.php');
    $id = $_POST['state_id'];
    $sql = "SELECT * FROM ins_master WHERE id='$id'";

    $result = mysqli_query($conn,$sql); 

    $users_arr = array();

    while( $row = mysqli_fetch_array($result) ){
        $id = $row['id'];
        $name = $row['name'];
        $city = $row['city'];
        $state = $row['state'];
        $users_arr[] = array("id" => $id, "name" => $name, "city" => $city, "state" => $state);
    }

    // encoding array to json format
    echo json_encode($users_arr);
    exit;
?>

And your connection.php

<?php
$username = "";
$password = "";
$dbname = "";
    $conn = mysqli_connect("localhost",$username,$password,$dbname);
    if(!$conn){
        die("Error in Connecation");    
    }
?>

put $dbname= your database name

Collectives™ on Stack Overflow

Retrieve and print data to textboxes from mysql DB using ajax

2 Answers 2

12 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

12 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related