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
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>
Some important thing you need to make uniques ID, because jquery takes the first conicidence so change
Try
$("#txt-movie-title").val(json.title)instead of $("#movie-title").text(json.title);