CODEWITHSUNDEEP
jqueryhtmldatabase
Lohith Korupolu
Lohith Korupolu

Reputation: 1074

display value from database into HTML input tag

I have a drop down list (HTML Select tag) and a HTML form under it. As below -

Select-> 

<select name="select-native-1" id="select-native-1" onChange="dbToForm(this)">
          <option value="1">Employee 1</option>
          <option value="2">Employee 2</option>
          <option value="3">Employee 3</option>
          <option value="4">Employee 4</option>
        </select>

Form -> 

<form>
        <label for="e_name">Name</label>
        <input name="e_name" id="e_name" value="" type="text" data-theme="a">
        <label for="date">Date</label>
        <input name="date" id="date" value="" type="date" data-theme="a">
        <label for="gender">Gender</label>
        <select name="gender" id="gender" data-role="slider" data-theme="a" data-inline="true">
          <option value="male">Male</option>
          <option value="female">Female</option>
        </select>
        <label for="address">Address</label>
        <textarea name="address" id="address" value="" type="text" data-theme="a"></textarea>
        <br>
        <br>
        <label for="image">Add Image</label>
        <input name="image" id="image" value="" type="file" data-theme="a">
        <br>
        <br>
        <label for="multimedia">Add Multimedia</label>
        <input name="multimedia" id="multimedia" value="" type="file" data-theme="a">
        <br>
        <br>
        <input value="Submit" data-role="button" type="submit">

When I select a value from the Select tag, the expected functionality is, based on the selected item's ID, values from the database are retrieved. Am doing this retrieval with the help of PHP embedded in a JS function.

Javascript -->

function dbToForm(id) {
var id_val = id.value;
var name = '';
var url = "http://localhost:81/PG_crud_experiment1/retrieve.php?id="+id_val; 
$.getJSON(url, function(json) {
               $.each(json, function(i,v) {    

                 name += v.name;   
                 alert (name);

                });
                         $("#e_name").html(name);   
       });

};

Here, I am able to get the values from the DB to my JS function and store it in a variable. That variable has to be pushed to my HTML form field. #e_name is an <input> tag and I am unable to display the retrived value in that field. There is a <textarea> and the value prints there without any problem.

Is this a limitation for <input> tag? If yes, what can be used as alternate for the tag?

Please Note: Values retrieved into my form are for edit and Update purposes. i.e. Values populated in the form can be edited and updated into database.

Upvotes: 1

Views: 5373

Answers (3)

Laurent S.
Laurent S.

Reputation: 6947

Textarea works differently than the rest of input controls. Use this instead :

$("#e_name").val(name)

Upvotes: 2

Adil Shaikh
Adil Shaikh

Reputation: 44740

You need to use .val()

$("#e_name").val(name);

http://api.jquery.com/val/

Upvotes: 3

Barmar
Barmar

Reputation: 781779

Input tags don't have HTML, they have values.

$("#e_name").val(name);

.html() is for filling in the elements between <tag> and </tag>. Inputs don't have matching tags like that, so where would the HTML go?

Upvotes: 5

Related Questions