return json values in input form using jquery

1.3k views Asked by At

I wanna grab API result into html form input values so i can use POST method after to save data or etc.

But the problem is i was only able to output data in span id.. instead i wanna put that data into input values. I wanna output result in input fields but i don't know how can i do that? i hope you guys understand.

And one more thing how can i output array objects and values? which will be cast result.

API json result: http://api.themoviedb.org/3/movie/141052?api_key=e9dfeccf734a61b9a52d9d7660f0d0a1

Search This: 141052

screenshot

Here is my complete code.

<!DOCTYPE html>
<html>
<head>
    <title>Home</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

</head>
<body>
    <script type="text/javascript">
        $(document).ready(function() {
            var url = 'http://api.themoviedb.org/3/',
            mode = 'movie/',
            movie_id,
            key = '?api_key=e9dfeccf734a61b9a52d9d7660f0d0a1';

            $('button').click(function() {
                var input = $('#movie').val(),
                movie_id = encodeURI(input);
                $.ajax({
                    type: 'GET',
                    url: url + mode + movie_id + key,
                    async: false,
                    jsonpCallback: 'testing',
                    contentType: 'application/json',
                    dataType: 'jsonp',

                    success: function(json) {

                        // grab the span elements by ID and replace their text with the json text

                        $("#movie-title").text(json.title);

                        console.dir(json);
                    },

                    error: function(e) {
                        console.log(e.message);
                    }
                });
            });
        });
    </script>

    <input id="movie" type="text" /><button>Search</button>

    <h1>Movie info:</h1>
    <p>Movie title: <span id="movie-title"></span> </p>


    <div class="input-group">
       <input  id="movie-title" name="file1" type="text"/>
       <div class="input-group-addon">
         Movie Name
       </div>
    </div>

    <div class="form-group ">
        <label class="control-label requiredField" for="Casts">
            4. Casts
            <span class="asteriskField">
                *
            </span>
        </label>

        <input class="form-control" id="Casts" name="Casts" type="text"/>
            <span class="help-block" id="hint_Casts">
                Casts: Name, Name2, Name3
            </span>
    </div>


</body>
</html>
2

There are 2 answers

2
Villegas On BEST ANSWER

Some important thing you need to make uniques ID, because jquery takes the first conicidence so change

<p>Movie title: <span id="span-movie-title"></span> </p>


<div class="input-group">
   <input  id="txt-movie-title" name="file1" type="text"/>
   <div class="input-group-addon">
     Movie Name
   </div>
</div>

Try $("#txt-movie-title").val(json.title) instead of $("#movie-title").text(json.title);

0
Kaiser Dandangi On

Instead of using the text method, use the val method. Also, you should update the selector so it only targets the input field with id you specified.

$("input#movie-title").val(json.title);

If you need to update the span as well, then keep your original statement and include this one too.

From the jquery docs: "The .val() method is primarily used to get the values of form elements such as input, select and textarea. When called on an empty collection, it returns undefined."

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