Ewan Lyle Ewan Lyle - 1 year ago 100
HTML Question

Dynamically populated form data not posting

I've got an HTML form that I have dynamically populated with javascript after pulling the data from an external source, however I've got an issue where there data put into the form via javascript doesn't seem to post to my php script (to insert it to SQL). If I type the data into the form manually it will post fine, only when JS is filling out the form is it not working. How can I get the form to successfully post the data that is put into it via JS?

(ps. I'm new to this so sorry for any basic errors I might have!)


<form id="metadata_form" action="sql_import.php" method="post" enctype="multipart/form-data">
<!--File upload-->
<label for="file"><span>Filename:</span></label>
<input type="file" name="file" id="file" />
<br />
<!--Metadata input-->
<label class="form_label" for="title">Title:</label> <input type="text" id="title" name="movie_title" class="form_input"> <br><br>
<label class="form_label" for="plot">Plot:</label><br> <textarea id="plot" name="movie_desc" style="width: 95%; height: 125px;"></textarea>
<label class="form_label" for="runtime">Runtime:</label> <input type="text" id="runtime" name="runtime" class="form_input"> <br><br>
<label class="form_label" for="released">Release date:</label> <input type="text" id="released" name="release_dt" class="form_input"> <br><br>
<label class="form_label" for="rated">Rated:</label> <input type="text" id="rated" name="rated" class="form_input"> <br><br>
<label class="form_label" for="imdbid">IMDb Link:</label> <input type="text" id="imdbid" name="imdb_lk" class="form_input"> <br><br>
<label class="form_label" for="poster">Poster URL:</label> <input type="text" id="poster" name="poster_url" class="form_input"> <br><br>
Poster Preview:<br> <div class="poster" style="width:auto;"><img src=""></div> <br><br>
<input type="submit" value="Confirm" style="float:right; clear:both;"/>


<script type="text/javascript">
var $Form = $('#search_form'), $Container = $('#container');

$Form.on('submit', function(p_oEvent){
var sUrl, sMovie, oData;
sMovie = $Form.find('input').val();
sUrl = 'https://www.omdbapi.com/?t=' + sMovie + '&type=movie&plot=full'
$.ajax(sUrl, {
complete: function(p_oXHR, p_sStatus){
oData = $.parseJSON(p_oXHR.responseText);
//output data to form
document.getElementById('title').value = (oData.Title);
document.getElementById('plot').value = (oData.Plot);
document.getElementById('runtime').value = (oData.Runtime);
document.getElementById('released').value = (oData.Released);
document.getElementById('rated').value = (oData.Rated);
document.getElementById('imdbid').value = ('http://www.imdb.com/title/' + oData.imdbID + '');
document.getElementById('poster').value = (oData.Poster);
$Container.find('.poster').html('<img src="' + oData.Poster + '"/>');


//Grab data from input form
$movie_title = $_POST['movie_title'];
$movie_desc = $_POST['movie_desc'];
$runtime = $_POST['runtime'];
$release_dt = $_POST['release_dt'];
$rated = $_POST['rated'];
$imdb_lk = $_POST['imdb_lk'];
$poster_url = $_POST['poster_url'];

//Insert query
$query = "INSERT INTO movies (movie_title, movie_desc, release_dt, rated, imdb_lk, thumbnail_path) VALUES ('$movie_title', '$movie_desc', '$release_dt', '$rated', '$imdb_lk', '$poster_url')";
$result = mysqli_query($db, $query);

Answer Source

There are few issues with your code, and few things I changed to make it work. The idea is simple,

  • User enters a movie title and hits the submit button, which in turn will triggers AJAX.
  • Backend PHP code will process the data i.e will fetch the movie details from www.omdbapi.com, insert them into the database and return them back to the AJAX request's success() callback function in json encoded format to populate the HTML form.
  • Finally, in success() callback function, it will process the returned data and populate your HTML form.


In your HTML code, you just have to change

Poster Preview:<br> <div class="poster" style="width:auto;"><img src=""></div> <br><br>


Poster Preview:<br> <div id="poster_image" style="width:auto;"><img src=""></div> <br><br>

Also, I'd like to point out, these two lines are redundant as per your logic,

<label for="file"><span>Filename:</span></label>
<input type="file" name="file" id="file" />

Hence, since you're not uploading anything with your form, remove these two lines. Or may be I'm missing something here.


Your jQuery code would be like this,

NOTE: Don't forget to change this url: yourpage.php setting in your AJAX request

// User only enters a movie title and submits the form 
<script type="text/javascript">
        var $Form = $('#metadata_form'), $Container = $('#container');

        $Form.on('submit', function(p_oEvent){
            var sMovie, sUrl;
            sMovie = $Form.find('#title').val();
            sUrl = 'https://www.omdbapi.com/?t=' + encodeURIComponent(sMovie) + '&type=movie&plot=full';
                type: 'POST',
                url: 'yourpage.php',  // change this yourpage.php to point to a page where you want to process your ajax request
                data: {url : sUrl},
                dataType: "json",

                success: function(oData){
                    // success
                    if(oData.Response == 'True'){
                        //output data to form
                        $('#imdbid').val('http://www.imdb.com/title/' + oData.imdbID);
                        var imgElement = $('#poster_image').find('img');
                        $(imgElement).attr("src", oData.Poster);

                error: function(jqXHR, textStatus, errorThrown){
                    // error


And finally, this is how you can process the data on PHP side. It will fetch the movie details based the URL it received from the AJAX request, insert them into the database and send them back to AJAX's success() callback function in json encoded format to populate the HTML form.


        $movieData = file_get_contents($_POST['url']);
        $movie = json_decode($movieData, true);
        echo $movieData;  // to populate your HTML form

        $movie_title = $movie['Title'];
        $movie_desc = $movie['Plot'];
        $runtime = $movie['Runtime'];
        $release_dt = $movie['Released'];
        $rated = $movie['Rated'];
        $imdb_lk = $movie['imdbID'];
        $poster_url = $movie['Poster'];

        // Now construct the query and insert it into your table

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download