CODEWITHSUNDEEP
phpjqueryhtmlmysqlajax
fanboime12
fanboime12

Reputation: 21

How to set html input field value from database query

Here is my button

$( "#editVehicle" ).button().click(function( event ) {

    event.preventDefault();
    var vp = $("input[name=vehicle_plate]").val();

    var dataString = 'vehicle_plate='+ vp;

    $.ajax({
        type: "POST",
        url: "editvehicle.php",
        data: dataString,
        success: function(){
        alert("Success!");
        }
        });

  });

Here is my PHP

<?PHP
include("db.classes.php");
$g = new DB();
$g->connection();

        if($_POST)
            {
                $vehiclePlate = $g->clean($_POST["vehicle_plate"],1);

                $g->edit($vehiclePlate);
            }
$g->close();
?>

And here is my db.classes

public function edit($vehiclePlate)
    {
        $sql = "select vehicle_name from vehicles where vehicle_plate='$vehiclePlate'";

        $result = mysql_query($sql);

        $row = mysql_fetch_array($result);

        echo "<script>

        $(\"input[name=vehicle_model]\").val(".$row['vehicle_name'].");

        </script>
        ";
    }

There is an input field in my html where i input the vehicle plate then when the user clicks the button the program searches the database for the vehicle name with the plate the user entered and returns the value to another inputfield named "vehicle_name". Any idea on where am i going wrong here?

Upvotes: 0

Views: 3650

Answers (1)

Terry
Terry

Reputation: 66103

You should rely on JSON to encode and pass information when making AJAX calls — you encode the information in JSON format in the PHP file you called, send it back to your script and allow it to parse:

public function edit($vehiclePlate)
    {
        $sql = "select vehicle_name from vehicles where vehicle_plate='$vehiclePlate'";
        $result = mysql_query($sql);
        $row = mysql_fetch_array($result);
        echo json_encode($row['vehicle_name']);
    }

However, I usually prefer to echo an array, so that you can pass way more information than just the queried data, e.g. success/error status, and other fields:

public function edit($vehiclePlate)
    {
        $sql = "select vehicle_name from vehicles where vehicle_plate='$vehiclePlate'";
        $result = mysql_query($sql) or die(json_encode(array("error" => 0, "errorMsg" => "MySQL query failed.")));
        $row = mysql_fetch_array($result);
        if(mysql_num_rows($row)) {
            // 1 or more rows are returned
            echo json_encode(array(
                "success" => 1,
                "vehicleName" => $row['vehicle_name'],
            ));
        } else {
            // No rows returned
            echo json_encode(array(
                "error" => 1,
                "errorMsg" => "No rows returned"
            ));
        }

    }

Warning: You should not use mysql_ functions — they are insecure. Use mysqli_ or prepared statements.

After that, you can parse the JSON data with jQuery as a usual object. Remember to declare the dataType property as JSON (even though $.ajax() will attempt to guess intelligently), which is good practice :) 

$("#editVehicle").button().click(function(e) {

    // Prevent default action
    e.preventDefault();

    // You can declare all variables in this scope with on var statement
    var vp = $("input[name=vehicle_plate]").val(),
        dataString = 'vehicle_plate='+ vp;

    // Make magic happen
    $.ajax({
        type: "POST",
        url: "editvehicle.php",
        data: dataString,
        dataType: "json",    // Declare dataType
        success: function(data){
            $("input[name=vehicle_model]").val(data);
        }
    });

});

And if you prefer to use arrays in your JSON data:

    // Make magic happen
    $.ajax({
        type: "POST",
        url: "editvehicle.php",
        data: dataString,
        dataType: "json",    // Declare dataType
        success: function(data){
            if(!data.error && data.success) {
                $("input[name=vehicle_model]").val(data.vehicleName);
            } else {
                alert(data.errorMsg);
            }
        }
    });

Upvotes: 1

Related Questions