动态填充的表单数据未发布答案

【问题标题】：Dynamically populated form data not posting动态填充的表单数据未发布
【发布时间】：2016-09-06 17:31:54
【问题描述】：

我有一个 HTML 表单，在从外部源提取数据后，我用 javascript 动态填充了该表单，但是我遇到了一个问题，即通过 javascript 放入表单的数据似乎没有发布到我的php 脚本（将其插入 SQL）。如果我手动将数据输入表单，它会很好地发布，只有当 JS 填写表单时它才不起作用。如何让表单成功发布通过 JS 放入其中的数据？

（ps。我是新手，对于我可能遇到的任何基本错误，我深表歉意！）

表格：

 <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;"/>
</form>

Javascript：

  <script type="text/javascript">
  $(window).load(function(){
  var $Form = $('#search_form'), $Container = $('#container');
  $Container.hide();

 $Form.on('submit', function(p_oEvent){
      var sUrl, sMovie, oData;
      p_oEvent.preventDefault();
  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);
              console.log(oData);
              //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 + '"/>');
              $Container.show();
          }
      });
  });
  });
</script>

PHP：

//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);

【问题讨论】：

用户提交表单时，您的数据似乎已被填充，对吧？为什么？这对我来说是一种奇怪的行为。无论如何，您的数据没有被提交，因为您的 ajax 请求是异步的，并且在提交表单时，请求尚未完成。
先提交了一个不同的表单，它运行 JS 来填充第二个表单
因此情况发生了很大变化。如果可能，请发布您的完整代码。

标签： javascript php html forms post

【解决方案1】：

您的代码几乎没有问题，我为使其正常工作而进行了一些更改。这个想法很简单，

用户输入电影标题并点击提交按钮，这将触发 AJAX。
后端 PHP 代码将处理数据，即将从 www.omdbapi.com 获取电影详细信息，将它们插入数据库并以 json 编码格式将它们返回给 AJAX 请求的 success() 回调函数以填充 HTML 表单。
最后，在success() 回调函数中，它将处理返回的数据并填充您的HTML 表单。

HTML：

在你的 HTML 代码中，你只需要改变

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>
                         ^^^^^^^^^^^^^^^^

另外，我想指出，根据你的逻辑，这两行是多余的，

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

因此，由于您没有在表单中上传任何内容，请删除这两行。或者我可能在这里遗漏了什么。

jQuery：

你的 jQuery 代码应该是这样的，

注意：不要忘记在您的 AJAX 请求中更改此 url: yourpage.php 设置

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

        $Form.on('submit', function(p_oEvent){
            var sMovie, sUrl;
            p_oEvent.preventDefault();
            sMovie = $Form.find('#title').val();
            sUrl = 'https://www.omdbapi.com/?t=' + encodeURIComponent(sMovie) + '&type=movie&plot=full';
            $.ajax({
                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
                        $('#title').val(oData.Title);
                        $('#plot').val(oData.Plot);
                        $('#runtime').val(oData.Runtime);
                        $('#released').val(oData.Released);
                        $('#rated').val(oData.Rated);
                        $('#imdbid').val('http://www.imdb.com/title/' + oData.imdbID);
                        $('#poster').val(oData.Poster);
                        var imgElement = $('#poster_image').find('img');
                        $(imgElement).attr("src", oData.Poster);
                        $Container.show();
                    }
                },

                error: function(jqXHR, textStatus, errorThrown){
                    // error
                    alert(errorThrown);
                }
            });
        });
    });
</script>

PHP：

最后，这就是您在 PHP 端处理数据的方式。它将根据从 AJAX 请求中收到的 URL 获取电影详细信息，将它们插入数据库，然后以 json 编码格式将它们发送回 AJAX 的 success() 回调函数以填充 HTML 表单。

<?php

    if(isset($_POST['url'])){
        $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
    }

?>

【讨论】：