javascript - 将表单结果传递到另一个表单并转换为表单值

Question

我在一个页面上有两个表单，“顶部表单”搜索电影，我试图获取从顶部表单找到的数据并将其作为值传递给底部表单，以便它可以输入数据库。

我无法执行此操作，但是我可以将结果显示在页面上。这是我的代码:

顶级表格数据

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<?php
$squery="";
if(isset($_GET["squery"]))
{
$squery=$_GET["squery"];
}
?>
<div class="col-xs-8 col-xs-offset-2">
<form action="#" method="GET" class="form-horizontal">
<div class="form-group">
        <label for="newMovieName" class="col-sm-3 control-label">Search what movie?</label>
        <div class="col-sm-9"> <input type="text" name="squery" class="form-control"><br />
<input type="submit" value="Submit" class="btn btn-success"></div></div>
</form>
  <script type="text/javascript" charset="utf-8">
    var api_key = '6969696969696969696969696969696';

    $(document).ready(function(){
      $.ajax({
        url: 'http://api.themoviedb.org/3/search/movie?api_key=' + api_key + '&query=<?php echo $squery; ?>',
        dataType: 'jsonp',
        jsonpCallback: 'testing'
      }).error(function() {
        console.log('error')
      }).done(function(response) {
          var i=0;
       // for (var i = 0; i < response.results.length; i++) {
          $('#search_results').append('<li>' + response.results[i].title + '</li>');
       // }
         $('#search_results_title').append(response.results[i].title);
         $('#search_results_release').append(response.results[i].release_date);
         $('#search_results_overview').append(response.results[i].overview);
         $('#search_results_poster').append('https://image.tmdb.org/t/p/w185' + response.results[i].poster_path);
         $('#search_results_votes').append(response.results[i].vote_count);
      });
    });
  </script>

最佳表格结果

这里是上面表单中显示结果的地方但是，我希望这些结果在下面的表单中显示为值。

  <h3>Results</h3>

  <p id="error"></p>
  <ul id="search_results_title"></ul>
  <ul id="search_results_release"></ul>
  <ul id="search_results_overview"></ul>
  <ul id="search_results_poster"></ul>
  <ul id="search_results_votes"></ul>

底部表格数据

这是应该提交到数据库的底部表单，并将上面的“结果”作为值。

    <form class="form-horizontal" role="form" action="processmovie.php" method="get" enctype="text/plain">
  <div class="form-group">
    <label for="newMovieName" class="col-sm-3 control-label">Title</label>
    <div class="col-sm-9">
      <input type="text" class="form-control" id="newMovieName" name="movie_name" placeholder="Movie Title" required value="">
    </div>
  </div>
  <div class="form-group">
    <label for="movieYear" class="col-sm-3 control-label">Year</label>
    <div class="col-sm-9">
      <input type="text" class="form-control" id="movieYear" name="movie_year" placeholder="Year" required>
    </div>
  </div>
  <div class="form-group">
    <label for="movieBio" class="col-sm-3 control-label">Storyline</label>
    <div class="col-sm-9">
      <textarea type="email" class="form-control" id="movieBio" name="movie_bio" rows="4" placeholder="Enter Storyline" required></textarea>
    </div>
  </div>
  <div class="form-group">
    <label for="newImage" class="col-sm-3 control-label">Movie Cover URL</label>
    <div class="col-sm-9">
      <input type="text" id="newImage" class="form-control" name="movie_img" placeholder="Enter URL" required>
    </div>
  </div>
  <div class="form-group">
    <label for="movieRating" class="col-sm-3 control-label">Rating</label>
    <div class="col-sm-9">
      <select id="movieRating" name="movie_rating" class="form-control" required>
        <option value="G">G</option>
        <option value="PG">PG</option>
        <option value="PG-13">PG-13</option>
        <option value="R">R</option>
        <option value="NR">NR (Not Rated)</option>
      </select>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-3 col-sm-9">
      <button type="submit" class="btn btn-success">Add Movie</button>
    </div>
  </div>
</form>

我尝试使用各种代码来尝试获取值，这里是一个示例:<?php echo $_GET['search_results_title'];?>

我还发现了这样的例子:How to pass the value of a form to another form?但是，我的表单位于同一页面上，而不是不同的页面上。

Answer 1

正如我在评论中所说，您只想将 ajax 调用更改为如下所示:

$.ajax({
        url: 'http://api.themoviedb.org/3/search/movie?api_key=' + api_key + '&query=<?php echo $squery; ?>',
         dataType: 'jsonp',
         jsonpCallback: 'testing'
      }).error(function() {
         console.log('error')
      }).done(function(response) {
         var i=0;

         $('#newMovieName').val(response.results[i].title);
         $('#movieYear').val(response.results[i].release_date);
         $('#movieBio').val(response.results[i].overview);
         $('#newImage').val('https://image.tmdb.org/t/p/w185' + response.results[i].poster_path);
      });

(我不确定 response.results[i].vote_count 和 movieRating 之间的关系)

Here is a fiddle有点显示结果，尽管由于 ajax 调用，我无法完全复制您的代码