CODEWITHSUNDEEP
phpjavascriptjqueryhtmlajax
user2417250
user2417250

Reputation: 19

Preset the values of a form with data from a database

I have a form in a web (build with html). Let's say that I have some values for the form that can change, so I store them in a database. What I want to do is that everytime that an user goes to the page where the form is, the data from the database has to be read and the form has to be filled with that information (For example, I have a field for an e-mail, so I want to fill it with the e-mail I have in the database).

I've been looking for a way to do this, but I have not found any that I really "like". The only way I can do it is by doing an AJAX request on javascript to a PHP script, where I connect to the DB and get the data. Once I get it, I modify the whole form via Javascript, but I'm not really sure if it is safe enough.

Any ideas of how to do it in a different way or how to do it safely enough?

Thank you very much.

Upvotes: 1

Views: 1574

Answers (3)

Greg
Greg

Reputation: 21909

My solution allows arbitrary HTML input elements and database fields to be linked up. This code can be placed into a reusable function for any case where you need this.

Name the database fields the same as the HTML form elements' name attributes. Then you'll be able to do something like the following:

<!doctype html>
<form>
    <input name="email" />
    <input name="age" />
    <input name="website" />
</form>

In PHP, read the HTML file's contents into the DomDocument constructor:

$dom = new DomDocument(file_get_contents("MyPage.html"));

Then you can obtain a DomNodeList of all the input elements, simply with:

$xpath = new DomXPath($dom);
$nodeList = $xpath->query("//form/input");

Let's assume your database data is represented in an associative array called $data:

$data = $mysql->query("yourQuery");
foreach($nodeList as $node) {
    $key = $node->getAttribute("name");
    if(array_key_exists($key, $data)) {
        $node->setAttribute("value", $data[$key]);
    }
}

Then you can render the page as usual, by outputting the DOM to the browser.

BONUS: When saving form data into the database, because the HTML input fields' names match the database field names, you can pass the $_POST array to your DAL.

Upvotes: 3

Angel-Of-Death
Angel-Of-Death

Reputation: 46

I would use a JQuery ( jquery.com ) and JEasyUI ( www.jeasyui.com ) solution here, as I already have those frameworks installed... (It sounds like you already have JQuery installed, since your using AJAX). JEasyUI makes this realy easy...

  1. In HTML, create your form element: 
    <!doctype html> 
<form> 
    <input name="email" /> 
    <input name="age" /> 
    <input name="website" />
</form>

  2. In the javascript file, start with:

    
$(document).ready(function(){

});

or

$(function($){

});

  3. In your main function, select the from with JQuery and create a JEasyUI form component 

    $('form').form();

  4. Then, populate the form with your data (Must be an object):

    $('form').form('load',{
    email:'[email protected]',
    age:5,
    website:'http://stackoverflow.com'
});

or

$.ajax({
    url: "getData.php?",
    type: "GET",
    dataType: "json",
    success: function(json_data) {
        $('form').form('load', json_data);
    }
});

  5. Finally your JS should look like this:

    
$(document).ready(function(){
    $('form').form('load',{
        email:'[email protected]',
        age:5,
        website:'http://stackoverflow.com'
    });
});

or

$(function($){
    $.ajax({
        url: "getData.php?",
        type: "GET",
        dataType: "json",
        success: function(json_data) {
            $('form').form('load', json_data);
        }
    });
});

Upvotes: 0

Jeroen van den Broek
Jeroen van den Broek

Reputation: 863

I'm not entirely convinced I'm answering the right question, but normally in order to fill up a form, all you'd have to do is something like this:

<form>
    <input name="username" value="<?php echo isset($dataRow->UserName) ? htmlentities($dataRow->UserName) : ""; ?>">
</form>

I left out some things that are not essential to bring the point across, but if this is your first time working with HTML forms, you may want to read up on those as well.

Of course you would first need to get your data from the database before that line:

$resultSet = mysqli_query($connection, "SELECT * FROM Table WHERE Id = " . ((int)$id));
$dataRow = mysqli_fetch_object($query);

Again: I left out some things, assuming you can find the right way to do it based on this example. And of course the procedural style mysqli_* functions should probably be replaced with their object oriented counterparts.

Using AJAX for this seems rather pointless: you're requesting the form anyway, you might as well prefill it.

As for security: I don't see how this is an issue. As long as you escape your HTML (htmlentities in my code above) you should be fine.

Upvotes: 0

Related Questions