Automatically fill in form when importing an imdb id from imdbapi

Question

I have the following form:

I want that when you enter an imdb_id I will make a call to the imdb API and get the rest of the information by the id to fill the form automatically if the id doesn't match the user will fill the form himself.

Answer 1

I created a very minimal implementation of what you need using the OMDb API I guessed that that is the API you are working with.
Since I don't have a membership in the API I created this demo using mocked data but this should work fine if you put your API key in the code and replace the parsing from the mock data to the response.

My js:

var mockAladinData = '{"Title":"Aladin","Year":"2009","Rated":"N/A","Released":"30 Oct 2009","Runtime":"132 min","Genre":"Action, Adventure, Comedy","Director":"Sujoy Ghosh","Writer":"Vishal Dadlani (lyrics), Sujoy Ghosh (screenplay), Suresh Nair (additional story), Ritesh Shah (dialogue), Ritesh Shah (story)","Actors":"Amitabh Bachchan, Sanjay Dutt, Riteish Deshmukh, Jacqueline Fernandez","Plot":"Since he was a child, Aladin Chatterjee has been teased for his fairytale name. As a college student he follows his namesake\'s footsteps; unleashing genie Genius and wooing exchange student Jasmine. But the evil Ringmaster approaches.","Language":"Hindi","Country":"India","Awards":"3 wins.","Poster":"https://images-na.ssl-images-amazon.com/images/M/MV5BMTQxMjY4NzUyM15BMl5BanBnXkFtZTcwMDI4NTk5Mw@@._V1_SX300.jpg","Ratings":[{"Source":"Internet Movie Database","Value":"4.6/10"}],"Metascore":"N/A","imdbRating":"4.6","imdbVotes":"2,075","imdbID":"tt1227762","Type":"movie","DVD":"08 Mar 2011","BoxOffice":"N/A","Production":"Eros International","Website":"http://www.aladin.erosentertainment.com/","Response":"True"}';

$("button").on("click", function(event) {
  event.preventDefault();
  var value = $(".movie-id")[0].value.trim(),
    keys = ["Year", "Title"];
  if (value) {
    var url = "https://www.omdbapi.com/?i=" + value + "&apikey={your api key}";
    $.ajax({
      url: url,
      error: function() {
        $(".error-msg").show();
      },
      success: function(response) {
      response = JSON.parse(mockAladinData);
        if (response.Response != "False") {
          $(".error-msg").hide();
          for (var i = 0; i < keys.length; i++) {
            $(".movie-" + keys[i].toLowerCase())[0].value = response[keys[i]];
          }
        } else {
          $(".result-msg").show();
        }
      },
      type: 'GET'
    });
  }
});

My Html:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="movie-form">
  <div>IMDb movie id (example: tt1227762)</div>
  <input class="movie-id" type="text"><button>Enter</button>
  <div class="error-msg msg">Error</div>
  <div class="result-msg msg">No results</div>
  <div>Movie Title</div>
  <input class="movie-title input" type="text">
  <div>Movie year</div>
  <input class="movie-year input" type="text">
</form>
<div>some more input fields</div>

My CSS:

.input {
  display: block;
}
.msg {
  display: none;
}